一、css的基本用法
二、综合练习
（1）1、仿页面：
（1）2、实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合练习1</title>
<style type="text/css">
.div1{
width: 620px;
height: 40px;
font-family: 宋体;
font-size: smaller;
color: dimgray;
}
.div2{
width: 620px;
height: 10px;
}
.div3{
width: 620px;
height: auto;
}
.div3 span{
display: inline-block;
vertical-align: middle;
padding: 5px 8px;
font-size: smaller;
font-family: 宋体;
color: dimgray;
line-height: 20px;
}
.div3 img{
vertical-align: middle;
}
.div4{
width: 620px;
height: auto;
}
.div4 span{
font-size: 12px;
display: inline-block;
vertical-align: middle;
padding: 50px -20px;
line-height: 22px;
font-family: 宋体;
}
.div4 img{
vertical-align: middle;
margin-left: 55px;
padding: 10px 0px;
}
.div5{
font-size: 12px;
color: darkgray;
width: 620px;
height: 20px;
font-family: 宋体;
}
.div6{
margin-left: 55px;
}
</style>
</head>
<body>
<div class="div1">
<p style="float: left"><img src="../imgs1/1.png"/> <b>最新动态</b></p>
<p style="float: right"><img src="../imgs1/2.png"/> 设置</p>
</div>
<div class="div2"><hr color="#A9A9A9" size="1px"/></div>
<div class="div3">
<img src="../imgs1/4.png" alt=""/>
<span>
热门回答，来自 机械 <font color="#336699">关注话题</font><br>
<font color="#336699"><b>人类史上令人叹为观止的极限精度制造成果有哪些？</b></font>
</span>
<img align="right" src="../imgs1/3.png"/>
</div>
<div class="div3">
<img src="../imgs1/6551.png"/>
<span><font color="black"><b>Vincent Fu,</b> Materials Science, PhD</font></span>
</div>
<div class="div4">
<img src="../imgs1/6.png"/>
<span>
说到精度，就不得不提在材料学中最重要的一个方面：表征。要<br/>
想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出<br/>
放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓<br/>
一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），<br/>
如果要获得更深... <font color="#336699">显示全部</font><br/>
</span>
</div>
<p class="div5">
<img src="../imgs1/7.png" class="div6"/>
<span>关注问题</span>
<img src="../imgs1/8.png"/>
<span>867条评论</span>
<img src="../imgs1/9.png"/>
<span>作者保留权利</span>
</p>
<div class="div2"><hr color="#A9A9A9" size="1px"/></div>
</body>
</html>（2）1、仿页面：
（2）2、实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html-css综合练习2</title>
<style type="text/css">
.table1{
width: 800px;
height: 600px;
background-color: #333333;
}
.table2{
width: 540px;
height: 545px;
background-color: #11141b;
border: 2px;
float: right;
}
.table3{
width: 235px;
height: 545px;
background-color: #11141b;
border: 2px;
float: left;
}
.chacolor1{
font-size: xx-small;
color: whitesmoke;
}
img{
width: 65px;
height: 70px;
border: 1px #484d53 solid;
}
.chacolor{
color: #ff9100;
font-size: smaller;
text-align: center;
}
.title{
text-align: center;
font-size: x-small;
color: whitesmoke;
}
.remark{
color: #ff9100;
font-size: xx-small;
text-align: left;
}
</style>
</head>
<body>
<div class="table1">
<div><table class="table2">
<tr>
<td><img src="../img2/1.jpg"/></td>
<td><img src="../img2/2.jpg"/></td>
<td><img src="../img2/3.jpg"/></td>
<td><img src="../img2/4.jpg"/></td>
<td><img src="../img2/5.jpg"/></td>
<td><img src="../img2/6.jpg"/></td>
<td><img src="../img2/7.jpg"/></td>
</tr>
<tr class="chacolor">
<td>冰霜女巫<br/>丽桑卓</td>
<td>盲森<br/>李青</td>
<td>酒桶<br/>古拉加斯</td>
<td>暗裔剑魔<br/>亚托克斯</td>
<td>沙漠死神<br/>内瑟斯</td>
<td>雷霆咆哮<br/>沃利贝尔</td>
<td>离群之刺<br/>阿卡丽</td>
</tr>
<tr>
<td><img src="../img2/8.jpg"/></td>
<td><img src="../img2/9.jpg"/></td>
<td><img src="../img2/10.jpg"/></td>
<td><img src="../img2/11.jpg"/></td>
<td><img src="../img2/38.jpg"/></td>
<td><img src="../img2/13.jpg"/></td>
<td><img src="../img2/14.jpg"/></td>
</tr>
<tr class="chacolor">
<td>扭曲树精<br/>茂凯</td>
<td>符文法师<br/>瑞兹</td>
<td>虚空先知<br/>马尔扎哈</td>
<td>审判天使<br/>凯尔</td>
<td>海洋之灾<br/>普朗克</td>
<td>水晶先锋<br/>斯卡纳</td>
<td>诡术妖姬<br/>乐芙兰</td>
</tr>
<tr>
<td><img src="../img2/15.jpg"/></td>
<td><img src="../img2/36.jpg"/></td>
<td><img src="../img2/17.jpg"/></td>
<td><img src="../img2/18.jpg"/></td>
<td><img src="../img2/19.jpg"/></td>
<td><img src="../img2/20.jpg"/></td>
<td><img src="../img2/21.jpg"/></td>
</tr>
<tr class="chacolor">
<td>龙血武姬<br/>希瓦娜</td>
<td>蛮族之王<br/>泰达米尔</td>
<td>刀锋舞者<br/>艾瑞莉娅</td>
<td>复仇焰魂<br/>布兰德</td>
<td>狂野女猎手<br/>奈德丽</td>
<td>蒸汽机器人<br/>布里茨</td>
<td>疾风剑豪<br/>亚索</td>
</tr>
<tr>
<td><img src="../img2/22.jpg"/></td>
<td><img src="../img2/23.jpg"/></td>
<td><img src="../img2/24.jpg"/></td>
<td><img src="../img2/39.jpg"/></td>
<td><img src="../img2/26.jpg"/></td>
<td><img src="../img2/27.jpg"/></td>
<td><img src="../img2/28.jpg"/></td>
</tr>
<tr class="chacolor">
<td>死亡颂唱者<br/>卡尔萨斯</td>
<td>不祥之刃<br/>卡特琳娜</td>
<td>惩戒之箭<br/>韦鲁斯</td>
<td>麦林炮手<br/>崔丝塔娜</td>
<td>仙灵女巫<br/>璐璐</td>
<td>沙漠皇帝<br/>阿兹尔</td>
<td>深渊巨口<br/>克格莫</td>
</tr>
<tr>
<td><img src="../img2/29.jpg"/></td>
<td><img src="../img2/30.jpg"/></td>
<td><img src="../img2/31.jpg"/></td>
<td><img src="../img2/32.jpg"/></td>
<td><img src="../img2/37.jpg"/></td>
<td><img src="../img2/34.jpg"/></td>
<td><img src="../img2/35.jpg"/></td>
</tr>
<tr class="chacolor">
<td>皮城女警<br/>凯特琳</td>
<td>未来守护者<br/>杰斯</td>
<td>光辉女郎<br/>拉克丝</td>
<td>战争之影<br/>赫卡里姆</td>
<td>皎月女神<br/>黛安娜</td>
<td>战争女神<br/>希维尔</td>
<td>狂暴之心<br/>凯南</td>
</tr>
</table>
</div>
<div>
<table class="table3">
<tr class="title">
<td colspan="3"><p><h2>英雄资料</h2></p></td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox" style="border: 2px"/>坦克</td>
<td><input type="checkbox"/>法师</td>
<td><input type="checkbox"/>刺客</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>辅助</td>
<td><input type="checkbox"/>新手</td>
<td><input type="checkbox"/>近战</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>远程</td>
<td><input type="checkbox"/>推进</td>
<td><input type="checkbox"/>打野</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>后期</td>
<td><input type="checkbox"/>潜行</td>
<td><input type="checkbox"/>战士</td>
</tr>
<tr class="remark">
<td colspan="3">英雄价格：</td>
</tr>
<tr>
<td colspan="3"><hr style="border: dashed 0.8px #263145"/></td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>6300</td>
<td><input type="checkbox"/>4800</td>
<td><input type="checkbox"/>3150</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>1350</td>
<td><input type="checkbox"/>450</td>
<td></td>
</tr>
<tr class="title">
<td colspan="3"><p><h2>物品资料</h2></p></td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>生命值</td>
<td><input type="checkbox"/>攻击速度</td>
<td><input type="checkbox"/>护甲穿透</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>暴击</td>
<td><input type="checkbox"/>法术穿透</td>
<td><input type="checkbox"/>魔法抗性</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>法术伤害</td>
<td><input type="checkbox"/>物理伤害</td>
<td><input type="checkbox"/>消耗品</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>韧性</td>
<td><input type="checkbox"/>法力值</td>
<td><input type="checkbox"/>生命偷取</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>冷却缩减</td>
<td><input type="checkbox"/>生命回复</td>
<td><input type="checkbox"/>附魔</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>法力回复</td>
<td><input type="checkbox"/>法术吸血</td>
<td><input type="checkbox"/>移动速度</td>
</tr>
<tr class="chacolor1">
<td><input type="checkbox"/>护甲值</td>
<td></td>
<td></td>
</tr>
<tr class="title">
<td colspan="3"><p><h2>符文资料</h2></p></td>
</tr>
</table>
</div>
</div>
</body>
</html>（3）1、仿页面：
（3）2、实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html-css综合练习3</title>
<style>
.attention{
color: red;
font-size: small;
text-align: left;
}
.form{
border: 1px #dee7fa solid;
width: 610px;
height: 425px;
}
.divborder{
border: 1px #dee7fa solid;
}
.info1{
font-size: small;
color: #426bd7;
text-align: left;
background-image: url("../纯色背景1.png");
border: 3px solid white;
}
.color*{
color: red;
}
.table1{
width: 595px;
height: 85px;
vertical-align: center;
text-align: left;
font-size: smaller;
}
.table2{
width: 595px;
height: 55px;
vertical-align: center;
text-align: left;
font-size: smaller;
}
.table3{
width: 595px;
height: 55px;
vertical-align: center;
text-align: left;
font-size: smaller;
}
.text_background1{
background-color: #f4f4f4;
border: solid 1px darkgray;
}
.text_background2{
background-color: #f4f4f4;
border: solid 1px #f4f4f4;
}
.text_color{
color: #0000ff;
}
</style>
</head>
<body>
<span class="attention"> 请注意：带有”*“的项目必须填写。</span>
<form class="form">
<div class="divborder">
<div class="info1"><b> 请填写您的用户名：</b></div>
<table class="table1">
<tr>
<td rowspan="3">
<font color="red">*</font>通行证用户名：
</td>
<td rowspan="3">
<input type="text" value="请输入用户名" class="text_background1"/><br/>
<u class="text_color">查看用户名是否被占用</u>
</td>
<td rowspan="3" class="text_background2">
用户名由a~z的英文字母（不区分大小写）、0~9的数<br/>
字、<b>点</b>、<b>减号</b>或<b>下划线</b>组成，长度为3~18个字符，只<br/>
能以数字或者字母开头和结尾，例如：kyzy_001。
</td>
</tr>
</table>
</div>
<div class="divborder">
<div class="info1"><b> 请填写安全设置：</b>（安全设置用于验证账号和找回密码）</div>
<span class="attention"> 以下信息对保证您账号的安全极为重要，请您务必认真填写。</span>
<table class="table2">
<tr>
<td> <font color="red">*</font>输入登录密码：</td>
<td><input type="text" class="text_background1"></td>
<td rowspan="2" class="text_background2">
密码长度为6~16位，区分字母大小写。登录密码可以<br/>
由字母、数字、特殊字符组成。【<u class="text_color">更多说明</u>】
</td>
</tr>
<tr>
<td> <font color="red">*</font>登录密码确认：</td>
<td><input type="text" class="text_background1"></td>
</tr>
</table>
</div>
<div class="divborder">
<table class="table3">
<tr>
<td> <font color="red">*</font>密码提示问题：</td>
<td><input type="text" class="text_background1"></td>
<td rowspan="2" class="text_background2">
当你忘记密码时可以由此找回密码。例如，问题是“我<br/>
的哥哥是谁？”，答案为“peter2”。问题长度<b>不大于</b>36<br/>
个字符，一个汉字占两个字符。答案长度在6~30位之<br/>
间，区分大小写。【<u class="text_color">更多说明</u>】
</td>
</tr>
<tr>
<td> <font color="red">*</font>密码提示答案：</td>
<td><input type="text" class="text_background1"></td>
</tr>
</table>
</div>
<div class="divborder">
<table class="table3">
<tr>
<td> <font color="red">*</font>输入安全码：</td>
<td><input type="text" class="text_background1"></td>
<td rowspan="2" class="text_background2">
安全码是您找回密码的重要途径，安全码长度为6~16<br/>
位，区分字母大小写，由字母、数字、特殊字符组</b>36<br/>
成。<font color="red">特别提醒：安全码一旦设定，将不可自行修改。</font><br/>
【<u class="text_color">更多说明</u>】
</td>
</tr>
<tr>
<td> <font color="red">*</font>安全码确认：</td>
<td><input type="text" class="text_background1"></td>
</tr>
</table>
</div>
<div class="divborder">
<p align="center"><input type="submit" value="提交表单"/></p>
</div>
</form>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
