HTML和CSS写的简易网页

最新推荐文章于 2023-11-30 18:35:25 发布

HW*

最新推荐文章于 2023-11-30 18:35:25 发布

阅读量1.4k

点赞数 4

分类专栏： BannerStudio

本文链接：https://blog.csdn.net/qq_52006954/article/details/114778909

版权

BannerStudio 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

网页效果

在这里插入图片描述

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="#">简&nbsp;&nbsp;称</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="&ensp;创办时间">
        <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
}

HW*

关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
2
评论
HTML和CSS写的简易网页

网页效果HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>假期项目</title> <style>h1{ font-size: 30px;}</style> <meta name="description" content="光山县第二高级中学分校（光山二高分.
复制链接

扫一扫

专栏目录