计导-《我的高中》-CSDN博客

本文链接：https://blog.csdn.net/Ercig/article/details/143858013

html+css

school.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href=".css">
    <title>我的高中</title>
</head>
<body>
<div class="ff">
  <h1 class="fl">我的高中</h1>
  <p class="clear"></p>
</div>
<div class="menu">
  <ul class="center">
    <li><div class="se5"><a href="#one">学校简介</a></div></li>
    <li class="se2"><a href="#two">校园风光</a></li>
    <li class="se3"><a href="#three">百年校庆</a></li>
  </ul>
</div>
<div></div>
<div class="banner"></div>
<div class="content">
  <div id="one">
    <h3>河北南宫中学</h3>
  </div>
  <div class="pad"> 
    <p style="font-family:serif;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp河北南宫中学，位于历史名城、冀南红都南宫市，发轫于明成化十七年，成立于1909年，是冀南地区创办最早的中学。1984年被省教育厅批准为首批办好重点中学，2001年被省教育厅命名为省级示范性高中，是“中华百年名校”“全国百所最具特色中学”。</p>
    <p style="font-family:fantasy">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp河北南宫中学历经百年沧桑，孕育和积淀了厚重的校园文化。校园内的重修南宫县学记碑由清代桐城派学者、著名教育家、书法家张裕钊撰文并书丹。其文兴国图强之意溢表，远见卓识启今递世。其书入古出新，创一代书体。学校创始人齐福丕先生“苟欲竟存世界，释教育无可为”的思想至今熠熠生辉。</p>
    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp河北南宫中学的发展史是一部自强不息、艰苦卓绝的奋斗史。南中人始终坚守对民族的责任，对文明的追求，不忘初心，薪火相传，创造了学校发展史上一个个叹为观止的奇迹。学校现已发展成为一所拥有两个校区，占地16.3万平方米，建筑面积10.5万平方米，两个学部，161个教学班，776名教职工，1万余名在校生的现代化中学。</p>
    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp河北南宫中学以治学严谨、管理规范而著称，以“制度+规范”规范行为，以“评估+激励”保证落实，在严谨的过程控制中创造完美，在规范的管理过程中实现目标，创造了独特的管理思想和管理模式。特别是近年来，学校在“为学生终身发展奠基，为教师职业幸福服务，为民族和谐进步育人”教育理念的引领下，确立了“名校有突破、重点有增长、小科有发展、整体有提高”的办学目标，实行多元启智、阶梯引领、自主发展、优长育人，坚持常规管理出效益、创新促发展，实现了低进优出、优进精出，教育教学质量逐年攀升，高考成绩连续二十多年在邢台市名列前茅，受到同行的广泛关注和各级各界的普遍赞誉。2017年高考，本一上线1348人,上线率41.94%；本科二批以上上线2937人，上线率91.38%，上线人数和上线率均名列邢台各县市重点中学第一名；有3名同学成绩跻身全市理工类前10名；继2016年刘青之后，师博再次荣获邢台市理科状元，并被清华大学录取。</p>
    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp目前，学校正以科学发展观为指导，继往开来，固本开新，为建设现代化、高水平、有特色的示范性高中而努力奋斗。</p>
 
  </div>
  <hr  width="95%" style="height:0.1px;" color="#8b8585"/>
  <div id="two">
    <h3 style="text-align: center;"><u>校园风景</u></h3>
  </div>
  <div class="scrollleft">
    <ul>
      <li> <img src="./图片/001.jpg" width="230" height="160" title="学碑亭"/>
        <p>学碑亭</p>
      </li>
      <li> <img src="./图片/002.jpg" width="230" height="160" title="校园夏景"/>
        <p>校园夏景</p>
      </li>
      <li> <img src="./图片/003.jpg" width="230" height="160" title="校园之春"/>
        <p>校园之春</p>
      </li>
      <li> <img src="./图片/005.jpg" width="230" height="160" title="校园航拍"/>
        <p>校园航拍</p>
      <li> <img src="./图片/004.jpg" width="230" height="160" title="校园风景"/>
        <p>校园风景</p>
      <li> <img src="./图片/111.jpg" width="230" height="160" title="中心花园"/>
        <p>中心花园</p>
      <li> <img src="./图片/112.jpg" width="230" height="160" title="校史馆"/>
        <p>校史馆</p>
      <li> <img src="./图片/006.jpg" width="230" height="160" title=""/>
        <p>校园航拍</p>
      </li>
    </ul>
  </div>
  <hr  width="95%" style="height:0.1px;" color="#8b8585"/>
