Web前端开发技术课程大作业：基于HTML+CSS+JavaScript实现校园主题-萍乡田家炳中学校网站(1页)

最新推荐文章于 2022-08-17 10:32:47 发布
最新推荐文章于 2022-08-17 10:32:47 发布
阅读量92 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ____2709137139/article/details/126315799
版权

📂文章目录

一、👨‍🎓网站题目

🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。

二、✍️网站描述

🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/nav.js" type="text/javascript"></script>
</head>

<body>
<div class="heard">
<div class="top">
	<div class="logo"><img src="picture/logo.jpg" width="398" height="86" /></div>
</div>
</div>
	<div class="rz_bw_nav001_m">
	<div class="nav">
		<div class="nav_main">
			<ul id="nav_all">
				<li><a href="#">首页</a></li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
				<li><a href="#">走进田中</a>
					<ul style="display: none;">
						<li style="width: 8px;"></li>
						<li><a href="#">学校简介</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">校园文化</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">学校机构</a></li>
					</ul>
				</li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
				<li><a href="#">新闻频道 </a>
					<ul style="display: none;">
						<li style="width:128px;"></li>
						<li><a href="#">学校新闻</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">通知公告</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">校园动态</a></li>
					</ul>
				</li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
				<li><a href="#">
					<div style="_margin-top: 12px;"></div> 教育科研</a>
					<ul style="display: none;">
						<li style="width: 225px;"></li>
						<li><a href="#">教学园地</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">校本教研</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">成果展示</a></li>
					</ul>
				</li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
				<li><a href="#">德育天地</a>
					<ul style="display: none;">
						<li style="width: 350px;"></li>
						<li><a href="#">德育案例</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">心理健康</a></li>
                        <li><a href="#">|</a></li>
                        <li><a href="#">师德师风</a></li>
					</ul>
				</li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
				<li><a href="#">党建工作</a>
					<ul style="display: none;">
						<li style="width: 460px;"></li>
						<li><a href="#">组织机构</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">群团信息</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">专题聚焦</a></li>
					</ul>
				</li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
				<li><a href="#">田园风采 </a>
					<ul style="display: none;">
						<li style="width: 590px;"></li>
						<li><a href="#">优秀学生</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">社团活动</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">学生作品</a></li>
					</ul>
				</li>  
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
                <li><a href="#">教工之家  </a>
					<ul style="display: none;">
						<li style="width: 690px;"></li>
						<li><a href="#">政策法规</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">教工活动</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">规章制度</a></li>
					</ul>
				</li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
                <li><a href="#">在线留言  </a>
					<ul style="display: none;">
						<li style="width: 800px;"></li>
						<li><a href="#">学习交流</a></li>
                        <li><a href="#">|</a></li>
						<li><a href="#">师恩墙</a></li>
					</ul>
				</li>
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>
                <li><a href="#">活动专栏 </a></li> 
                <li class="spale"><img src="picture/navbg2.jpg" width="2" height="61" /></li>          
			</ul>
			
		</div>
	</div>
