1.完成如图效果
材料地址
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
body{
font-family:"宋体";
font-size:13px;
color:#666666;
width:643px;
}
.bold{
font-weight:bold;
}
div.topdiv{
border-bottom-style:solid;
border-bottom-color:silver;
border-bottom-width:1;
padding-bottom:10px;
margin-bottom:15px;
}
.floatright{
float:right;
}
.floatleft{
float:left;
}
.show{
border:1px solid red;
}
div1{
border:1px solid green;
}
a{
text-decoration: none;
color:#336699;
}
.text{
color:#333;
}
div#thirdDiv span{
color:darkgray;
}
div.clearLeft{
clear:left;
}
</style>
<body>
<div class="topdiv">
<img style="margin-right:5px" src="1.png">
<span class="bold">最新动态</span>
<span class="floatright" >设置</span>
<img style="margin-right:5px" class="floatright" src="2.png">
</div>
<div id="left" class="floatleft" style="margin-right:15px">
<img src="4.png"/> <br>
<br>
<span style="background-image:url(5.png); padding:5px">6551</span>
</div>
<div id="right" class="floatleft show1">
<div style="margin-bottom:5px">
<span>热门回答，来自 机械</span>
<a href="#">关注话题</a>
<img src="3.png" class="floatright">
</div>
<a class="bold">人类史上令人叹为观止的极限精度制造成果有哪些？</a>
<p class="text"><strong>Vincent Fu</strong>, Materials Science, PhD</p>
<img class="floatleft" src="6.png"/>
<div class="floatleft text" style="line-height:170%;margin-left:15px;width:367px"">
说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
<a href="">显示全部 </a>
<br>
</div>
<div id="thirdDiv">
<img src="7.png">
<span>关注问题</span>
<img src="8.png">
<span>867条评论</span>
<img src="9.png">
<span>作者保留权利</span>
</div>
</div>
<div class="clearLeft" >
</div>
<div id="bottom" style="margin-top:20px;border-top-style:solid;border-top-width:1px;border-top-color:#ddd">
</div>
</body>
</html>
2.实现如下效果
<html>
<head>
<meta charset="GB2312">
<title>综合性练习3</title>
<style>
div.yidong{
margin:auto;
width:700px;
height:600px;
padding:20px
}
div.background{
width:610px;
height:480px;
border:2px solid lightblue;
}
span.biaoti{
display:block;
background-color:lightblue;
margin:2px;
font-size:15px;
font-weight:bold;
color:steelblue;
}
.red{
color:red;
}
table{
/*border:1px solid red;*/
width:100%;
border-bottom:2px solid lightcyan;
margin:1px;
padding:1px;
}
td{
height:70px;
padding:6px;
margin:2px;
}
.pt_ziti{
font-size:12px;
letter-spacing:1px;
}
a.lj_ziti{
font-size:11px;
letter-spacing:1.5px;
}
td.background{
background-color:whitesmoke;
width:330px;
}
input{
width:120px;
}
tr
td.one{
width:20%
}
td.two{
width:20%
}
td.thr{
width:60%
}
</style>
</head>
<body>
<div class="yidong">
<span class="pt_ziti red">请注意：带有“*”的项目必须填写</span>
<div class="background">
<span class="biaoti">填写您的用户名：</span>
<table class="a">
<tr>
<td class="pt_ziti one"><font color="red">*</font>通行证用户名：</td>
<td class="two"><input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}" style="background-color:ghostwhite ; color:lightgray" /><br/><a class="lj_ziti" href="#";>查看用户名是否被占用</a></td>
<td class="pt_ziti background thr">用户名由a~z的英文字母（不区分大小写）、0~9的数字、<b>点、减号</b>或<b>下划线</b>组成，长度为3~18个字符，只能以数字或者字母开头和结尾，例如：kyzy_001.</td>
</tr>
</table>
<span class="biaoti">请填写安全设置：<span style="font-size:small; font-weight:normal">（安全设置用于验证帐号和找回密码）</span></span>
<span class="pt_ziti red">以下信息对保证您帐号的安全极为重要，请您务必认真填写.</span>
<table>
<tr>
<td class="pt_ziti one"><span class="red">*</span>输入登录密码：<br/><span class="red">*</span>登录密码确认：</td>
<td class="two"><input type="text"style=" background-color:ghostwhite";><br style="margin:5px"/><input type="text" style=" background-color:ghostwhite";></td>
<td class="pt_ziti background thr">密码长度为6~16位，区分字母大小写，登录密码可以由字母、数字、特殊字符组成.【<a class="lj_ziti" href="#";>更多说明</a>】</td>
</tr>
</table>
<table>
<tr>
<td class="pt_ziti one"><span class="red">*</span>密码提示问题：<br/><span class="red">*</span>密码提示答案：</td>
<td class="two"><input type="text" style=" background-color:ghostwhite";><br/ style="margin:5px"><input type="text" style=" background-color:ghostwhite";></td>
<td class="pt_ziti background thr">当您忘记密码时可以由找回密码.例如，问题是“我的哥哥是谁”，答案为“peter2”.问题长度<b>不大于36</b>个字符，一个汉子占两个字符，答案长度在6~30位之间，区分大小写.【<a class="lj_ziti" href="#">更多说明</a>】</td>
</tr>
</table>
<table>
<tr>
<td class="pt_ziti one"><span class="red">*</span>输入安全码：<br/><span class="red">*</span>安全码确认：</td>
<td class="two"><input type="text" style=" background-color:ghostwhite";><br/ style="margin:5px"><input type="text" style=" background-color:ghostwhite";></td>
<td class="pt_ziti background thr">安全码时您找回密码的重要途径，安全码长度为6~16位，区分字母大小写，由字母，数字特殊字符组成.<span class="red">特别提醒：安全码一旦设定，将不可自行修改.</span>【<a class="lj_ziti" href="#">更多说明</a>】</td>
</tr>
</table>
<center></span><input style="margin:10px;" type="button" value="提 交 表 单"></center>
</div>
</div>
</body>
</html>
3.实现如下效果
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
.table1{
}
.tr{
background-color:#11141B;
border-top-color:#11141B;
}
div.gold{
color:#FF9100;
text-align:center;
font-size:10px;
}
div.gold1{
color:#FF9100;
text-align:left;
font-size:10px;
font-style:bold;
}
div.fond{
background-color:#333333;
width:800px;
height:550px;
}
div.boldwhite{
font:"宋体" bold;
color: #F4F4F4;
text-align:center;
font-size:15px;
margin:10px;
margin-bottom:15;
}
div.white{
font:"宋体";
color: #F4F4F4;
margin-top:5px;
margin-bottom:5px;
}
div.dark{
background-color:#11141B;
}
.floatleft{
float:left;
}
span.option{
margin-right:15px;
font-size:10px;
}
</style>
<div class="fond" >
<div style="padding-bottom:20px;" class="dark floatleft">
<div class="boldwhite">
英雄资料
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 坦克 </span>
<span class="option"><input type="checkbox" > 法师 </span>
<span class="option"><input type="checkbox" > 刺客 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 辅助 </span>
<span class="option"><input type="checkbox" > 新手 </span>
<span class="option"><input type="checkbox" > 近战 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 远程 </span>
<span class="option"><input type="checkbox" > 推进 </span>
<span class="option"><input type="checkbox" > 打野 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 后期 </span>
<span class="option"><input type="checkbox" > 潜行 </span>
<span class="option"><input type="checkbox" > 战士 </span>
</div>
<div style="margin-top:15px;margin-left:15px" class="gold1" ><strong>英雄价格:</strong></div>
<div style="border-top-style:dashed; border-color:#666666;border-width:1; margin-bottom:10px; margin-top: 10px"> </div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 6300 </span>
<span class="option"><input type="checkbox" > 4800 </span>
<span class="option"><input type="checkbox" > 3150 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 1350 </span>
<span class="option"><input type="checkbox" > 450 </span>
</div>
<div style="margin-top:20px;margin-bottom:20px" class="boldwhite">
物品资料
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 生命值 </span>
<span style="margin-left:-10px" class="option"><input type="checkbox" > 攻击速度 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 护甲穿透 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 暴击 </span>
<span class="option"><input type="checkbox" > 法术穿透 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 魔法抗性 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 法术伤害 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 物理伤害 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 消耗品 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 韧性 </span>
<span class="option"><input type="checkbox" > 法力值 </span>
<span style="margin-left:-10px" class="option"><input type="checkbox" > 生命偷取 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 冷却缩减 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 生命回复 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 附魔 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 法力回复 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 法术吸血 </span>
<span style="margin-left:-20px" class="option"><input type="checkbox" > 移动速度 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox"> 护甲值 </span>
</div>
<div style="margin-top:25px" class="boldwhite">
符文资料
</div>
</div>
<table align="right" style="background-color:#11141B; margin-right:5px;" class="table1">
<tr>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="0.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="1.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="2.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="3.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="4.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="5.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="6.jpg" width="60" height="60" /></td>
</tr>
<tr>
<td ><div class="gold">牛头酋长</div>
<div class="gold">阿里斯塔</div></td>
<td ><div class="gold">钢铁大侠</div>
<div class="gold">波比</div></td>
<td><div class="gold">殇之木乃伊</div>
<div class="gold">阿木木</div></td>
<td><div class="gold">冰晶凤凰</div>
<div class="gold">艾尼维亚</div></td>
<td><div class="gold">黑暗之女</div>
<div class="gold">安妮</div></td>
<td><div class="gold">寒冰猎手</div>
<div class="gold">艾希</div></td>
<td><div class="gold">蒸汽机机器人</div>
<div class="gold">布里茨</div></td>
</tr>
<tr style="margin:10px">
<td style="padding:8px;"><img src="7.jpg" style="border:#666666 solid; border-width:thin;" width="60" height="60" /></td>
<td style="padding:8px;"><img src="8.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
<td style="padding:8px;"><img src="9.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
<td style="padding:8px;"><img src="10.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
<td style="padding:8px;"><img src="11.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
<td style="padding:8px;"><img src="12.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
<td style="padding:8px;"><img src="13.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
</tr>
<tr>
<td><div class="gold">虚空恐惧</div>
<div class="gold">科.加斯</div></td>
<td><div class="gold">英雄投弹手</div>
<div class="gold">库奇</div></td>
<td><div class="gold">祖安狂人</div>
<div class="gold">家多医生</div></td>
<td><div class="gold">寡妇制造者</div>
<div class="gold">伊芙琳</div></td>
<td><div class="gold">末日使者</div>
<div class="gold">费德提客</div></td>
<td><div class="gold">海洋之灾</div>
<div class="gold">普朗克</div></td>
<td><div class="gold">酒桶</div>
<div class="gold">古拉加斯</div></td>
</tr>
<tr >
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="14.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="15.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="16.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="17.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="18.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="19.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="20.jpg" width="60" height="60" /></td>
</tr>
<tr >
<td><div class="gold">大发明家</div>
<div class="gold">黑默丁格</div></td>
<td><div class="gold">风暴之怒</div>
<div class="gold">迦娜</div></td>
<td><div class="gold">武器大师</div>
<div class="gold">贾克斯</div></td>
<td><div class="gold">死亡颂唱着</div>
<div class="gold">卡尔萨斯</div></td>
<td><div class="gold">虚空行者</div>
<div class="gold">卡萨丁</div></td>
<td><div class="gold">不祥之刃</div>
<div class="gold">卡特琳娜</div></td>
<td><div class="gold">审判天使</div>
<div class="gold">凯尔</div></td>
</tr>
<tr>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="21.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="22.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="23.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="24.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="25.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="26.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="27.jpg" width="60" height="60" /></td>
</tr>
<tr>
<td><div class="gold">熔岩巨兽</div>
<div class="gold">墨菲特</div></td>
<td><div class="gold">无极剑圣</div>
<div class="gold">易</div></td>
<td><div class="gold">堕落天使</div>
<div class="gold">莫甘娜</div></td>
<td><div class="gold">沙漠死神</div>
<div class="gold">内瑟斯</div></td>
<td><div class="gold">狂野女猎手</div>
<div class="gold">奈德丽</div></td>
<td><div class="gold">雪人骑士</div>
<div class="gold">努努</div></td>
<td><div class="gold">战争之王</div>
<div class="gold">潘森</div></td>
</tr>
<tr>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="28.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="29.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="30.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="31.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="32.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="33.jpg" width="60" height="60" /></td>
<td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="34.jpg" width="60" height="60" /></td>
</tr>
<tr >
<td><div class="gold">披甲龙兔</div>
<div class="gold">拉莫斯</div></td>
<td><div class="gold">流浪法师</div>
<div class="gold">瑞兹</div></td>
<td><div class="gold">恶魔小丑</div>
<div class="gold">萨科</div></td>
<td><div class="gold">炼金术士</div>
<div class="gold">辛古德</div></td>
<td><div class="gold">亡灵勇士</div>
<div class="gold">塞恩</div></td>
<td><div class="gold">战争女神</div>
<div class="gold">希维尔</div></td>
<td><div class="gold">众星之子</div>
<div class="gold">索拉卡</div></td>
</tr>
</table>
</div>
</div>
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
