html 表单样式-CSS 控制表单样式

bendan520 html

2023-08-28 0 8,703 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

1、案例分析

最终达到疗效html 表单样式，如图所示。

2、案例实现

1.新建一个HTML文件html 表单样式，具体代码如下：

<html><head><meta charset="utf-8"><title>CSS控制表单样式</title><link href="style.css" type="text/css" rel="stylesheet" /></head><body><form action="#" method="post">    <p>    <span>账号：</span>    <input type="text" name="username" class="num" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />  </p>  <p>    <span>密码：</span>    <input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]w{5,17}$"/>  </p>  <p>    <input type="button" class="btn01" value="登录"/>  </p></form></body></html>

2.定义CSS样式

(1)定义基本样式

@charset "utf-8";/* CSS Document */body{font-size:18px; font-family:"微软雅黑"; background:url(timg.jpg) no-repeat top center; color:#FFF;}       form,p{ padding:0; margin:0; border:0;}   /*重置浏览器的默认样式*/

(2) 设置表格

form{  width:420px;  height:200px;  padding-top:60px;  margin:250px auto;                      /*使表单在浏览器中居中*/  background:rgba(255,255,255,0.1);    /*为表单添加背景颜色*/  border-radius:20px;  border:1px solid rgba(255,255,255,0.3);  }

(3)设置文本框

p{  margin-top:15px;   text-align:center; } p span{  width:60px;  display:inline-block;   text-align:right;  } .num,.pass{                /*对文本框设置共同的宽、高、边框、内边距*/   width:165px;   height:18px;   border:1px solid rgba(255,255,255,0.3);    padding:2px 2px 2px 22px;   border-radius:5px;  color:#FFF;  } .num{             /*定义第一个文本框的背景、文本颜色*/  background:url(3.png) no-repeat 5px center rgba(255,255,255,0.1);    } .pass{            /*定义第二个文本框的背景*/    background: url(4.png) no-repeat 5px center rgba(255,255,255,0.1);     }

(4)设置圆角边框

.btn01{  width:190px;   height:25px;   border-radius:3px;       /*设置圆角边框*/   border:2px solid #000;   margin-left:65px;  background:#57b2c9;  color:#FFF;  border:none;  }