Web Page Copy

来源：互联网发布：js给div input赋值编辑：程序博客网时间：2024/06/17 16:12

照着衡水二中官网(http://www.hsez.net/index.html)做的一个效果

本应该有连接的，这里我没做，不过做了点击变红色的效果

这个里面有一个比较难的就是图片和文字的对齐，我查了好多资料，最后是给文字和盒子加了一个块属性就可以了

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>@font-face {font-family: "宋体";src: url('Fontin Sans_F_45b.otf')format('opentype');font-weight: normal;}div {font-family: "宋体";}.windows {width: 500px;height: 350px;}.image {display: inline-block;width: 26px;height: 23px;margin-left: 40px;}.word {width: 100px;height: 23px;line-height: 23px;display: inline-block;}.frame {width: 300px;height: 23px;color: deepskyblue;display: inline-block;}.text {margin-left: 5px;margin-right: 5px;margin-bottom: 5px;}/*css去掉下划线*/a {text-decoration: none;}/*鼠标经过文本颜色：*/a:hover {color: red;}.total{margin-top: 20px;margin-left: -20px;margin-right: 5px;}</style></head><body><div class="windows"><div class="total"><div class="image"><img src="img/4.jpg" /></div><div class="word"><a>德育之窗</a></div><div class="frame"><img src="img/5.jpg" /></div></div><div class="text"><ul><li>[推荐]<a href="" target="_">我校教育处召开学生电视会议</a></li><li>[推荐]<a href="">操场上的趣味体育</a></li><li>[推荐]<a href="">我校教育处召开学生电视会议</a></li><li>[推荐]<a href="">高二实验部召开二调总结表彰大会暨入境高三动员</a></li><li>[推荐]<a href="">2017年成人礼视频</a></li><li>[推荐]<a href="">我校部分班主任赴西安学习归来话感想</a></li><li>[推荐]<a href="">我校举办第二届班主任“十佳读书达人”竞选活动</a></li><li>[推荐]<a href="">感谢信——向高二实验部全体教师致敬</a></li><li>[组图]<a href="">“气象日 学气象”——我校组织学生开展社会实</a></li><li>[推荐]<a href="">我校举行首届班主任“十佳读书达人”评选活动</a></li><li>[组图]<a href="">我校邀请全国优秀班主任王文英作报告</a></li><li>[组图]<a href="">我校举行第二届“魅力老班儿”评选活动</a></li></ul></div></div></body></html>

阅读全文

0 0