✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
一、👨🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货一、👨🎓网站题目
🍵茶文化网站、🏳️🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。
二、✍️网站描述
🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有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结构代码
<html> <head> <meta charset="utf-8"> <title>某某学校网站模板</title> <mvc:annotation-driven enable-matrix-variables="true"></mvc:annotation-driven> <context:component-scan base-package="com.th.action"></context:component-scan> <mvc:default-servlet-handler/> <link href="css/common.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <!--<script type="text/javascript" src="/jquery/1.9.0/jquery.js"></script>--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide2.js"></script> <script type="text/javascript"> $(function(){ $('#index-news-focus').owlCarousel({ items: 1, navigation: true, navigationText: ["上一个","下一个"], autoPlay: true, stopOnHover: true }).hover(function(){ $('.owl-buttons').show(); }, function(){ $('.owl-buttons').hide(); }); }); </script> <!--下拉动画--> <link rel="stylesheet" href="wow/animate.min.css"/> <script type="text/javascript" src="wow/wow.min.js"></script> <script> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; $(function(){ }); </script> <!--下拉动画--> </head> <body> <!--header S--> <header> <!--nav S--> <nav> <div class="top"> <div class="text"> <span class="l">欢迎光临某某学校网站！</span> <span class="r">咨询电话：010-0000000</span> </div> </div> <div class="hn-main"> <ul> <li> <a href="index.html">网站首页</a> <a href="about.html">关于我们</a> <a href="images-list.html">校园风采</a> <a href="about.html">校园文化</a> </li> <a href="index.html" class="logo"><span><img src="images/logo.png"></span></a> <li> <a href="title-list.html">新闻资讯</a> <a href="about.html">荣誉资质</a> <a href="about.html">招生介绍</a> <a href="contact.html">联系我们</a> </li> </ul> </div> </nav> <!--nav E--> <!---banner-content s---> <div class="index-banner-slide"> <div class="banner-content"> <div class="banner-slide"> <div class="banner-slide-circle hd"> <ul> <li class="on"></li> <li></li> <li></li> </ul> </div> <div class="banner-slide-image bd"> <ul> <li> <a href="#"> <img src="images/banner1.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="images/banner2.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="images/banner3.jpg" alt=""> </a> </li> </ul> </div> </div> <div class="banner-hidden"> <div class="banner-background-01"></div> <div class="banner-background-02"></div> </div> </div> </div> <!---banner-content e---> </header> <!--header E--> <!--index-news S--> <div class="index-news"> <div class="in-text"> <h2>站内资讯</h2> <a href=""><span>重磅!保定主城区中小学招生划片方案出台!你想知道的都在这!</span><em>06/18</em></a> <a href=""><span>布基纳法索总统出席中国援布100所小学项目开工仪式</span><em>06/18</em></a> <a href=""><span>大山深处的小学老师:39年来培养200位学生走出大山</span><em>06/18</em></a> <a href=""><span>北京小学入学不是难题,家门口多了不少好学校</span><em>06/18</em></a> <a href=""><span>家长注意!南昌22所小学招生学区范围公布!今年有变</span><em>06/18</em></a> <a href=""><span>今年九月将投入使用!金山小学新建项目已完成竣工验收</span><em>06/18</em></a> <a href=""><span>合肥包河区学区出炉 中小学招生方案发布(图)</span><em>06/18</em></a> <a href=""><span>重要提醒!杭州公办、民办小学录取时间表来了</span><em>06/18</em></a> </div> <div class="in-text"> <h2>相关新闻</h2> <a href=""><span>钱塘新区年度小学招生方案出炉,20余盘密集领证,新房供应开启火热</span><em>06/18</em></a> <a href=""><span>青岛新建学校再传好消息!36班双山小学年底开建</span><em>06/18</em></a> <a href=""><span>注意啦!金凤区中小学学区划片、入学办法来了!银川...</span><em>06/18</em></a> <a href=""><span>小学教室也去“抖”? 人民日报 怒了</span><em>06/18</em></a> <a href=""><span>明天开始,柯城区小学入学网上报名!这份操作手册不能不看~</span><em>06/18</em></a> <a href=""><span>社会学年会性别论坛 “回溯与前瞻</span><em>06/18</em></a> <a href=""><span>渭南高新小学开展“文明 从排队礼让开始 ”系列教育活动</span><em>06/18</em></a> <a href=""><span>中小学老师“阴盛阳衰”,校外培训机构却“阳盛阴衰”,原因为何</span><em>06/18</em></a> </div> <div class="in-flashbox"> <div class="focusNew_out flashlist"> <div class="f_out"> <span class="f_out_txt"><a href="/">忠庄镇忠庄小学乡村学校少年宫的孩子在学校练习口风琴</a></span> <a href="/"><img alt="忠庄镇忠庄小学乡村学校少年宫的孩子在学校练习口风琴" src="images/01.jpg" /></a> </div> <div class="f_out"> <span class="f_out_txt"><a href="/">内马尔飞了起来</a></span> <a href="/"><img alt="内马尔飞了起来" src="images/02.jpg" /></a> </div> <div class="f_out"> <span class="f_out_txt"><a href="/">曼朱基齐侧身凌空</a></span> <a href="/"><img alt="曼朱基齐侧身凌空" src="images/03.jpg" /></a> </div> </div> <div class="f_tabs"> <span class="hover">1</span> <span>2</span> <span>3</span> </div> </div> </div> <!--index-news E--> <!--index-show S--> <div class="index-show"> <div class="main"> <h2>校园风采</h2> <!--下面是向左滚动代码--> <div id="colee_left" style="overflow:hidden;width:1240px; margin:15px auto 0 auto;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="colee_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><a href="" class="colee-item"><img src="images/p1.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p2.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p3.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p4.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p5.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p6.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p7.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p8.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p2.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p1.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p5.jpg" width="260" height="240"></a></td> <td><a href="" class="colee-item"><img src="images/p8.jpg" width="260" height="240"></a></td> </tr> </table> </td> <td id="colee_left2" valign="top"></td> </tr> </table> </div> <script> //使用div时，请保证colee_left2与colee_left1是在同一行上. var speed=30;//速度数值越大速度越慢 var colee_left=document.getElementById("colee_left"); colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0){//offsetWidth 是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 } else{ colee_left.scrollLeft++; console.log("colee_left.scrollLeft"+colee_left.scrollLeft); } } var MyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function() {clearInterval(MyMar3)} colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script> <!--向左滚动代码结束--> <div class="class-list"> <a class="item"> <div class="pic"><img src="images/class1.jpg"></div> <h3>琴</h3> <p>人的文化修养是用琴、棋、书、画四方面的才能表现的，弹琴为四大才能之首。</p> </a> <a class="item"> <div class="pic"><img src="images/class2.jpg"></div> <h3>棋</h3> <p>人的文化修养是用琴、棋、书、画四方面的才能表现的，弹琴为四大才能之首。</p> </a> <a class="item"> <div class="pic"><img src="images/class3.jpg"></div> <h3>书</h3> <p>人的文化修养是用琴、棋、书、画四方面的才能表现的，弹琴为四大才能之首。</p> </a> <a class="item"> <div class="pic"><img src="images/class4.jpg"></div> <h3>画</h3> <p>人的文化修养是用琴、棋、书、画四方面的才能表现的，弹琴为四大才能之首。</p> </a> </div> </div> </div> <!--index-show E--> <div class="foot-tiao"></div> <footer> <div class="main"> <div class="f-logo"><img src="images/logo.png"></div> <div class="f-text"> <p>电话：010-000000</p> <p>地址：北京市朝阳区育慧东路101号</p> <p>版权所有 某某学院 Copyright © </p> </div> <div class="f-qrc"> <img src="images/qrc.jpg"> <img src="images/qrc.jpg"> </div> </div> </footer> <script src="js/ad.js" type="text/javascript"></script> <script type="text/javascript"> function ad_left(){ var html; html = '<div id="ad_left" style="position:absolute;width:130px;height:300px;z-index:10001;"><a style="position:absolute;top:-25px;left:10px;font-size:14px;color:#333;" href="javascript:void(0);" οnclick="document.getElementById(\'ad_left\').style.display=\'none\'">关闭</a><a href="http://www.jq-"><img src="images/ad.jpg" width="130" height="300" /></a></div>'; dom.insertHtml(html);position.floatLeftCenter('ad_left'); } function ad_right(){ var html; html = '<div id="ad_right" style="position:absolute;width:130px;height:300px;z-index:10001;"><a style="position:absolute;top:-25px;right:10px;font-size:14px;color:#333;" href="javascript:void(0);" οnclick="document.getElementById(\'ad_right\').style.display=\'none\'">关闭</a><a href="http://www.jq-"><img src="images/ad.jpg" width="130" height="300" /></a></div>'; dom.insertHtml(html);position.floatRightCenter('ad_right'); } myEvent.add(window,'load',ad_left); myEvent.add(window,'load',ad_right); </script> <script type="text/javascript"> jQuery(".banner-slide").slide({mainCell:".bd ul",autoPlay:true,delayTime:2000}); </script> <script type="text/javascript" src="js/bigpicroll.js"></script> <script type="text/javascript"> FeatureList(".in-flashbox",{ "onclass":"hover", "offclass":"", "pause_on_act":"click", "interval":5000, "speed":5 }); </script> </body> </html><!doctype html>
💒CSS样式代码
width:100%; padding-top:512px; } #dituContent{width:100%;height:500px;} header{ width:100%; height:auto; position:relative; } header nav{ width:100%; height:200px; position:absolute; top:0; z-index:101; } header nav .top{ width:100%; height:40px; background-color:#ce2f2b; } header nav .top .text{ width:1240px; height:40px; margin:0 auto; } header nav .top .text span{ display:block; height:40px; font:14px/40px 'microsoft yahei'; color:#fff; } header nav .hn-main{ display:block; width:100%; height:90px; background-color:#FFF; box-shadow:0px 4px 6px 0px #666; } header nav .hn-main ul{ display:block; width:1240px; height:90px; margin:0 auto; text-align:center; } header nav .hn-main ul li{ display:inline-block; vertical-align: middle; width:470px; height:90px; } header nav .hn-main ul li a{ display:block; width:17%; margin:0 4%; height:90px; text-align:center; font:16px/90px 'microsoft yahei'; color:#333; float:left; transition-duration:0.2s; }.padding-top2{
六、🥇 如何让学习不再盲目
第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识
第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
