300字范文 > HTML网页作业个人网站源码div+css布局

HTML网页作业个人网站源码div+css布局

时间：2019-05-31 09:25:55

个人网站使用div+css布局，网站一共四个页面。页面中的banner使用swiper框架制作动画切换，注册页面使用js验证用户信息输入是否正确。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="css/blue.css" rel="stylesheet" type="text/css" id="cssfile" /><link href="css/swiper-bundle.min.css" rel="stylesheet" type="text/css" /></head><body><div class="nav"><div class="wrapper"><div class="logo"><a href="#"><img src="./images/LOGO.png" height="45"></a></div><ul><li><a href="index.html">首页</a></li><li><a href="news.html">个人简介</a><dl style="display: none;"><dd><a href="#">个人经历 </a></dd><dd><a href="#">参加活动 </a></dd></dl></li><li><a href="hot.html">给我留言</a></li><li><a href="res.html">注册</a></li></ul><div class="searchBox"><form name="head_search" id="searchFrom" method="GET"><input type="text" placeholder="搜索个人网站" class="searchInput"><input type="button" value="" class="searchBtn"></form></div></div></div><div class="menuBox"><div class=""><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"> <img src="./images/banner1.png"> </div><div class="swiper-slide"> <img src="./images/banner2.png"> </div></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div></div><div class="about"><div class="wrapper"><div class="menutitle"><h3>个人介绍</h3></div><dl><dt><img src="./images/about.png" alt=""></dt><dd><h3>张爱玲</h3><p>张爱玲北京大学老家山东</p><p>夏洛克.福尔摩斯抚摸着他已经被截肢的左手，那里从手腕以下空荡荡的，截面已经愈合成了凸起的肉球。那是上次拆弹时的牺牲品。在阴冷的天气里，夏洛克有时会感受到从手臂传上来的疼痛，仿佛那只手还在似的。詹姆斯.莫里亚蒂，那个数学教授，几乎在所有领域都成为了天才的人，已经让夏洛克尝到了十数次的苦果。毫无疑问，他是夏洛克一生中最强大的对手。</p><p>托上次行动的福，夏洛克终于明白了莫里亚蒂如此强大的秘密。在那次行动中，他看到莫里亚蒂因为强烈的刺激而分裂出了新的人格。毫无疑问，他是个精神分裂。而他每次分裂出新的人格时，他也成为了在那个身份所属职业的天才。上次美蒂奇艺术馆的爆炸案中，夏洛克看到莫里亚蒂的面容逐渐扭曲，音调越来越高，然后发出了不男不女的怪声。之后，他癫狂着冲向了一幅古斯塔夫·克里姆特的女人画作，探起脚尖亲吻肖像中的女人，浑然不顾自己身上的血液弄脏了这幅上亿元的画作。然后，他用女声向着空旷的大厅喊道“多么炽热的一吻！</p></dd></dl></div></div><div class="wrapper"><div class="menutitle"><h3>我的文章</h3></div><div class="zixun"><div class="list clearfix"><div class="pic"><a href="#"><img src="./images/zi.png" style="display: inline;"></a></div><div class="detail"><a href="#"><h5>进击的巨人</h5></a><p>多年以后，尤弥尔站在被巨人践踏为平地的大地上时，准会想起几十年前和师父在山巅学宫的那个下午。清澈的阳光穿过纯白的大理石柱子，风中的细小灰尘在浮光的照射下，仿佛微小的精灵在飞舞。</p></div></div><div class="list clearfix"><div class="pic"><a href="#"><img src="./images/zi2.png" style="display: inline;"></a></div><div class="detail"><a href="#"><h5>神探夏洛克——最后的誓言</h5></a><p> 夏洛克.福尔摩斯抚摸着他已经被截肢的左手，那里从手腕以下空荡荡的，截面已经愈合成了凸起的肉球。那是上次拆弹时的牺牲品。在阴冷的天气里，夏洛克有时会感受到从手臂传上来的疼痛，仿佛那只手还在似的</p></div></div><div class="list clearfix"><div class="pic"><a href="#"><img src="./images/zi3.png" style="display: inline;"></a></div><div class="detail"><a href="#"><h5>西塞罗</h5></a><p>“我哪里有什么远大的理想，我所做的一切，都只是命运在推着我走罢了。”西塞罗美地奇后来回忆自己的一生时，这样说道。“我的导师啊，你哪里有什么罪。有罪的，是这些愚昧无知的暴民，和让他们肆意生长的世界啊。”浮士德对即将上火刑架的乔尔丹诺-布鲁诺说道。</p></div></div></div></div><div class="desinbox"><div class="wrapper"><div class="menutitle"><h3>我的照片</h3></div><ul><li><img src="./images/timg.png" alt=""><h3>参加演讲比赛</h3></li><li><img src="./images/timg1.png" alt=""><h3>成都的鲤鱼旗</h3></li><li><img src="./images/timg2.png" alt=""><h3> 魔鬼城克拉玛依</h3></li><li><img src="./images/timg3.png" alt=""><h3>去甘肃玩 </h3></li><li><img src="./images/timg4.png" alt=""><h3>月牙湖</h3></li><li><img src="./images/timg5.png" alt=""><h3>去游乐场</h3></li></ul></div></div><div class="foot"><div class="footer"><div class="footleft"><h5>个人网站</h5><p>最新个人网站、实时发布</p></div><div class="footleft"><h5>联系我们</h5><p>邮箱：123456@</p><p>Q Q：123456789</p></div></div></div><div class="footerson">版权信息 © XXX</div><div class="change"><input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" /><input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" /></div></body></html><script src="./js/jquery.min.js"> </script><script src="./js/swiper-bundle.min.js"></script><script src="./js/js.js"> </script><script>var swiper = new Swiper('.swiper-container', {slidesPerView: 1,spaceBetween: 30,loop: true,pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});</script>

