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

    🎉精彩专栏推荐 💭文末获取联系
    ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
    💂 作者主页: 【主页——🚀获取更多优质源码】
    🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
    🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
    🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
    🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
    🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
    🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

    📂文章目录

    一、👨‍🎓网站题目

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

    二、✍️网站描述

    🏷️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="#">1a>li>
            <li><a href="#">2a>li>
            <li><a href="#">3a>li>
            <li><a href="#">4a>li>
            <li><a href="#">5a>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-13span>热烈庆祝公司网站上线a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>热烈庆祝公司网站上线a>li>
                      <li><a href="#"><span>2013-4-13span>热烈庆祝公司网站上线a>li>
                      <li><a href="#"><span>2013-4-13span>热烈庆祝公司网站上线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-13span>积极参与评价 共建廉洁萍乡a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>致学生家长的一封信a>li>
                      <li><a href="#"><span>2013-4-13span>市九中党风廉政建设目标管理责任状a>li>
                      <li><a href="#"><span>2013-4-13span>廉政文化进校园活动a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>"廉政文化进校园"活动开展情况汇报a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>廉政教育主题黑板报a>li>
                      <li><a href="#"><span>2013-4-13span>形式多样的主题活动a>li>
                      <li><a href="#"><span>2013-4-13span>热烈庆祝公司网站上线a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>形式多样的主题活动a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>热烈庆祝公司网站上线a>li>
                      <li><a href="#"><span>2013-4-13span>热烈庆祝公司网站上线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-13span>积极参与评价 共建廉洁萍乡a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>致学生家长的一封信a>li>
                      <li><a href="#"><span>2013-4-13span>市九中党风廉政建设目标管理责任状a>li>
                      <li><a href="#"><span>2013-4-13span>廉政文化进校园活动a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>"廉政文化进校园"活动开展情况汇报a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>廉政教育主题黑板报a>li>
                      <li><a href="#"><span>2013-4-13span>形式多样的主题活动a>li>
                      <li><a href="#"><span>2013-4-13span>热烈庆祝公司网站上线a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>形式多样的主题活动a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>热烈庆祝公司网站上线a>li>
                      <li><a href="#"><span>2013-4-13span>热烈庆祝公司网站上线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="#">1a>li>
                        <li><a href="#">2a>li>
                        <li><a href="#">3a>li>
                        <li><a href="#">4a>li>
                        <li><a href="#">5a>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-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...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-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...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-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                      <li><a href="#"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...a>li>
                       <li><a href="new_detail.html"><span>2013-4-13span>萍乡九中举行"学习龚全珍，我该怎么...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>





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361

    💒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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134

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

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

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

    第三、学到了就要用到

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

    七、🎁更多干货

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

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

    3.

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

    在这里插入图片描述

  • 相关阅读:
    Ansys Zemax | 如何设计光谱仪——实际应用
    与第三方iot平台IFTTT&Smartthings&Google对接开发iot云服务
    【项目实战】Spring Boot项目抵御XSS攻击
    解决Selenium在运行中出现浏览器页面崩溃，最后导致丢失session id的问题。
    阿里云服务器ECS windows server已开放端口但连不上的问题
    【每日一题】2300. 咒语和药水的成功对数
    从Matlab实例学习粒子群算法
    融云 Flutter SDK，跨平台开发的真香之选
    在Java中使用io实现TCP协议编程
    go语言 go mod生成
  • 原文地址：https://blog.csdn.net/qq_365392777/article/details/127781419