看程序学css-4 综合应用
2024-06-23 01:48:02
## 1、<!DOCTYPE html>
<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、<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<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>
</body>
</html>## 3、<!DOCTYPE html><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;}trtd.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>
看程序学css-4 综合应用相关推荐
- css实操：学成网综合案例
css实操:学成网综合案例 页面效果: 易错点很多,需要注意的地方都有注释.常看! HBuilder X > css > 学成网首页.html <!DOCTYPE html> ...
- 程序员也要学会生活，今天自己看教程学做芝士蛋糕
教程转载自:www.jing11.net/gstp/4.html 程序员也要学会生活,今天自己看教程学做芝士蛋糕,今天看了看美味甜品培训的教程,感觉生活也不是只有编程,还有美食,尤其是自己动手做出来的 ...
- 爆火的《看漫画学Python》出PDF版了，文末自取
学习Python的小伙伴大部分应该都知道<看漫画学Python:有趣.有料.好玩.好用(全彩版)>这本书! 毕竟,如果在B站搜索"漫画 Python"等相关关键词,会看 ...
- 《看漫画学Python（全彩版）》
学习Python的小伙伴大部分应该都知道<看漫画学Python:有趣.有料.好玩.好用(全彩版)>这本书! 毕竟,如果在B站搜索"漫画 Python"等相关关键词,会看 ...
- 看漫画学Java，这本书带你从青铜成为Java王者 【赠书福利】
文末送书福利,记得看完哈 小白兔一直想学习 Java,在它学习了一些 Java 知识后,想通过 Java 来完成实际操作,但是还不是很懂,于是它询问了这方面的大牛--大牛哥. 小白兔:"我打 ...
- 最新出炉！《看漫画学Python 2》电子版火爆来袭，300页全新版PDF开放下载，零基础小白入门首选！
很多刚开始接触Python的朋友都会有一个共同的烦恼,自学好无聊,好枯燥,不想坚持了--所以秉持着让学Python好玩有趣的态度,给大家推荐一本最新出炉的"漫画书"<看漫画学 ...
- python入门学习[看漫画学Python：有趣、有料、好玩、好用读书笔记]
写在前面:本文中绝大多数图片来源于图书:看漫画学Python:有趣.有料.好玩.好用,本文仅供个人学习使用,如有侵权,请联系删除. 学习编程语言最好的方式就是多写,多写,多写!!!哪有什么快速掌握,能 ...
- 跟vczh看实例学编译原理——一：Tinymoe的设计哲学
自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...
- 跟vczh看实例学编译原理——零：序言
在<如何设计一门语言>里面,我讲了一些语言方面的东西,还有痛快的喷了一些XX粉什么的.不过单纯讲这个也是很无聊的,所以我开了这个<跟vczh看实例学编译原理>系列,意在科普一些 ...
最新文章
- 深度学习中的贝叶斯统计简介
- Signal和slot的声明和连接
- 什么是整型?Python整型详细介绍
- 【SQL提数】case..when..then..end的使用
- python头像变二维码_Python 图像处理库 pillow，提取支付宝和微信支付图片二维码...
- CTO案头必备｜AI技术产业落地的42章经
- 【Luogu3383】【模板】线性筛素数
- codeforces 1060 A
- 初中三年级计算机课程教案,三年级信息技术教案下
- 在Scala IDEA for Eclipse或IDEA里程序编译实现与在Spark Shell下的对比（其实就是那么一回事）...
- 54. mysqli 扩展库
- ENVI入门系列教程---一、数据预处理---8.图像裁剪
- Objective-C 日记② 关于self用法
- appium for java教程_Java教程：Appium环境搭建
- 北京朝阳行政区划(朝阳区街道行政区划) 用于shp数据转为geojson格式作为ECharts地图
- knockoutjs总结
- 普通二本毕业八年，京东就职两年、百度三年，分享大厂心得
- [JS]Tue Feb 01 2022 00:00:00 GMT+0800 (中国标准时间) 日期格式化
- *jqwidgets jqxgrid 使用心得 jqxgrid教程 jqxgrid+SpringMVC（初级） 集成JAVA SSM
- 更换kindle书籍的字体