时间：2023-10-16 13:24:02 | 来源：网站运营
时间：2023-10-16 13:24:02 来源：网站运营
用DIV+CSS技术设计的个人网页（web前端期末网页制作课作业）HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
<!DOCTYPE html><html><head><link href="css/all.css" rel="stylesheet" media="all" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><div class="banner"><img src="images/src=http___inews.gtimg.com_newsapp_bt_0_13944000143_1000.jpg&refer=http___inews.gtimg.webp"></div><nav class="menu"> <ul class="center"> <li><a href="index.html">网站首页</a></li> <li><a href="juesejieshao.html">人物介绍</a></li> <li><a href="juqingjieshao.html">剧情介绍</a></li> <li><a href="jingcaitupian.html">欣赏</a></li> </ul></nav><div class="content"> <div class="mart"> <div class="bar">图片</div> <div class="pics scrollleft"> <ul> <li> <p><img src="images/u=1338899499,4277287823&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1501368123,2240755188&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1568150103,216963363&fm=253&fmt=auto&app=138&f=JPG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1673619099,3744613674&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=1966880367,2494314778&fm=253&fmt=auto&app=120&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=223462742,2583369638&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=2795321423,2235180093&fm=253&fmt=auto&app=120&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=3261703896,2491216324&fm=253&fmt=auto&app=138&f=JPEG.webp" width="300" height="180" /></p> </li> <li> <p><img src="images/u=3704132047,3084592864&fm=253&fmt=auto&app=120&f=JPEG.webp" width="300" height="180" /></p> </li> </ul> </div> <div class="clear"></div> <div class="bar">基本信息</div> <div class="pad"> <p>铠甲勇士，电视剧《铠甲勇士》系列中的召唤人合体铠甲的总称。一般指为保护地球合体铠甲与邪恶力量进行战斗的特摄英雄。</p> <p> </p> <div> 第一部中铠甲会根据召唤者的所有综合能力而发挥出不同的威力，所以召唤者越强，铠甲的威力便越强。每套光影铠甲都有着一定的能量储备，当光影铠甲能量耗尽时，胸口的信号灯便会闪烁起来。</div> <p>系列续作《BORUTO -火影新世代- 》2017年4月播出。 </p> <p><br> 第二部中铠甲来自阿瑞斯星球，会根据召唤者体内的，“精”、“气”、“神”所结合而成的”意能“而发挥铠甲的威力，意能越强则所发挥的铠甲威力就越强。意能不足时就会解除铠甲，当战斗意能累计到一定程度时便可进行地狱升级为激斗态。升级后的铠甲在武器，力量，速度，防御等会进行全方面增强，铠甲威力也会更加强大。召唤铠甲需要日月星三奇基因者，签铠甲契约。<br data-filtered="filtered"> <br data-filtered="filtered"> </p> </div> </div></div><footer class="end"> <p>网页底部</p></footer></body></html>@charset "utf-8";/* CSS Document */ul,li,p { padding: 0; margin: 0; list-style: none}a { text-decoration: none; color: #000}html{ background:#ccc}body { width: 1200px; margin: 0 auto; line-height:30px; font-size:16px; background-color: #fff;}.clear { clear: both}.menu li { list-style: none; width: 235px !important;}.logo { position: absolute; top: 50px; width: 250px; height: 100px; margin-left: 40px}.banner { position: relative; height: 530px;}.banner img { width: 100%; height: 100%;}.menu { width: 100%; text-align: center; float: left; background: #000; margin-bottom:20px;}.menu:after{ content:''; display:block; clear:both}.menu li a { color: #fff;padding: 15px 0px; display:block}.menu li { float: left; margin: 2px; background: #666; padding:0 30px; width: 136px}.menu li:hover{ background:#999966}.right { float: right; width: 660px; padding: 20px}.left { min-height: 300px; float: left; width: 260px; padding: 20px}.content { background: #fff; width: 100%; clear:both}.btn{ background:#996666; border:none; color:#fff}.end { clear: both; background: #333; color: #fff; padding: 30px 0; text-align: center;}.produce img { margin: 0 20px 20px 0}.produce { line-height: 30px}.pad { padding: 20px; display: block}.pics p { margin: 1px; text-align: center}.imglist { width: 840px; margin: 0 auto}.imglist li { float: left; width: 400px; margin: 10px; text-align: center}.scrollleft { margin: 0 30px}.scrollleft li { float: left; width:33.33%}.scrollleft li img{}.news li { padding: 5px;}.title { text-align: center; color: #F00; padding: 10px}.fl { float: left}.js div { width: 100%; clear: both; margin-bottom: 20px; float: left}.js div img { float: right; border:#000 dashed 1px; margin-right: 20px}.msg>div { padding: 10px}.vid{ float:right; width:300px; height:200px; padding:30px 0; line-height:50px; font-size:24px; margin-right:20px; color:#fff; float:right ; background:#000; text-align:center}.vid img{ width:100px; border-radius:100px; margin:0 auto }.bar { border: #000 solid 1px; margin: 20px; font-size:20px; clear: both; color: #000; font-weight: bold; padding: 5px}.pad-two { color: #000;}.pad-two p { color: #000;}.pad-two img { width: 250px;}.box1sa { width: 400px; margin: 0 auto;}.box1sa label { display: block; text-align: left; font-size: 16px; color: #000000;}.box1sa input{ width: 100%; height: 40px; margin: 30px 0;}.box1sa textarea{ width: 100%; height:200px; margin: 30px 0;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：设计,作业,技术