<!DOCTYpE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="css/blue.css" rel="stylesheet" type="text/css" id="cssfile" /><link href="css/swiper.min.css" rel="stylesheet" type="text/css" /></head><body><div class="nav"><div class="wrapper"><div class="logo"><a href="#"><img src="./images/LOGO.png" height="45"></a></div><ul><li><a href="index.html">首页</a></li><li><a href="news.html">个人简介</a><dl style="display: none;"><dd><a href="#">个人经历 </a></dd><dd><a href="#">参加活动 </a></dd></dl></li><li><a href="hot.html">给我留言</a></li><li><a href="res.html">注册</a></li></ul><div class="searchBox"><form name="head_search" id="searchFrom" method="GET"><input type="text" placeholder="搜索个人网站" class="searchInput"><input type="button" value="" class="searchBtn"></form></div></div></div><div class="wrapper "><div class="infobox "><div class=" "><div class="info"><dl><dt> <img src="./images/ziji.png" height="280"></dt><dd><h3>张爱玲</h3><h4>热情随和，活波开朗，具有进取精神和团队精神，有较强的动手本事。良好协调沟通本事，适应力强，反应快、进取、灵活，爱创新!提高自我，适应工作的需要。所以我期望找一份与自身知识结构相关的工作，具有必须的社会交往本事，具有优秀的组织和协调本事。在学习中，我注重理论与实践的结合，己具备了相当的实践操作本事。熟练操作计算机办公软件。很强的事业心和职责感使我能够应对任何困难和挑战。</h4><ul><li>中文名：张爱玲</li><li>国籍：中国</li><li>民族：汉族</li><li>出生地：北京</li><li>出生日期：7月1日</li><li>星座：巨蟹座</li><li>血型：AB型</li><li>身高：171 cm</li><li>体重：70 kg</li><li>毕业院校b:北京</li></ul></dd></dl><div class="notemenu" style="margin-bottom:10px;"><div class="titlemenus"><ul><li class="cur">参加活动</li></ul></div></div><div class="infolist"><p>第三十届创新杯：基于数据挖掘的学习注意力监测系统设计与实现 </p><p>大学生创业计划项目：基于卷积神经网络的人脸识别与表情分析系统设计与实现——以校园安全为例</p><p>全国大学生创新创业挑战赛：“金领工厂”高校人才培养一体化基地——高校高质量实习就业领航者</p></div></div><div class="notemenu" style="margin-bottom:10px;"><div class="titlemenu"><ul><li class="cur">生活照片</li><li>活动照片</li></ul></div></div><div class="infolist"><div class="picbox"><div class="piclist"><ul><li><img src="./images/ge1.jpg" alt=""></li><li><img src="./images/ge2.jpg" alt=""></li><li><img src="./images/ge3.jpg" alt=""></li><li><img src="./images/ge4.jpg" alt=""></li><li><img src="./images/ge5.jpg" alt=""></li></ul><ul style="display: none;"> <li><img src="./images/ge7.jpg" alt=""></li><li><img src="./images/ge8.jpg" alt=""></li><li><img src="./images/ge9.jpg" alt=""></li><li><img src="./images/ge10.jpg" alt=""></li><li><img src="./images/ge11.jpg" alt=""></li></ul></div></div></div></div></div></div><div class="foot"><div class="footer"><div class="footleft"><h5>个人网站</h5><p>最新个人网站、实时发布</p></div><div class="footleft"><h5>联系我们</h5><p>邮箱：123456@</p><p>Q Q：123456</p></div></div></div><div class="footerson">版权信息 © XXX</div><div class="change"><input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" /><input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" /></div><script src="./js/jquery.min.js"> </script><script src="./js/js.js"> </script></body></html>

网站源码地址：HTML静态个人网站主题div+css布局网页作业-HTML静态网站-网站作业之家-大学生网页作业，网站毕业设计，课程设计，PHP作业、html网页作业原创定制代做，网站成品，Dreamweaver网页制作

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。