网页效果
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>假期项目</title>
<style>h1{ font-size: 30px;}</style>
<meta name="description" content="光山县第二高级中学分校（光山二高分校）位于河南省信阳市光山县滨河北路。创建于2008年，现有4个年级90多个教学班。...">
<meta name="keywords" content="光山县第二高级中学分校 光山县第二高级中学分校师资队伍 光山县第二高级中学分校交流与学习 光山县第二高级中学分校学校荣誉 光山县第二高级中学分校办学成绩">
<!-- 引入页面的CSS-->
<link rel="stylesheet" type="text/css" href="XM.css">
<!-- 引入页面的Base-->
<link rel="stylesheet" href="Base.css">
</head>
<body>
<!--header-->
<header>
<div class="nav w">
<div class="logo">
<h1>光山县第二高级中学分校</h1>
</div>
<div class="hotwords">
<a href="#">创办时间</a>
<a href="#">办学性质</a>
<a href="#">占地面积</a>
<a href="#">师资队伍</a>
<a href="#">学校荣誉</a>
<a href="#">办学成绩</a>
<a href="#">简 称</a>
<a href="#">校园环境</a>
<a href="#">历年录取分数线</a>
<a href="#">交流与学习</a>
</div>
<div class="fr">
<ul>
<li><a href="#">学校简介视频</a></li>
<li><a href="#">学长学姐说</a></li>
<li><a href="#">展现母校风光</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder=" 创办时间">
<button>搜索</button>
</div>
</div>
</header>
<div class="l">
<div class="jj">学校简介</div>
<div class="i"></div>
<div class="j">光山县第二高级中学分校是经光山县教育局批准民办高中，学校位于官渡河北岸，占地面积300余亩，光山二高分校创建于2008年，与光山二高本部实行一体化管理与考评，现有4个年级90多个教学班。</div>
<div class="j">学校位于官渡河北岸，占地面积300余亩，学校设有行政区、教学区、运动区、学生生活区、教职工生活区、实验园区六大功能区。学校总投资2.6亿人民币，于2008年9月正式投入使用，目前完成总建筑面积约17万平方米，近年来学校逐步完善各种设施，有标准400米塑胶跑道、足球场、篮球场、网球场、羽毛球场、教工餐厅、教师公寓等。</div>
<div class="j">学校现有四个年级共90个教学班，学生6200余人。</div>
<div class="j">十年来，光山二高：二高分校进入清华北大等名校119人，共有31967人进入本科院校学习，其中8209人进入本一院校,本科升学总人数占全县总人数的70%以上；2009－2018年数学、物理、化学等学科奥赛86人获省级以上奖励；全国中学生读书竞赛活动获*奖励53人，省级奖励78人，市级奖励216人。</div>
</div>
<div class="o">
<img class="b" src="TU/XU2.jpg">
</div>
<div class="a">
<div class="c">
学校荣誉
<div class="f"></div>
</div>
<div class="d">一分耕耘、一分收获。办学十年来，二高分校先后获得:2009年被中国教育学会指定为“十一五”重点课题实验学校；2010年被*教科所指定为“十一五”重点课题实验基地；2010年被省教育厅评为先进学校和特色学校；2010年被信阳市教育局评为平安校园示范学校；2012年被评为北京大学优质生源基地；2013年教育部中国教师发展基金会校本建设项目“全国重点实验学校”；2010－2014连续五年荣获市教育教学成绩一等奖；2015年被评为信阳市园林单位；2016年被评为河南省园林单位.</div>
<div class="k">
<div class="p">交流与学习</div>
<div class="q"></div>
<div class="s">在县委、县*和上级教育主管部门的正确领导下，在社会各界的大力支持下，学校积极实施新课程改革，教育教学成绩稳步上升，先后引来了郑州、洛阳、商丘、新乡、南阳、三门峡、周口、驻马店和我市新县、淮滨、固始、商城、潢川、罗山等地高中到校参观学习。 十年来，光山二高：二高分校进入清华北大等名校119人，共有31967人进入本科院校学习，其中8209人进入本一院校,本科升学总人数占全县总人数的70%以上； 2009－2018年数学、物理、化学等学科奥赛86人获省级以上奖励； 全国中学生读书竞赛活动获*奖励53人，省级奖励78人，市级奖励216人。</div>
</div>
</div>
<div class="abc">
<div class="ab"></div>
</div>
</body>
</html>
CSS代码
——XM
.logo{
position: absolute;
top: 15px;
left: 580px;
}
.hotwords {
position: absolute;
top: 80px;
left: 180px;
background: #e9e9e9;
}
.hotwords a {
display: inline-block;
line-height: 50px;
text-align: center;
margin: 0 10px;
font-size: 16px;
color: black;
}
.fr{
position: absolute;
right: 180px;
top: 10px;
background:#e9e9e9 ;
}
.fr ul li{
line-height: 40px;
color: #b0b0b0;
font-size: 16px;
}
.fr{
display: inline-block;
line-height: 30px;
text-align: center;
margin: 0 10px;
}
.fr{
text-align:center;
}
ul li
{
list-style-type:none;
display:inline;
}
/*search搜寻框*/
.search {
position: absolute;
top: 80px;
left: 1100px;
width: 305px;
height: 50px;
border: 1px solid #e0e0e0;
}
/*字体大小设置*/
.search input {
float: left;
width: 238px;
height: 48px;
}
/*搜索框大小位置设置*/
.search button {
float: right;
width: 65px;
height: 48px;
}
.logo{
text-align: center;
font-weight: bold;
}
.l{
position: absolute;
width: 600px;
left: 180px;
top: 150px;
}
.jj {
font-size: 24px;
font-weight: bolder;
}
.j{font-size: 17px;
text-indent: 34px;
}
.i{
width: 600px;
height: 1px;
background: #666666;
}
.b{
position: absolute;
left: 800px;
top: 150px;
length:300px;
width: 600px;
}
.a{
position: absolute;
right: 120px;
left: 180px;
top: 560px;
}
.c{font-size: 24px;
font-weight: bolder;
}
.d{
font-size: 17px;
text-indent: 34px;
}
.f{
width: 1200px;
height: 1px;
background: #666666;
}
.k{
position: absolute;
right: 0px;
left: 0px;
top: 160px;
}
.p{font-size: 24px;
font-weight: bolder;
}
.s{
font-size: 17px;
text-indent: 34px;
}
.q{
width: 1200px;
height: 1px;
background: #666666;
}
CSS代码
——base
* {
margin: 0;
padding: 0;
/*css3盒子模型*/
box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/*默认有灰色边框，我们需要手动去掉*/
border: 0;
outline: none;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}