美化HTML表单-优快云博客

本文链接：https://blog.youkuaiyun.com/t1172400887/article/details/77874973

上一节我们已经把登陆的第一部分初步作掉了效果如下

这样子,基本它该做的事差不多都可以做了,但是有个小小的问题就是有点难看。现在我们来给它美化一下（前面我们说过标签就像是积木，今天的任务就是在拼好的积木上画点花之类的）

首先，我们发现，用户名和密码是必填的，一般必填项前面都会有个红色的*用来提示，现在我们就来加个星号如下（别想了，就是加个*）

<html>  
<head></head>  
<body> 
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">  
    <table border='1' >  
        <tr><td>*用户名:</td><td><input type="text"></td></tr>  
        <tr><td>*密码:</td><td><input type="password"></td></tr>  
        <tr><td></td><td><input type="checkbox">记住密码<input type="checkbox">自动登录</td></tr>  
        <tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>  
        <tr><td>家乡</td><td><select>  
        <option value="1">亚洲</option>  
        <option value="2">欧洲</option>  
        <option value="3">非洲</option>  
        <option value="4">美洲</option>  
        </select></td></tr>  
        <tr><td>图片：</td><td><input type="file"></td></tr>  
        <tr><td></td><td><input type="submit"> <input type="reset"></td></tr>  
    </table>  
</form>  
  
</body>  
</html>

然后我们发现 * 是黑色的，现在我们想把它变成红色，这时我们就需要一种叫css的东西(知道叫这个名字是干啥的就好)

首先，因为我们只想让*变色，所以需要用某种标签把它 "选中" 我习惯用span标签

于是代码变成了

   <tr><td><span>*</span>用户名:</td><td><input type="text"></td></tr>  
        <tr><td><span>*</span>密码:</td><td><input type="password"></td></tr>

这时*还是黑的，然后神奇的事情要来了看下面代码和这里有什么差

  <tr><td><span style="color: red">*</span>用户名:</td><td><input type="text"></td></tr>  
        <tr><td><span style="color: red">*</span>密码:</td><td><input type="password"></td></tr>

我们发现下面的span标签里面多了点东西首先是 style 这东西用来告诉浏览器，要在这个标签上画花了，具体画成什么样子看里面包含的内容。这里我们想要设置span标签中文字的颜色，所有用了 color 然后是一个冒号，跟着对应值。这里的意思是 “span标签中文字的颜色是红色” 效果如下

我们发现*已经变成红色了
然后我们来给表格设置一个背景颜色代码如下

<html>  
<head></head>  
<body> 
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">  
    <table style="background-color: EBF2FA;" >  
        <tr><td><span style="color: red">*</span>用户名:</td><td><input type="text"></td></tr>  
        <tr><td><span style="color: red">*</span>密码:</td><td><input type="password"></td></tr>  
        <tr><td></td><td><input type="checkbox">记住密码<input type="checkbox">自动登录</td></tr>  
        <tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>  
        <tr><td>家乡</td><td><select>  
        <option value="1">亚洲</option>  
        <option value="2">欧洲</option>  
        <option value="3">非洲</option>  
        <option value="4">美洲</option>  
        </select></td></tr>  
        <tr><td>图片：</td><td><input type="file"></td></tr>  
        <tr><td></td><td><input type="submit"> <input type="reset"></td></tr>  
    </table>  
</form>  
  
</body>  
</html>

table标签中的 background-color 用来设置标签的背景颜色，后面的值这里用的是三个16进制的值表示的颜色（每两个表示一个数字，分别代表代表光的三原色红绿蓝的程度，FF是最大，00表示不存在这种颜色）效果如下

然后我们想给它加个边框(前面那个边框(border)去掉了) 如下

<html>  
<head></head>  
<body> 
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">  
    <table style="background-color: EBF2FA; border: 1px dashed;" >  
        <tr><td><span style="color: red">*</span>用户名:</td><td><input type="text"></td></tr>  
        <tr><td><span style="color: red">*</span>密码:</td><td><input type="password"></td></tr>  
        <tr><td></td><td><input type="checkbox">记住密码<input type="checkbox">自动登录</td></tr>  
        <tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>  
        <tr><td>家乡</td><td><select>  
        <option value="1">亚洲</option>  
        <option value="2">欧洲</option>  
        <option value="3">非洲</option>  
        <option value="4">美洲</option>  
        </select></td></tr>  
        <tr><td>图片：</td><td><input type="file"></td></tr>  
        <tr><td></td><td><input type="submit"> <input type="reset"></td></tr>  
    </table>  