</div>
<div class="wap">
	<div class="banner"><a href="#"><img src="picture/a01.jpg" width="1112" height="330" /></a>
    	<ul class="futie">
        	<li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>
    <div class="main1">
    	<div class="left">
        	<div class="a01">
            	<div class="info">
                	<div class="title">走进田中</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                <div class="content">
            	<div class="mnt01"><img src="picture/tp01.jpg" width="260" height="186" /></div>
                <div class="mnt02">
                	<div class="bt01">
                    	<h1 class="w01"><a href="#">毕业科目教师</a></h1>
                        <p class="w02">为了进一步调整，统一目标，确定措施，增加信心，克服困难 为了进一步调整，统一目标，确定措施，增加信心，克服困难</p>
                    </div>
                    <div class="bt02">
                      <ul class="news1">
                      <li><a href="new_detail.html"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                      <li><a href="#"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                      <li><a href="#"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                    </ul>
                   </div>
                </div>
            </div>
            </div>
            <div class="a02">
            	<div class="news2">
                	<div class="info">
                	<div class="title">教育科研</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                 <div class="bt03">
                      <ul class="ne1">
                      <li><a href="new_detail.html"><span>2013-4-13</span>积极参与评价 共建廉洁萍乡</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>致学生家长的一封信</a></li>
                      <li><a href="#"><span>2013-4-13</span>市九中党风廉政建设目标管理责任状</a></li>
                      <li><a href="#"><span>2013-4-13</span>廉政文化进校园活动</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>"廉政文化进校园"活动开展情况汇报</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>廉政教育主题黑板报</a></li>
                      <li><a href="#"><span>2013-4-13</span>形式多样的主题活动</a></li>
                      <li><a href="#"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>形式多样的主题活动</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                      <li><a href="#"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                    </ul>
                   </div>
                </div>
                <div class="news2" style="margin-left:13px;">
                	<div class="info">
                	<div class="title">新闻频道</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                 <div class="bt03">
                      <ul class="ne1">
                       <li><a href="new_detail.html"><span>2013-4-13</span>积极参与评价 共建廉洁萍乡</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>致学生家长的一封信</a></li>
                      <li><a href="#"><span>2013-4-13</span>市九中党风廉政建设目标管理责任状</a></li>
                      <li><a href="#"><span>2013-4-13</span>廉政文化进校园活动</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>"廉政文化进校园"活动开展情况汇报</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>廉政教育主题黑板报</a></li>
                      <li><a href="#"><span>2013-4-13</span>形式多样的主题活动</a></li>
                      <li><a href="#"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>形式多样的主题活动</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                      <li><a href="#"><span>2013-4-13</span>热烈庆祝公司网站上线</a></li>
                    </ul>
                   </div>
                </div>
            </div>
            <div class="a03">
            	<div class="info">
                	<div class="title">田园风采</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                <div class="content">
            	<div class="mnt03"><img src="picture/tp02.jpg" width="156" height="130" /></div>
                <div class="mnt04">
                	<div class="bt04">
               	   <a href="#">2015年引进高层次专业人才实施方案</a></div>
                    <div class="bt05">
                       6月4日上午，萍乡九中召开党的群众路线教育实践活动查摆问题专题会议，市教育局第七督导组出
                        席指导，学校领导班子成员和部分教师代表参加会议。会上，周新萍校长通报了学校在遵守党的政治
                        纪律，贯彻执行中央八项规定、加强作风建设，"四风"方面存在突出问题，学校意见建议收集等方
                        面的情况，分析了产生问题的原因，提出了今后的努力方向和改进措施。学校领导班子成员和部分教
                        师代表参加会议。会上，周新萍校长通报了学校在遵守党的政治纪律，贯政治纪律，贯彻执行中央八
                  </div>
                </div>
            </div>
            <div class="content1">
            	<ul class="ne2" style="margin-right:40px;">
                	<li><a href="#">"青少年法治课堂暨模拟法庭进校园"</a></li>
                    <li><a href="#">"热烈庆祝萍乡市2015年中小学生足"</a></li>
                    <li><a href="#">"关于进一步加强工作纪律要求的通知"</a></li>
                </ul>
                <ul class="ne2">
                	<li><a href="#">"青少年法治课堂暨模拟法庭进校园"</a></li>
                    <li><a href="#">"热烈庆祝萍乡市2015年中小学生足"</a></li>
                    <li><a href="#">"关于进一步加强工作纪律要求的通知"</a></li>
                </ul>
            </div>
          </div>
          <div class="a03">
            	<div class="info">
                	<div class="title">教工之家</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                <div class="content">
            	<div class="mnt03"><img src="picture/tp03.jpg" width="156" height="130" /></div>
                <div class="mnt04">
                	<div class="bt04">
               	   <a href="#">萍乡九中召开"四风"查摆问题专题会</a></div>
                    <div class="bt05">
                       6月4日上午，萍乡九中召开党的群众路线教育实践活动查摆问题专题会议，市教育局第七督导组出
                        席指导，学校领导班子成员和部分教师代表参加会议。会上，周新萍校长通报了学校在遵守党的政治
                        纪律，贯彻执行中央八项规定、加强作风建设，"四风"方面存在突出问题，学校意见建议收集等方
                        面的情况，分析了产生问题的原因，提出了今后的努力方向和改进措施。学校领导班子成员和部分教
                        师代表参加会议。会上，周新萍校长通报了学校在遵守党的政治纪律，贯政治纪律，贯彻执行中央八
                  </div>
                </div>
            </div>
            <div class="content1">
            	<ul class="ne2" style="margin-right:40px;">
                	<li><a href="#">"青少年法治课堂暨模拟法庭进校园"</a></li>
                    <li><a href="#">"热烈庆祝萍乡市2015年中小学生足"</a></li>
                    <li><a href="#">"关于进一步加强工作纪律要求的通知"</a></li>
                </ul>
                <ul class="ne2">
                	<li><a href="#">"青少年法治课堂暨模拟法庭进校园"</a></li>
                    <li><a href="#">"热烈庆祝萍乡市2015年中小学生足"</a></li>
                    <li><a href="#">"关于进一步加强工作纪律要求的通知"</a></li>
                </ul>
            </div>
          </div>
            
        </div>
        <div class="right">
