【自学java笔记#第五十四天#】javaweb day02 html和css的组合使用
一、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>
浙公网安备 33010602011771号