🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于、两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
一、👨🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、🔧 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货一、👨🎓网站题目
🧑个人网页设计、🙋♂️个人简历制作、👨💼简单静态HTML个人网页作品、👨🏭个人介绍网站模板 、等网站的设计与制作。
二、✍️网站描述
⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。
🏅 一套A+的网页应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有5-10个页面组成。页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有JS特效，如定时切换和手动切换图片轮播。页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。页面清爽、美观、大方，不雷同。 。不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、🌐网站演示
五、🔧 网站代码
🧱HTML结构代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>首页</title><link href="css/style.css" rel="stylesheet" type="text/css"></head><body><div class="web"><div class="top"><div class="topbg"><div class="topner"><div class="logo"><img src="images/logo.png" /></div><div class="nav"><ul><li><a href="index.html"><h1>首页</h1><p>INDEX</p></a></li><li><a href="rizhi.html"><h1>日志</h1><p>JOURNAL</p></a></li><li><a href="zuopin.html"><h1>作品</h1><p>WORKS</p></a></li><li><a href="jianjie.html"><h1>个人简介</h1><p>INTRO</p></a></li><li><a href="lianjie.html"><h1>友情链接</h1><p>LINK</p></a></li></ul></div></div></div></div><!-----------main---------------><div class="main"><div class="sbox1"><div class="title"><h1>个人简介</h1><div class="xian"></div><p>PERSONAL PROFILE</p></div><div class="ner"><div class="left"><div class="lef"><h1>德玛西</h1><h2>视觉传达设计专业学生</h2><p>擅长:摄影、平面设计、</p><p> 手绘、UI设计......</p><div class="more"><a href="#">查看更多</a></div></div><div class="rig"><img src="images/simg2.jpg" /></div></div><div class="right"><h1>关于我的</h1><div class="wenz">我是一个西南财经大学天府学院艺术设计学院的大四学生，所学的专业是视觉传达设计，喜欢摄影、手绘和UI设计......</div><div class="tubiao"><img src="images/img1.png" /><img src="images/img2.png" /><img src="images/img3.png" /><img src="images/img4.png" /><img src="images/img5.png" /></div></div></div></div><div class="sbox2"><div class="title"><h1>技术交流</h1><div class="xian"></div><p>TECHNICAL EXCHANGE</p></div><div class="ner"><div class="left"><img src="images/simg3.jpg" /><h1>如何做好网页设计</h1><h2>-10-16 发布</h2><p>页面整体和谐了，给浏览者是一个畅快舒服的感觉。要有整体大局的眼光，不去拘泥于局部或细小的地方。根据色彩对人们心理的影响，合理运用好文字的色彩......</p></div><div class="right"><div class="bx1"><img src="images/simg4.jpg" />网页设计 —— 专业网页设计及三合一网站设计</div><div class="bx1"><img src="images/simg4.jpg" /></div><div class="bx1"></div><div class="bx1"></div><div class="bx1"><img src="images/simg4.jpg" />调色师必须了解的知识 —— 曝光度、对比度、高光、阴影、白色与黑色色阶</div></div></div></div><div class="sbox3"><div class="title"><h1>我的日志</h1><div class="xian"></div><p>MY BLOGS</p></div><div class="ner"><div class="left"><img src="images/simg5.jpg" /></div><div class="right"><div class="bx"><img src="images/simg6.jpg" /><div class="tit">我的广东之旅</div></div><div class="bx"><img src="images/simg7.jpg" /><div class="tit">第一站的燃手食堂</div></div><div class="bx"><img src="images/simg8.jpg" /><div class="tit">魅力广州</div></div></div></div></div><div class="sbox4"><div class="title"><a href="dongtai.html"><h1>动态</h1><div class="xian"></div><p>MY ZONE</p></a></div><div class="ner"><div class="left"><a href="bpg.html"><img src="images/simg9.jpg" /><h1>毕棚沟之旅</h1><p>第一次去毕棚沟，也第一次看到这么多雪！有点意思，哈哈哈...</p><div class="dibu">四川 . 阿坝藏族羌族自治州理县<span>.1.28</span></div></a></div><div class="left right"><img src="images/simg10.jpg" /><h1>我的广东采风 —— 第2天</h1><p>虽然走了很远才到，但是今天晚上好吃的潮汕牛肉火锅染我觉得不存在了</p><div class="dibu">广东 . 广州越秀区<span>.11.9</span></div></div></div></div><div class="sbox5"><div class="title"><h1>我的作品</h1><div class="xian"></div><p>WORKS</p></div><div class="ner"><div class=" bx1"><img src="images/simg11.jpg" /><div class="riqi">-6-16</div><h1>展示与陈设 李宁服装店</h1><p>查看 42 | 喜欢 12 </p><P>5位创作人 建模/设计</P></div><div class=" bx2"><img src="images/simg12.jpg" /><div class="riqi">-11-20 发布</div><h1>深圳湾之旅</h1><p>查看 35 | 喜欢 5 </p><P>德玛西 摄影/后期</P></div><div class=" bx1 bx3"><img src="images/simg13.jpg" /><div class="riqi">-6-20</div><h1>带珍珠耳环的兔子</h1><p>播放 308 | 喜欢 46 </p><P>德玛西 绘制</P></div></div><div class="gengd"><a href="#">查看更多</a></div></div></div><!-----------foot---------------><div class="foot"><div class="footer"><img src="images/logo2.png" /><a href="index.html"> 首页 |</a><a href="jianjie.html">个人中心 |</a><a href="rizhi.html">我的日志 |</a><a href="zuopin.html">我的作品 |</a><a href="lianjie.html">友情链接 |</a></div></div> </div></body></html>
💒CSS样式代码
@charset "utf-8";/* CSS Document */body{margin:0 auto; font-size:12px; font-family: "微软雅黑",arial; line-height:22px; background:url(../images/bg.gif); }div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{height:auto; margin:0;; padding:0; vertical-align:middle ;}li{list-style:none;}a{text-decoration:none; color:#000;}.ul{list-style:none;}img{border:0; margin:0; padding:0;}.web{width:1920px;height: 100%; margin:0 auto;background-color:#ffffff;}/* shouye */.top{width:1920px; height:681px; background:url(../images/simg1.jpg) no-repeat; margin-bottom:25px; }.topbg{height:83px; width:1920px; background:rgba(0,0,0,0.5);}.topner{width:1201px; height:83px; margin:0 auto; }.logo{width:362px; height:28px; float:left; margin-left:12px; margin-top:24px;}.nav{height:63px; width:650px; float:right; padding-top:20px;}.nav ul{}.nav ul li{margin:0px 30px; float:left; text-align:center;}.nav ul li a{color:#FFF;}.nav ul li a:hover{color:#ffbc22;}.nav ul li h1{font-size:20px; font-weight:normal; font-size:20px;}.nav ul li p{height:20px; line-height:20px; font-size:11px;}.main{width:1201px; height:auto; overflow:hidden; margin:0 auto; }.title{height:100px; text-align:center; margin-bottom:35px;}.title h1{line-height:60px; font-size:30px; font-weight:normal;}.title .xian{width:35px; height:2px; border-bottom:#ffbc22 1px solid; margin:0 auto; }.title p{height:40px; line-height:40px; text-align:center; color:#c6c6c6; font-size:18px;}.sbox1{height:400px;}.sbox1 .ner{width:100%; height:260px; }.sbox1 .left{width: 427px;height: 203px;float: left;background:#f4f4f4;box-shadow: 2px 2px 15px 5px #d1d0d0;margin-left: 20px;}.sbox1 .left .lef{width:224px; height:203px; float:left; text-align:center;}.sbox1 .left .lef h1{width:100px;color:#434d53; height:60px; line-height:60px; font-size:28px; border-bottom:#de6262 1px solid; text-align:center; margin:0 auto; margin-bottom:10px;}.sbox1 .left .lef h2{height:35px; line-height:35px; color:#434d53; font-size:16px; font-weight:normal; margin-bottom:5px;}.sbox1 .left .lef p{line-height:23px; color:#434d53; font-size:16px; }.sbox1 .left .lef .more{height:25px; line-height:25px; width:60px; margin:0 auto; margin-top:15px; text-align:center;}.sbox1 .left .lef .more a{color:#434d53; font-size:12px;}.sbox1 .left .rig{float:left; width:202px;}.sbox1 .right{width: 427px;height: 203px;float: right;background:#f4f4f4;box-shadow: 2px 2px 15px 5px #d1d0d0;margin-right: 20px;}.sbox1 .right h1{color:#434d53; height:60px; line-height:60px; font-size:28px; text-align:center; margin:0 auto; margin-bottom:10px;}.sbox1 .right .wenz{width:325px; height:75px; color:#54585a; font-size:16px; line-height:20px; margin:0 auto; margin-bottom:20px;}.sbox1 .right .tubiao{height:35px; text-align:center;}.sbox1 .right .tubiao img{margin-right:8px;}.sbox2{height:415px;}.sbox2 .ner{height:275px;}.sbox2 .ner .left{width:580px; height:275px; margin-left:15px; float:left;}.sbox2 .ner .left img{float:left;box-shadow: 2px 2px 15px 5px #d1d0d0; margin-right:20px; margin-top:37px;}.sbox2 .ner .left h1{line-height:40px; height:40px; color:#23121c; font-size:20px; font-weight:normal; margin-top:70px;}.sbox2 .ner .left h2{height:35px; line-height:35px; font-size:14px; color:#6b6969;font-weight:normal;}.sbox2 .ner .left p{color:#a1a1a1; line-height:30px;font-size:14px;}.sbox2 .ner .right{width:585px; height:235px; padding-top:45px; float:right;}.sbox2 .ner .right .bx1{height:40px; line-height:40px; font-size:16px; color:#23121c;}.sbox2 .ner .right .bx1 img{margin-right:25px; margin-top:5px;}.sbox3{height:742px;}.sbox3 .ner{height:587px; padding-top:30px;}.sbox3 .ner .left{width: 838px;height: 525px;float: left;background:#FFF;box-shadow: 2px 2px 15px 5px #d1d0d0;padding: 15px;margin-left: 15px;}.sbox3 .ner .right{width:299px; height:565px; float:right;}.sbox3 .ner .right .bx{width:299px; height:174px; margin-bottom:15px; position:relative;}.sbox3 .ner .right .bx .tit{position: absolute;background:rgba(0,0,0,0.3);height: 45px;line-height: 45px;font-size: 18px;color:#FFF;padding-left: 15px;bottom: 0px;width: 100%;}.sbox4{height:640px;}.sbox4 .ner{height:457px; padding-top:30px;}.sbox4 .ner .left{width:294px; height:422px; float:left; margin-left:150px; background:#f7f7f7;box-shadow: 2px 2px 15px 5px #d1d0d0;}.sbox4 .ner .left h1{height:60px; line-height:60px; color:#1e2126; font-size:18px; padding-left:20px;}.sbox4 .ner .left p{line-height:25px; color:#787878; font-size:16px; padding:0px 18px; margin-bottom:20px;}.dibu{color:#aaaaaa; height:25px; line-height:25px; font-size:12px; padding:0px 20px;}.dibu span{float:right;}.sbox4 .ner .right{float:left; margin-left:297px !important;}.sbox5{height:822px;}.sbox5 .ner{height:548px; }.sbox5 .ner .bx1{width:315px; height:314px; margin-top:140px;box-shadow: 2px 2px 15px 5px #d1d0d0; float:left; margin-left:15px; background:#FFF; position:relative; text-align:center;}.sbox5 .ner .bx1 .riqi{height:27px; line-height:27px;background: rgba(0,0,0,0.3); padding-left:30px; position:absolute; top:179px;}.sbox5 .ner .bx1 img{margin-bottom:10px;}.sbox5 .ner .bx1 h1{height:30px; line-height:30px; color:#031333;font-weight:normal; font-size:13px;}.sbox5 .ner .bx1 p{color:#a0a4a9; height:25px; line-height:25px; font-size:10px; font-weight:normal;}.sbox5 .ner .bx2{width:500px; height:505px; margin-top:40px;box-shadow: 2px 2px 15px 5px #d1d0d0; float:left; margin-left:20px; background:#FFF; position:relative; text-align:center;}.sbox5 .ner .bx2 .riqi{height:40px; line-height:40px;background: rgba(0,0,0,0.3); padding-left:30px; position:absolute; top:179px;}.sbox5 .ner .bx2 img{margin-bottom:15px;}.sbox5 .ner .bx2 h1{height:40px; line-height:40px; color:#031333;font-weight:normal; font-size:20px;}.sbox5 .ner .bx2 p{color:#a0a4a9; height:25px; line-height:25px; font-size:16px; font-weight:normal;}.sbox5 .ner .bx3{float:right !important; margin-right:15px;}.gengd{height:45px; line-height:45px; text-align:center; margin-top:25px;}.gengd a{color:#a6aaaf; font-size:24px;}.foot{height:216px; width:100%; background:#151519;}.footer{width:1201px; height:45px; margin:0 auto; padding-top:90px; line-height:45px;color:#42424b; font-size:24px;}.footer img{margin-right:80px; float:left;margin-top: 25px;}.footer a{float:left; padding:10px; float:left; color:#42424b; font-size:24px;}/* rz */.rztop{width:1920px; height:681px; background:url(../images/rz1.jpg) no-repeat; margin-bottom:25px; }.rzbox1{height:560px; padding-top:70px;}.rzbox1 .bx{width:360px; height:212px; float:left; margin-bottom:70px; position:relative;}.rzbox1 .bx img{width:360px; height:212px;}.rzbox1 .bx .tit {width:344px;position: absolute;background: rgba(0,0,0,0.3);height: 45px;line-height: 45px;font-size: 18px;color:#FFF;padding-left: 15px;bottom: 0px;}.rzbox1 .jage{width:60px; height:280px; float:left;}.rzm90{margin-bottom:90px;}/* zp */.zp{width:1920px;height:2220px; margin:0 auto; background:url(../images/zpbg.jpg) no-repeat;}.zptit{height:100px; line-height:100px; padding-top:90px; text-align:center; font-size:60px; color:#FFF; margin-bottom:153px;}.zpji{width:1200px; height:1380px; background:#FFF; margin:0 auto;}.zpji h1{height:57px; line-height:57px; padding-top:58px; text-align:center; font-size:30px; font-weight:normal; margin-bottom:112px;}.zpji .box1{width:1130px; height:430px; margin:0 auto; margin-bottom:170px;}.zpji .box1 .bx1{width:485px; height:430px; float:left; margin-right:160px;}.zpji .box1 .bx1 h2{height:80px; line-height:80px; text-align:center; font-size:24px;font-weight:normal;}.zpji .box1 .bx1 h3{height:45px; line-height:45px; text-align:center;font-weight:normal;font-size:24px;}.zpji .box1 .bx1 h3 a{color:#a6aaaf;}.zpji .box1 .bx2{width:485px; height:430px; float:left; }.zpji .box1 .bx2 h2{height:80px; line-height:80px; text-align:center; font-size:24px; font-weight:normal;}.zpji .box1 .bx2 h3{height:45px; line-height:45px; text-align:center;font-weight:normal;font-size:24px;}.zpji .box1 .bx2 h3 a{color:#a6aaaf;}/* jianjie */.jianjie{width:1920px; height:681px; background:url(../images/jianjie.jpg) no-repeat; margin-bottom:25px; margin-bottom:107px; }.jjner{width:1200px; height:1015px; margin:0 auto; background:#f0e5de; margin-bottom:150px;}.jjner img{margin-bottom:66px;}.jjner h1{height:60px; line-height:60px; font-weight:normal; text-align:center; font-size:30px; margin-bottom:80px;}.jjner p{width:820px; margin:0 auto; margin-bottom:30px; line-height:30px; font-size:18px;}/* lianjie */.lianjie{width:1920px; height:681px; background:url(../images/lianjie.jpg) no-repeat; margin-bottom:25px; margin-bottom:50px; }.ljbox1{height:574px; margin-bottom:106px;}.ljbox1 .ner{height:435px;}.ljbox1 .ner img{float:left; margin:35px 165px 28px 17px;box-shadow: 2px 2px 15px 5px #d1d0d0;}.ljbox1 .ner h1{height:50px; line-height:50px; padding-top:120px; margin-bottom:27px; font-size:24px; color:#23121c; font-weight:normal;}.ljbox1 .ner h2{height:35px; line-height:35px; color:#6b6969; font-size:18px;font-weight:normal;}.ljbox1 .ner p{line-height:60px; font-size:18px; color:#a1a1a1;}.ljbox2{height:247px; padding:0px 20px; }.ljbox2 img{margin-right:25px; }.ljbox2 p{margin-bottom:27px; line-height:30px; font-size:18px;}.ljbox3{height:840px; }.ljbox3 .ner{height:670px;}.ljbox3 .ner .bx{width:380px; height:225px; margin:49px 110px; float:left;}/* bpg */.bpg{width:1920px; height:681px; background:url(../images/bpg.jpg) no-repeat; margin-bottom:25px; margin-bottom:115px; }.bpgneir{width:1200px; height:auto; overflow:hidden; padding-bottom:147px;}.bpgneir img{display:block; margin:0 auto; margin-bottom:15px;}/* dongtai */.dongtai{width:1920px; height:681px; background:url(../images/dongtai.jpg) no-repeat; margin-bottom:134px; }.dtner{height:860px; width:1250px; margin:0 auto;}.dtner .bx{width:375px; height:760px; background:#f7f7f7; float:left; margin:0px 20px; margin-bottom:40px;}.dtner .bx img{margin-bottom:20px;}.dtner .bx h1{font-weight:normal; height:50px; line-height:50px; font-size:26px; padding:0px 35px; margin-bottom:10px;}.dtner .bx .xingq{height:220px;padding:0px 35px; color:#787878; font-size:18px; line-height:30px; }.dtner .bx h2{height:30px; line-height:30px; font-size:18px; color:#aaaaaa;font-weight:normal;padding:0px 35px; }/* ui */.ui{width:1920px; height:681px; background:url(../images/ui.jpg) no-repeat; margin-bottom:153px; }.ubox1{height:574px; margin-bottom:205px;}.ubox1 img{float:55px; margin:0px 55px;}.ubox2{height:879px; margin-bottom:154px;}.ubox2 .bx{width:316px; float:left; margin:0px 35px;}.ubox2 .bx img{display:block; margin:0 auto; margin-bottom:60px;}.ubox2 .bx h1{height:55px; line-height:55px; font-size:30px; font-weight:normal;}.ubox2 .bx p{line-height:30px; font-size:20px;}
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