<div class="b01">
            	<div class="info">
                	<div class="title">学校视频</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                <div class="content"> <a href="#"><img src="picture/ba01.jpg" width="304" height="196" /></a>
                	<ul class="futie1">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
   			</div>
            </div>
            <div class="news3">
                	<div class="info">
                	<div class="title">党建工作</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                 <div class="content">
                 	 <p class="b02"><img src="picture/tp05.png" width="310" height="110" /></p>
                      <ul class="ne7">
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                    </ul>
                   </div>
          </div>
                <div class="news3">
                	<div class="info">
                	<div class="title">活动专栏</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                 <div class="content">
                      <ul class="ne7">
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                    </ul>
                   </div>
                </div>
                <div class="news3">
                	<div class="info">
                	<div class="title">德育天地</div>
                    <div class="more"><a href="#">MORE+</a></div>
                </div>
                 <div class="content">
                      <ul class="ne7">
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                      <li><a href="#"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                       <li><a href="new_detail.html"><span>2013-4-13</span>萍乡九中举行"学习龚全珍，我该怎么...</a></li>
                    </ul>
                   </div>
                </div>
        </div>
    </div>
    <div class="main2">
    	<div class="info">
        	<div class="title">名师风采</div>
            <div class="more"><a href="#">more+</a></div>
        </div>
        <div class="content">
        	<ul>
            	<li><img src="picture/01.jpg" width="193" height="150" /></li>
                <li><img src="picture/02.jpg" width="193" height="150" /></li>
                <li><img src="picture/03.jpg" width="193" height="150" /></li>
                <li><img src="picture/04.jpg" width="193" height="150" /></li>
                <li><img src="picture/02.jpg" width="193" height="150" /></li>
            </ul>
        </div>
    </div>
</div>
<div class="bottom">
	地址：江西省萍乡市建设西路 电话：7086099<br /> 
版权所有 © 2009 田家炳中学 All Rights Reserved 后台管理 推荐分辨率1024*768
</div>
</body>
</html>

💒CSS样式代码


