关于设置html输入框的款式方面

**

关于设置html输入框的款式方面

**

之前我们学习小组写一个web网络考试系统,我理所应当的被分到网页登录界面和考试界面的设计。

这是我写到一半的代码



			<div class="in">
				<input  type="text" id="1" required  placeholder="请填学号" style="height: 40px;width: 200px">
			</div>
			<br><br>
			<div class="in">
				<input  type="password" id="2" required  placeholder="请填密码" style="height: 40px;width: 200px">
			</div>
    		<br><br>
			<input  type="submit" value="登录" style="height: 40px;width: 200px">
			<br>
			<div class="ta">
			<input type="radio" value="1" name="table" id="table1">
				<label for="table1">记住密码</label>
			</div>			
			<br><br>				
		</form>		`


之前遇到的问题是这个输入框背景颜色和框字的大小,想怎么让它美观点,但想想这是考试系统,简单点就好。
所以背景颜色也没写,就让框变得圆滑。

这是输入的款式代码

input[type="text"],[type="password"]{
	background: ;
	-web-kit-appearance:none;
	-moz-appearance:none;
	font-size: 1.2em;
	display: block;
	outline: 0;
	box-sizing: border-box;
	text-align: center;
	color: #6a6f77;
	border-radius:7px;
	border:1px solid #c7cccf;
}
input[type="submit"]{
	font-size: 1.2em;
	border-radius:7px;
	border:1px solid #c7cccf;
}
.ta{
	font-size: 0.8em;
}

.deng{
	font-size: 40px;
	margin:170px 200px 27px 550px;
	padding: 200px;
	padding: 5px;
}

这次学习也让我知道了整体布局和详细的颜色大小及边框样式的设计要根据你写的主题来设计。

猜你喜欢

转载自blog.csdn.net/weixin_44462394/article/details/86139193