🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于、两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
一、👨🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货一、👨🎓网站题目
👩🔬个人博客网站、👨🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。
二、✍️网站描述
🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有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><html><head><meta charset="utf-8"><title>杨青青个人博客</title><link href="css/base.css" rel="stylesheet"><meta name="keywords" content="" /><meta name="description" content="" /><script src="js/jquery-1.8.3.min.js" ></script><script src="js/main.js"></script><!-- banner--><link href="css/swiper.min.css" rel="stylesheet"><script src="js/swiper.min.js"></script><script src="js/banner.js"></script></head><body><header id="header"><div class="navbox"><h2 id="mnavh"><span class="navicon"></span></h2><div class="logo"><a href="" alt="杨青青个人博客" title="杨青青个人博客">杨青青个人博客</a> | <a href="#" alt="排名技术建站" title="排名技术建站"><font class="font16">排名技术建站</font></a></div><nav><ul id="starlist"><li><a href="" title="首页">网站首页</a></li><li><a href="fengmian.html">原创模板</a></li><li class="menu"><a href="fengmian.html">网站制作</a><ul class="sub"><li><a href="fengmian.html">前端设计</a></li><li><a href="fengmian.html">帝国cms</a></li><li><a href="fengmian.html">网站优化</a></li></ul><span></span></li><li class="menu"><a href="fengmian.html">我要学建站</a><ul class="sub"><li><a href="fengmian.html">前端设计</a></li><li><a href="fengmian.html">帝国cms</a></li><li><a href="fengmian.html">网站优化</a></li></ul><span></span></li><li><a href="fengmian.html" title="个人博客">青青博客</a></li><li><a href="fengmian.html" title="站长圈子">站长圈子</a></li></ul></nav></div></header><div class="sou"><div class="searchbox"><ul id="tab"><li class="tab-current">文章</li><li class="">视频</li></ul><div id="tab-content"><section class="tab-box" style="display: block;"><div class="search"><form action="e/search/index.php" method="post" name="searchform" id="searchform"><input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text"><input name="show" value="title" type="hidden"><input name="tempid" value="2" type="hidden"><input name="tbname" value="news" type="hidden"><input type="hidden" name="classid" value="90"><input name="Submit" class="input_submit" value="搜索文章" type="submit"></form></div></section><section class="tab-box" style="display: none;"><div class="search sblue"><form action="e/search/index.php" method="post" name="searchform" id="searchform"><input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text"><input name="show" value="title" type="hidden"><input name="tempid" value="1" type="hidden"><input name="tbname" value="news" type="hidden"><input type="hidden" name="classid" value="91,77"><input name="Submit" class="input_submit" value="搜索视频" type="submit"></form></div></section></div></div></div><div class="box"><div class="side_left_news zuijin"><h2 class="h_title">最近更新</h2><section><a href="/" title="" target="_blank"><p>十条设计原则教你学会如何设计网页布局!</p></a><span>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户网站都使用的是是两列布局</span> </section><ul><li><a href="#" title="个人博客网站应该如何选购云服务器">个人博客网站应该如何选购云服务器</a></li><li><a href="#" title="SEO优化中选择关键词需要注意什么?">SEO优化中选择关键词需要注意什么?</a></li><li><a href="#" title="影响网站关键词相关性的四要素">影响网站关键词相关性的四要素</a></li><li><a href="#" title="网站快照不更新与哪些因素有关？">网站快照不更新与哪些因素有关?</a></li><li><a href="#" title="如何让蜘蛛来爬取自己网站呢?">如何让蜘蛛来爬取自己网站呢?</a></li><li><a href="#" title="网站SEO优化中网站URL应该怎样优化?">网站SEO优化中网站URL应该怎样优化呢？</a></li><li><a href="#" title="网站SEO优化时如何提升蜘蛛抓取频率呢？">网站SEO优化时如何提升蜘蛛抓取频率呢？</a></li><li><a href="#" title="网站alt标签你用对了吗？">网站alt标签你用对了吗？</a></li></ul></div><div class="main_box"> <!-- banner begin--><div class="banner"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href="/love/1.html" target="_blank"><img src="images/2.jpg" alt="官方推荐"><span>官方推荐</span></a></div><div class="swiper-slide"><a href="/love/1.html" target="_blank"><img src="images/3.jpg" alt="独家"><span>独家</span></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div><!-- banner end--><div class="headlines"><h2><i>头条</i><a href="/web/seo/6.html" title="个人博客网站怎么选择模板程序？">个人博客网站怎么选择模板程序？ </a></h2><section><p>个人博客模板的选择，其实就是根据自己的爱好或模板的功能来选择。一般来说，选模板程序从这几方面入手，第一，要看网站的整体布局，是以图片为主，还是文字为主，第二，看示例网站的网站访问速度。第三，看示例网站的功能以及用户评价。</p></section><ul><li><a href="/web/qianduan/340.html" title="个人博客网站应该购买什么样的服务器？">个人博客网站应该购买什么样的服务器？</a> </li><li><a href="/web/qianduan/201.html" title="适合纯小白的个人博客搭建流程">适合纯小白的个人博客搭建流程</a> </li><li><a href="/web/qianduan/169.html" title="阿里云如何解析域名，搭建云服务器环境">阿里云如何解析域名，搭建云服务器环境</a> </li><li><a href="/web/qianduan/255.html" title="十条设计原则教你学会如何设计网页布局!">十条设计原则教你学会如何设计网页布局</a> </li><li><a href="/web/qianduan/127.html" title="我的个人博客之——阿里云空间选择">我的个人博客之——阿里云空间选择</a> </li><li><a href="web/qianduan/412.html" title="从摄影作品中获取网页颜色搭配技巧">从摄影作品中获取网页颜色搭配技巧</a></li></ul></div></div><div class="side_right_news tuijian"><h2 class="h_title">站长推荐</h2><ul><li><p><a href="/web/qianduan/102.html" title="网页前端设计快速入门技巧">网页前端设计快速入门技巧</a></p><span>一千个人眼中就有一千个哈姆雷特，每个人对网页前端的理解也是不一</span> </li><li><p><a href="/web/qianduan/411.html" title="鼠标悬停图片、文字css3效果">鼠标悬停图片、文字css3效果</a></p><span>其实这样的效果也很常见，但是我平时用到很少，在其他网站看到这样的 </span> </li><li><p><a href="/web/qianduan/412.html" title="从摄影作品中获取网页颜色搭配技巧">从摄影作品中获取网页颜色搭配技巧</a></p><span>作为一个优秀、专业的网页设计师，首先要了解各种颜色的象征，以及不 </span> </li><li><p><a href="/web/qianduan/401.html" title="给个人博客增加色彩元素提升网站用户体验">给个人博客增加色彩元素提升网站用户体验</a></p><span>第一眼看到杨青个人博客网站的时候，如果你喜欢，那肯定是右边的颜色 </span> </li><li><p><a href="/web/qianduan/57.html" title="你应该知道的HTML5五大特性">你应该知道的HTML5五大特性</a></p>/11.html" title="SEO优化中选择关键词需要注意什么?">SEO优化中选择关键词需要注意什么？</a></li><li><a href="/web/seo/12.html" title="网站死链的查找、危害、形成及处理方法">网站死链的查找、危害、形成及处理方法</a></li><li><a href="/web/seo/13.html" title="黑帽SEO优化方法解密">黑帽SEO优化方法解密</a></li></ul></div></div><div class="clear"></div><div class="links"><h2 class="h_title"><span><a href="/" target="_blank">[ 申请 ]</a></span>友情链接</h2><ul class="links_text"><li><a href="/" target="_blank">杨青青个人博客</a></li><li><a href="/" target="_blank">IP3Q模板网</a></li><li><a href="/" target="_blank">个人博客模板</a></li><li><a href="/" target="_blank">个人网站</a></li></ul></div></div><footer><div class="box"><ul class="footer_nav"><li><a href="" target="_blank">关于我们</a></li><li><a href="" target="_blank">服务条款</a></li><li><a href="" target="_blank">广告服务</a></li><li><a href="" target="_blank">联系我们</a></li><li><a href="" target="_blank">网站地图</a></li><li><a href="" target="_blank">免责声明</a></li><li><a href="" target="_blank">WAP</a></li></ul><p class="copyright">技术支持：<a href="/">天津青于蓝科技有限公司</a> <a href="/">XML网站地图</a> 备案号：<a href="http://www.beian./" target="_blank">津ICP备20005778号-1</a> <img src="images/ga.png" alt="公安备案号">公安备案号 1602000311</p></div></footer></body></html>
💒CSS样式代码
@charset "utf-8";/* CSS Document design by */* {margin: 0; padding: 0 }body {font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #000; background: url(../images/bg.png) no-repeat bottom right #f5f5f5; background-attachment: fixed; background-size: 300px; }img {border: 0; display: block }ul, li {list-style: none; }a {text-decoration: none; color: #2c3e50; }a:hover {color: #218af1; text-decoration: none; }.clear {width: 100%; clear: both; overflow: hidden }r: #fff; float: left; margin: 15px 5px 0 0; }a.inputsub-zc {height: 26px; line-height: 26px; padding: 0 10px; border-radius: 3px; background: #0ec1d3; border: 0; color: #fff; display: inline-block; margin: 15px 5px 0 0; }.sou #tab li {cursor: pointer; display: inline-block }.sou #tab-content section {display: none; }.sou #tab-content section:nth-child(1) {display: block }.sou #tab {width: 50%; margin: auto; clear: both; overflow: hidden; border: 0; }.sou #tab li {font-size: 15px; width: 54px; height: 28px; text-align: center; line-height: 28px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #666; padding: 0; margin-right: 2px }.sou #tab li.tab-current {background-color: #F4543C; color: #fff; }.sou #tab-content {margin: auto; overflow: hidden; width: 50%; }.sou #tab li:nth-child(2).tab-current {background: #00c1de; }.sou #tab li:after {display: none !important; }.h_title {font-size: 18px; margin: 20px; }.h_title span {float: right; font-size: 14px; font-weight: normal }.h_title span a {color: #777 }.side_left_news {width: 22%; margin-right: 2%; float: left; background: #fff; }.side_right_news {width: 24%; float: right; background: #fff; }.side_left_news ul, .side_right_news ul {padding: 0 20px 20px }.zuijin ul li {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 34px; position: relative; padding-left: 15px; }.zuijin ul li:before {content: ""; width: 4px; height: 4px; border-radius: 4px; position: absolute; left: 0; top: 16px; background: #a8d4d7; }.zuijin section {overflow: hidden; background: #f5f5f5; margin: 0 15px 15px; padding: 10px; }.zuijin section p {font-weight: bold; margin: 8px 0; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }.zuijin section span {overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; font-size: 14px; color: #777; }.zuijin section a {display: block; overflow: hidden; margin-bottom: 10px; }.tuijian ul li {margin-bottom: 15px; border-bottom: #ccc 1px dashed; padding-bottom: 15px; }.tuijian ul li:last-child {margin-bottom: 8px }.tuijian ul li p {font-weight: bold; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.tuijian ul li span {color: #777; line-height: 24px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }/*banner*/.main_box {width: 50%; float: left }.banner {width: 100%; height: 310px; margin-bottom: 20px; }.swiper-slide {position: relative }.swiper-slide span {position: absolute; right: 0; font-size: 12px; padding: 2px 5px 2px 10px; top: 10px; background: #0CF; color: #fff; border-radius: 3px derline; }.hnav a {display: block;margin-left: 10px;padding-left: 10px;float: left;position: relative;}.hnav a:after {position: relative; content: "/"; right: -10px; bottom: 0; color: #ccc }.hnav a:last-child::after {content: "" }.news_fm {background: #fff;padding: 20px;margin-bottom: 20px;}.news_fm h2 {font-size: 16px;margin-bottom: 10px;border-bottom: #f4f4f4 1px solid;padding-bottom: 11px;position: relative;}.news_fm h2:after{position:absolute;content:"";width: 61px;height: 2px;background:#000;bottom: -1px;left: 0; transition:all .5s}.news_fm h2 span {float: right; font-size: 14px; font-weight: normal; }.news_fm h2 span a {color: #777 }.news_fm h2 span a:hover {color:#000 }.news_fm ul li {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 32px;position: relative;padding-left: 15px;}.news_fm ul li:before {content: "";width: 4px;height: 4px;border-radius: 4px;position: absolute;left: 0;top: 14px;background: #a8d4d7;}.news_fm ul li span {float: right; color: #777; font-size: 12px; }.main_left .news_fm:last-child {margin-bottom: 0;}.side_right_box {width: 25%; float: right; background: #fff; }.side_right_box ul {padding: 0 20px 20px; }.list_news li:nth-child(10n) {margin-bottom: 26px;border-bottom: #eee 1px solid;padding-bottom: 25px;}/*epages*/.epages {text-align: center;color: #666;width: 100%;clear: both;padding-top: 10px;}.epages a {color: #666;margin: 0 5px 10px;padding: 5px 10px;background: #f6f6f6;display: inline-block;}.epages a:nth-child(1) {background: none; margin: 0; padding: 0 50px 0 0; position: relative }.epages a:nth-child(1):after {position: absolute; content: "篇文章"; right: 0; bottom: 0 }.epages a:nth-child(1):hover {background: none; color: #666 }.epages a:hover, .epages > b {color: #FFF; background: #f4543c; }.epages > b {padding: 5px 10px; }
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