</div>
<div id="three">
  <div id="xinei">
    <h3 style="text-align:center;">百年校庆</h3>
  </div>
    <ul >
      <li>
        <p id="ggg">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp一百年风雨沧桑，一百年荡气回肠；一百年杏坛啼血，一百年桃李芬芳。和着时代的节拍，迈着坚实的步伐，河北南宫中学走过了她百年历程，迎来了自己的一百岁生日。 在这充满欢庆的日子里，南宫市各大街道挂满了书有“热烈庆祝南中建校一百周年”、“一百载沧桑巨变，一世纪春华秋实”等标语条幅和红彤彤的灯笼。整个南宫市披上了节日的盛装，沉浸在浓郁的欢乐气氛当中。校园内更是鲜花盛开，彩球飞舞，教研楼前挂满了各单位、各兄弟学校及校友致贺的条幅，甬路两旁的彩旗更是迎风招展。</p>
      </li>
      <li>
        <img src="./图片/a.jpg" width="30%" height="200px">
      </li>
      <li>
        <img src="./图片/OIP-C.jpg" width="30%" height="200px">
      </li>
    </ul>
</div>
<div class="clear"></div>
<div class="end">
  <p><b>版权所有</b> </p>
</div>
<table id="z">
  <tr>
    <b>访客量</b>
  </tr>
  <tr>
    15
  </tr>
</table>
</body>

</html>

.css

#ul,li,h1,h2,h3,p {
  padding: 0;
  margin: 0;
  list-style: none
}
a{
  text-decoration: none;
  color: #000
}
body {
    background-size: auto 900px;
    margin: 0 auto;
    line-height: 21px;
    background-color: #6e5959;
}

.clear {
  clear: both
}

.ff {
  margin: 0;
  padding: 40px 0;
  color: #fff;
}

.menu li {
  list-style: none
}

.menu {
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 5%;
  width: 80%;
  z-index: 555; 
}
.banner {
  position: relative;
  height: 500px
}

.menu {
  width: 100%;
  text-align: center;
  clear: both;
}

.menu li a {
  color: #fff
}

.menu li {
  float: left;
  margin: 2px;
  background: #215a8b;
  padding: 25px 0px;
  width: 194px
}

.content {
  background: #fff;
  padding-bottom: 20px;
  font-size: 14px;
  display: inline-block;
  width: 100%
}

.menu ul li ul {
  position: absolute;
  display: none;
  left: 794px;
}
#ggg{
  color: #8b7121;
}
.menu ul li ul li {
  margin-top: 30px;
  float: none;
  line-height: 30px;
  text-align: left;
  padding: 5px;
  width: 183px;
  text-align: center;
}
.menu li.se2 {
  background: #8b7121
}
.menu li.se3 {
  background: #218b8a
}
.menu li.se5 {
  background: #7d8b21
}
.end {
  clear: both;
  background: #215a8b;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}
.pad {
  padding: 20px;
  display: block
}

.scrollleft,
.cc {
  margin: 0 10px
}

.scrollleft {
  padding-top: 30px
}

.scrollleft li {
  width: 225px;
  margin: 10px;
  float: left
}

.cc {
  padding-top: 20px
}

.cc li {
  width: 306px;
  padding: 0px;
  background: #eee;
  margin: 10px;
  float: left
}

.cc li img {
  width: 100%;
  height: 200px
}

.cc li p {
  padding: 15px;
}

.fl {
  float: left
}

.fr {
  float: right
}

.bar {
  margin: 10px 20px;
  clear: both;
  border-bottom: #666 solid 1px;
  font-weight: bold;
  padding: 15px;
  font-size: 24px
}

#one {
  margin: 10px 20px;
  clear: both;
  border-bottom: #666 solid 1px;
  text-align: center;
  font-weight: bold;
  padding: 15px;
  margin-top: 0;
  font-size: 18px
}

#two h3 {
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 0 20px;
  top: 25px;
  display: inline-block；
}
#three{
  background-color: #fff;
  padding: 20px;
  display: block;
}
#xinei{
  margin-top: 10px;
}
#three li{
  float: none;
  
}
#abc{
  width: 50%;
}
#axi{
  width: 50%;
  float: left;
}
.last{
  width: 100px;
  height: 80px;
}
#z{
  float: left;
}

图片细节详见阿里云盘

https://www.alipan.com/t/l1zZYRky10lZ167IWwf1