</form>  
  
</body>  
</html>

这里 border 后面的 1px 代表宽度是1像素，dashed 代表边框是虚线所以这个table标签的边框样式就是宽度为1像素的虚线效果如下

然后类似把提交按钮和重置按钮的颜色改变

<html>  
<head></head>  
<body> 
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">  
    <table style="background-color: EBF2FA; border: 1px dashed;" >  
        <tr><td><span style="color: red">*</span>用户名:</td><td><input type="text"></td></tr>  
        <tr><td><span style="color: red">*</span>密码:</td><td><input type="password"></td></tr>  
        <tr><td></td><td><input type="checkbox">记住密码<input type="checkbox">自动登录</td></tr>  
        <tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>  
        <tr><td>家乡</td><td><select>  
        <option value="1">亚洲</option>  
        <option value="2">欧洲</option>  
        <option value="3">非洲</option>  
        <option value="4">美洲</option>  
        </select></td></tr>  
        <tr><td>图片：</td><td><input type="file"></td></tr>  
        <tr><td></td><td><input style="background-color: 1273BB" type="submit"> <input style="background-color: 1273BB"  type="reset"></td></tr>  
    </table>  
</form>  
  
</body>  
</html>

然后我们发现有些标签的样式其实是一样的，这时，我们就可以把公共的部分提取出来放到开头如下

<html>  
<head>
    <style type="text/css">
    table{
        background-color: EBF2FA;
    }
    .redstar{
        color: red;
    }
    #btn{
        background-color: 1273BB;
        color: white;/
    }
    table, table tr td{
        border: 1px dashed;/*边框1像素虚线*/
        border-collapse: collapse;/*合并边框,可以去掉试一下*/
    }
    </style>
</head>  
<body> 
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">  
    <table >  
        <tr><td><span class="redstar">*</span>用户名:</td><td><input type="text"></td></tr>  
        <tr><td><span class="redstar">*</span>密码:</td><td><input type="password"></td></tr>  
        <tr><td></td><td><input type="checkbox">记住密码<input type="checkbox">自动登录</td></tr>  
        <tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>  
        <tr><td>家乡</td><td><select>  
        <option value="1">亚洲</option>  
        <option value="2">欧洲</option>  
        <option value="3">非洲</option>  
        <option value="4">美洲</option>  
        </select></td></tr>  
        <tr><td>图片：</td><td><input type="file"></td></tr>  
        <tr><td></td><td><input id="btn" type="submit"> <input id="btn" type="reset"></td></tr>  
    </table>  
</form>  
  
</body>  
</html>

上面直接写的 table 代表table标签的样式， .restar(不要忘了前面的点) 代表所有class属性为restar的标签的样式 #btn代表所有id属性是btn的标签的样式(不建议这么用，一般用class) 最后的table ， table tr td 代表所有 table标签以及 table标签下面的tr标签里面的td标签的样式 /**/ 中间的部分内容是注释，不起作用。效果如下

然后我们可能其他html页面中也要用到这些样式，而且太多这种东西都写在页面里感觉有点乱，于是，又可以把它们提取出来放到一个新的文件中，然后在用到的页面中引用，类似.h文件。我们把上面那些样式保存到test.css文件中，然后再在1.html中引入

test.css 如下

   .redstar{
        color: red;
    }
    #btn{
        background-color: 1273BB;
        color: white;/
    }
    table, table tr td{
        border: 1px dashed;/*边框1像素虚线*/
        border-collapse: collapse;/*合并边框,可以去掉试一下*/
    }
    table{
        background-color: EBF2FA;
    }

1.html代码如下

<html>  
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>  
<body> 
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">  
    <table >  
        <tr><td><span class="redstar">*</span>用户名:</td><td><input type="text"></td></tr>  
        <tr><td><span class="redstar">*</span>密码:</td><td><input type="password"></td></tr>  
        <tr><td></td><td><input type="checkbox">记住密码<input type="checkbox">自动登录</td></tr>  
        <tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>  
        <tr><td>家乡</td><td><select>  
        <option value="1">亚洲</option>  
        <option value="2">欧洲</option>  
        <option value="3">非洲</option>  
        <option value="4">美洲</option>  
        </select></td></tr>  
        <tr><td>图片：</td><td><input type="file"></td></tr>  
        <tr><td></td><td><input id="btn" type="submit"> <input id="btn" type="reset"></td></tr>  
    </table>  
</form>  
  
</body>  
</html>

效果如下