@charset "utf-8";
body{ padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; background:url(../images/bg02.jpg);}
img{ border:none;}
ul,li{ list-style:none; padding:0px; margin:0px;}
a{ text-decoration:none;}
p{ padding:0px; margin:0px;}
img{ border:none;}
.heard{ background:#fff; width:100%;}
.top { width:1140px; margin:auto; background:url(../images/bg01.jpg) no-repeat right; height:133px;}
.logo{ padding-top:25px;}
.rz_bw_nav001_m{clear:both;width:100%;height:103px;background:url(../images/navbg1.jpg);}
.nav{font-size:12px;width:1140px;margin:0px auto 0;height:61px;line-height:61px;position:relative;z-index:1;}
.spale{ background:url(../images/navbg2.jpg) no-repeat; width:2px; height:61px;}
.nav a{text-decoration:none;}.
nav_main{height:61px;padding:0 5px;background:#FFF url(../images/rz_bw_nav001-bg.png) repeat-x 0 top;position:relative;}
#nav_all{height:61px;float:left;line-height:61px;position:relative;z-index:222;}
#nav_all li{text-align:center;float:left;}
#nav_all li a{color:#fff;display:inline-block;font-size:14px;font-weight:bold;cursor:pointer;padding:0 27px 0 27px;_padding:0 10px;height:61px;line-height:61px;white-space:nowrap;}
#nav_all li a:hover{ background:url(../images/navbg03.jpg) repeat-x;height:61px;line-height:61px;overflow:hidden; color:#5c6d07;}
#nav_all li ul{display:none;position:absolute;z-index:99;width:990px;left:80px;top:65px;}
#nav_all ul li{background-image:none;line-height:32px;height:32px;padding-top:0px;padding:0;}
#nav_all ul li a{background-image:none;padding:0px 10px;margin:0px;height:32px;line-height:32px;color:#238e02;font-weight:normal;border:none;}
#nav_all ul li a:hover{background-image:none;padding:0px 10px;margin:0px auto;height:30px;line-height:30px;color:#333;border-top:none;}
.wap{width:1140px; margin:auto; background:#FFF; padding-bottom:15px;}
.banner{ width:1140px; background:#fff; margin:auto; position:relative;}
.banner img{ margin:13px}
.futie{ position:absolute; z-index:999; width:130px; height:20px; top:300px; right:30px;}
.futie li{ float:left; background:#f0ebc5; width:18px; height:18px; line-height:18px; text-align:center; margin-right:5px; border:1px solid #846e60;}
.futie li a{ color:#3a3428; display:block;}
.futie li a:hover{background:#d73421; color:#fff;}
.main1{ width:1112px;zoom:1; overflow:hidden; margin:auto;}
.main1 .left{ width:745px; float:left;}
.main1 .right{ width:346px; float:right;}
.a01{ border:1px solid #dedede; width:743px;}
.a01 .info{ background:#76b00c; height:37px; line-height:37px; zoom:1; overflow:hidden;border-bottom:1px solid #dedede;}
.a01 .title{ float:left; font-size:14px; color:#fff; font-weight:bold; padding-left:15px;}
.a01 .more{ font-size:10px; float:right; padding-right:10px;}
.a01 .more a{ color:#fff;}
.a01 .more a:hover{ color:#fef200;}
.a01 .content{ zoom:1; overflow:hidden;width:743px; padding:5px 0px;}
.mnt01{ width:260px; float:left; margin:15px;}
.mnt02{ width:430px; float:right; margin:5px 15px 15px 0px;}
.bt01{ width:430px;}
.w01{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; width:430px; color:#f46c06; font-size:16px;}
.w01 a{ color:#f46c06;}
.w01 a:hover{ text-decoration:underline;}
.w02{ color:#727272; font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; width:430px;}

 /*news*/
.bt02{ margin-top:15px;}
.news1{ float:left; width:430px;  }
.news1 li{ float:left; width:430px; height:30px; line-height:30px; text-indent:2em; border-bottom:1px dashed #DEDEDE; font-size:12px; background:url(../images/a02.jpg) no-repeat left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news1 li a{color:#333;}
.news1 li a:hover{ color:#238e02; text-decoration:underline;}
.news1 li span{ float:right; font-size:11px; color:#969696;} 

.a02{ zoom:1; overflow:hidden;width:745px; margin-top:13px;}
.news2{width:364px;border:1px solid #dedede; float:left;}
.news2 .info{ background:url(../images/a04.jpg) no-repeat left; height:37px; line-height:37px; zoom:1; overflow:hidden;border-bottom:1px solid #dedede;}
.news2 .title{ float:left; font-size:14px; color:#fff; font-weight:bold; padding-left:15px;}
.news2 .more{ font-size:10px; float:right; padding-right:10px;}
.news2 .more a{ color:#989898;}
.news2 .more a:hover{ color:#238e02;}
.bt03{ zoom:1; overflow:hidden; margin-left:10px; padding:6px 0px 13px 0px;}
.ne1{ float:left; width:330px;  }
.ne1 li{ float:left;  height:30px; line-height:30px; border-bottom:1px dashed #DEDEDE; font-size:12px; background:url(../images/a05.jpg) no-repeat left;  padding-left:15px; width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ne1 li a{color:#333;}
.ne1 li a:hover{ color:#238e02; text-decoration:underline;}
.ne1 li span{ float:right; font-size:11px; color:#969696;} 


.a03{ border:1px solid #dedede; width:743px; margin-top:13px;}
.a03 .info{ background:url(../images/a04.jpg) no-repeat left; height:37px; line-height:37px; zoom:1; overflow:hidden;border-bottom:1px solid #dedede;}
.a03 .title{ float:left; font-size:14px; color:#fff; font-weight:bold; padding-left:15px;}
.a03 .more{ font-size:10px; float:right; padding-right:10px;}
.a03 .more a{ color:#989898;}
.a03 .more a:hover{ color:#238e02;}
.a03 .content{ zoom:1; overflow:hidden;width:743px; }
.mnt03{ float:left; margin:15px; width:166px;}
.mnt03 img{ width:156px; height:130px; padding:5px; border:1px solid #dddddd;}
.mnt05{ float:left; margin:15px; width:166px;}
.mnt05 img{ width:156px; height:130px; padding:5px; border:1px solid #dddddd;}
.mnt04{ width:520px; float:right; margin:10px 15px 15px 0px;}
.bt04{ width:520px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; width:430px; color:#76b00c; font-size:16px; text-align:center;}
.bt04 a{ color:#76b00c; font-weight:bold}
.bt04 a:hover{ text-decoration:underline;}
.bt05{ color:#504f4f; font-size:12px; line-height:24px; text-indent:2em; margin-top:13px; height:115px; overflow:hidden;}
.a03 .content1{ zoom:1; overflow:hidden;width:743px; padding:19px 0px 13px 0px;}
.ne2{ width:300px; float:left; margin-left:20px;}
.ne2 li{ float:left; width:300px; height:30px; line-height:30px; border-bottom:1px dashed #DEDEDE; font-size:12px; background:url(../images/a06.jpg) no-repeat left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; padding-left:15px;}
.ne2 li a{ color:#333;}

.b01{ width:344px; border:1px solid #dedede; }
.b01 .info{ background:url(../images/title1.jpg) no-repeat left; height:37px; line-height:37px; zoom:1; overflow:hidden;border-bottom:1px solid #dedede;}
.b01 .title{ float:left; font-size:14px; color:#76b00c; font-weight:bold; padding-left:20px;}
.b01 .more{ font-size:10px; float:right; padding-right:10px;}
.b01 .more a{ color:#989898;}
.b01 .more a:hover{ color:#238e02;}
.b01 .content{ width:344px; background:#fff; margin:auto; position:relative;}
.b01 .content img{ margin:14px 20px; }
@-moz-document url-prefix(){.b01 .content img{margin:16px 20px;}} 
.futie1{ position:absolute; z-index:999; width:130px; height:20px; top:185px; right:20px;}
.futie1 li{ float:left; background:#f0ebc5; width:18px; height:18px; line-height:18px; text-align:center; margin-right:5px; border:1px solid #846e60;}
.futie1 li a{ color:#3a3428; display:block;}
.futie1 li a:hover{background:#d73421; color:#fff;}

.news3{width:344px;border:1px solid #dedede; float:left; margin-top:13px;}
.news3 .info{ background:url(../images/title1.jpg) no-repeat left; height:37px; line-height:37px; zoom:1; overflow:hidden;border-bottom:1px solid #dedede}
.news3 .title{float:left; font-size:14px; color:#76b00c; font-weight:bold; padding-left:20px;}
.news3 .more{ font-size:10px; float:right; padding-right:10px;}
.news3 .more a{ color:#989898;}
.news3 .more a:hover{ color:#238e02;}
.b02{ padding:8px 0px 8px 6px}
.news3 .content{ zoom:1; overflow:hidden; margin-left:10px; padding:6px 0px 13px 0px;}
@-moz-document url-prefix(){.news3 .content{padding:6px 0px 14px 0px;}} 
.ne7{ float:left; width:305px;  }
.ne7 li{ float:left; width:305px; height:30px; line-height:30px; border-bottom:1px dashed #DEDEDE; font-size:12px; background:url(../images/b02.jpg) no-repeat left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; padding-left:15px;}
.ne7 li a{color:#333;}
.ne7 li a:hover{ color:#238e02; text-decoration:underline;}
.ne7 li span{ float:right; font-size:11px; color:#969696;} 

.main2{ width:1110px; border:1px solid #dedede; margin:auto; margin-top:11px;}
.main2 .info{ background:url(../images/title1.jpg) no-repeat left; height:37px; line-height:37px; zoom:1; overflow:hidden;border-bottom:1px solid #dedede;}
.main2 .title{ float:left; font-size:14px; color:#76b00c; font-weight:bold; padding-left:20px;}
.main2 .more{ font-size:10px; float:right; padding-right:10px;}
.main2 .more a{ color:#989898;}
.main2 .more a:hover{ color:#238e02;}
.main2 .content{ width:1110px; zoom:1; overflow:hidden; padding-left:11px;}
.main2 .content li{ width:193px; height:150px; padding:3px; border:1px solid #ddd; float:left; margin:18px 8px 18px 8px;}

.bottom{ background:url(../images/bg05.jpg) repeat-x; height:105px; color:#fff; text-align:center; margin-top:20px; font-size:12px; padding-top:20px; line-height:24px;}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

!

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

QQ____2709137139
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 5万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
基于TP5框架开发的学校网站大学官网系统
05-23
ThinkPHP源码主要是基于thinkphp5.0.11框架开发的学校网站系统，主要适合学校、政府企业拿来搭建自己的网站管理系统。该学校网站系统包含文章，图片，下载，视频，学生，专业模型等，帮助开发者减少web应用后台开发时间和精力，以最快的速度开发出高质量的web应用，适合高校、中小学学校拿来快速搭建自己的校园网站管理系统，也适合正在学习TP5框架的开发者学习网站开发，代码是全开源的，无任何加密！系统集成安装模块，一键式安装系统，减少繁琐的网站配置！！ 预览：daycode.net/2790.html 后台功能强大，新闻大部、栏目管理、广告系统，主要的是用完整的AUTH权限管理系统，对不同的用户给不通的权限，用户可以管理不同的功能！！
大学生网页制作 大学校园简介5页作业 html网页设计 dw期末成品代码下载
07-12
页面精美小清新，包含div+css、图片、轮播图、JS滚动、Table布局、登录框，比较简单容易上手。 【大学生DW网页设计成品 大学校园简介静态HTML网页作业制作 dreamweaver网页作业代码下载】
爱心助学协会学校网站通用源码
02-26
爱心助学协会网站源码是基于ASP开发的一套多用途综合性公益性网站管理系统，采用ACCESS数据库，使用简单快捷容易上手，仅需基础建站知识便可熟练操作。整站代码开源，无任何使用次数限制，无域名绑定限制。后台功能超强，风格大气，追求细节的完美性，优化了内核代码，升级了程序风格美工细节。经过历届版本的开发完善，现程序已几近完美。后台各项功能完整可用，无任何已知安全隐患。程序后台会员管理合理完善，集成了公益网站必备的各项功能，使得工作效率进一步提高。后台功能分权管理，指定后台会员分组权限，让后台管理分配更精确，各负其责。办事审批、领导信箱、投诉举报、建言献策、留言管理、评论管理、公告管理、数据库的备份压缩等等...更多人性化的细节功能等待着您的发现。
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
网站模板-萍乡田家炳中学(绿色).rar.rar
09-29
网站模板-萍乡田家炳中学(绿色).rar.rar
萍乡田家炳中学网站模板(绿色)
06-20
萍乡田家炳中学网站模板(绿色)
吉林省辽源市田家炳高中友好学校2020学年高一物理下学期期末联考试题（无答案）.doc
10-14
吉林省辽源市田家炳高中友好学校2020学年高一物理下学期期末联考试题（无答案）.doc
吉林省辽源市田家炳高中友好学校2020学年高二物理下学期期末联考试题（无答案）.doc
10-14
吉林省辽源市田家炳高中友好学校2020学年高二物理下学期期末联考试题（无答案）.doc
学校官方网站需求分析
11-14
为明确软件需求、安排项目规划与进度、组织软件开发与测试，撰写本文档。
学校网站模板源代码
05-30
学校网站模板源代码，是一般中小型面向对象学校网站开发的模板。
HTML+CSS模仿大学网站主页
07-23
用HTML+CSS模仿的大学主页 无JS 无FLASH 没有添加超链接
html实现学校网站
06-22
用html实现的简单的学校代码。主页里面的对应的附属页。相应有附属页用一个文件夹保存
学校网站模板_中学学校网站源码
07-03
浅蓝色风格的学校网站模板，适合于制作小学，及中学的学校门户网站，本人亲测好用。 宽度：1000px 后台地址：/e/master/login.aspx 管理员/密码：admin/admin 结构：div+css 程序：PageAdmin CMS v3.0
web网页设计实例作业 ——校园文化(7页) html大学生网站开发实践作业
12-03 8155
web网页设计实例作业 ——校园文化(7页) html大学生网站开发实践作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-
思政教学网站|政治教育网站|基于JavaWeb实现学校网站开发
软件开发实战项目分享
05-18 1553
本项目主要实现了高校网站信息管理功能，用于展示学校风采，学校风貌，学校信息，本网站设计页面美观大方，功能运行完整无误，前端页面用于展示相关数据，后台系统用于进行前端展示信息的相关管理功能。主要功能模块包含：系统用户管理、工作动态管理、形势政策管理、党团建设管理、思政教学管理、马克思主义学院管理、法制教育管理、校内部分信息管理、互动乐园管理功能以及其它系统管理功能。
web期末大作业：基于html+css+js制作深圳大学网站(13页) 学校班级网页制作模板 学生静态HTML网页源码
最新发布
QQ_____365392777的博客
08-17 207
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS）
HTML网页设计
08-05 6152
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站......

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值