运用HTML+CSS写学校网页（静态） 第一次

其他 2020-10-28 11:44:50 阅读次数: 0

第一次写博客，一只小萌新啦。有错误的、不足的以及混乱的地方还请大家见谅！博主大三了，学的计算机专业，前面学习过c语言以及java，不过学的都不是很好。现在正在学习前端的知识，正如同新手学习编程写“hello，worl！”一样，我也先拿学校网页作为练手对象（网页很丑，做好心理准备！）哈哈哈~

先给你们看一下效果图吧！

在这里插入图片描述
在这里插入图片描述
·························································································································

嗯，以上就是预览图啦！

·························································································································
·························································································································
·························································································································

HTML部分

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>皖西学院（官网）</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 语言栏开始 -->
    <div class="language clearfix">
        <div class="w">
            <ul>
                <li><a href="">Englilsh</a></li>
                <li><a href="">站点地图</a></li>
            </ul>
        </div>
    </div>
    <!-- 语言栏结束 -->

    <!-- logo栏开始 -->
    <div class="logo_nav clearfix">
        <div class="w">
            <div class="logo">
                <a href="#">
                    <img src="图片/logo/logo.png" alt="">
                </a>
            </div>
            <div class="search">
                <ul>
                    <a href="#"><img src="图片/ss.gif" alt=""></a>
                    <li class="last"><input class="text" type="text" value="请输入关键字"></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>
            </div>
        </div>
    </div>
    <!-- logo栏结束 -->

    <!-- 导航栏开始 -->
    <div class="big_nav clearfix">
        <div class="nav w clearfix">
            <ul>
                <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>
                <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>
                <li class="last"><a>信息服务</a></li>
            </ul>
        </div>
    </div>
    <!-- 导航栏结束 -->

    <!-- 热点栏开始 -->
    <div class="hot w clearfix">
        <a href=""><img src="图片/logo/tu.png" alt=""></a>
        <div class="dot_box">
            <ul>
                <li>
                    <div class="dot"></div>
                </li>
                <li>
                    <div class="dot"></div>
                </li>
                <li>
                    <div class="dot"></div>
                </li>
                <li>
                    <div class="dot"></div>
                </li>
                <li>

                    <div class="dot"></div>
                </li>
                <li>
                    <div class="dot"></div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 热点栏结束 -->


    <!-- 新闻栏开始 -->
    <div class="new w clearfix">
        <div class="left">
            <div class="hd">
                <span>综合新闻</span>
            </div>
            <div class="bd">
                <a href=""><img src="图片/logo/new.jpg" alt=""></a>
            </div>
            <div class="ft">
                <a href="">
                    <h3>校党委理论学习中心组召开理论学习会</h3>
                    <p>根据党委书记熊健的安排，10月12日校党委理论学习中心组召开学习会，校党委副书记、校长刘学忠主持会议。会议集中学习了习近平总书记...</p>
                </a>
            </div>
        </div>
        <div class="center">
            <div class="hd">
                <a href="#">更多></a>
            </div>
            <div class="bd">
                <ul>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">校党委理论学习中心组召开理论学习会</a> </div><span>10-16</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">省人社厅、教育厅来我校调研高层次人才工作</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">校领导深入实验课堂听课</a></div><span>10-14</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院召开校园电动车专项整治工作会议</a></div><span>10-15</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院召开2020级学生军训工作领导组会议</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">应用型本科高校破“唯”及科技评价研讨会成...</a></div><span>10-11</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院召开巡视整改工作领导小组第二次会...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">池州学院校长柳友荣教授应邀为皖西学院作劳...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院召开2020年安徽省大学生未来律师辩...</a></div><span>10-05</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院举行校园影院首映揭牌仪式</a></div><span>10-01</span></li>
                </ul>
            </div>
        </div>

        <div class="right">
            <div class="hd">
                <span>通知公告</span>
                <a href="#">更多></a>
            </div>
            <div class="bd">
                <ul>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">转发《国务院第七次全国人口普查领导小...</a> </div><span>10-15</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院2020年诚聘博士公告（新）</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于开展2020年教师、实验系列专业技术...</a></div><span>10-14</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">住房信息公示</a></div><span>10-15</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院2020年度安徽高校科学研究项目...</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于拟录用刘翠艳博士的公示</a></div><span>10-11</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于全国人口普查进行入户普查登记的温...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于做好2021年度大学生城乡居民医疗保...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于遴选2020年“星火创咖”入驻创新创...</a></div><span>10-05</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于2020级学生军训工作及服装发放安排...</a></div><span>10-01</span></li>
                </ul>
            </div>
        </div>

        <div class="bottom_left">
            <div class="hd">
                <span>媒体晥院</span>
                <a href="#">更多></a>
            </div>
            <div class="bd">
                <ul>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">转发《国务院第七次全国人口普查领导小...</a> </div><span>10-15</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院2020年诚聘博士公告（新）</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于开展2020年教师、实验系列专业技术...</a></div><span>10-14</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">住房信息公示</a></div><span>10-15</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院2020年度安徽高校科学研究项目...</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于拟录用刘翠艳博士的公示</a></div><span>10-11</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于全国人口普查进行入户普查登记的温...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于做好2021年度大学生城乡居民医疗保...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于遴选2020年“星火创咖”入驻创新创...</a></div><span>10-05</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于2020级学生军训工作及服装发放安排...</a></div><span>10-01</span></li>
                </ul>
            </div>
        </div>

        <div class="bottom_center">
            <div class="hd">
                <span>学术动态</span>
                <a href="#">更多></a>
            </div>
            <div class="bd">
                <ul>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">转发《国务院第七次全国人口普查领导小...</a> </div><span>10-15</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院2020年诚聘博士公告（新）</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于开展2020年教师、实验系列专业技术...</a></div><span>10-14</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">住房信息公示</a></div><span>10-15</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">皖西学院2020年度安徽高校科学研究项目...</a></div><span>10-12</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于拟录用刘翠艳博士的公示</a></div><span>10-11</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于全国人口普查进行入户普查登记的温...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于做好2021年度大学生城乡居民医疗保...</a></div><span>10-09</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于遴选2020年“星火创咖”入驻创新创...</a></div><span>10-05</span></li>
                    <li>
                        <img src="图片/list2.jpg" alt="">
                        <div><a href="#">关于2020级学生军训工作及服装发放安排...</a></div><span>10-01</span></li>
                </ul>
            </div>
        </div>

        <div class="bottom_right">
            <div class="hd">
                <span>快速链接</span>
            </div>
            <div class="bd">
                <div class="link">
                    <a href="#"><img src="图片/链接图片/信息门户.jpg" alt=""></a><br>
                    <a .normal href="#">信息门户</a>
                </div>
                <div class="link">
                    <a href="#"><img src="图片/链接图片/书记校长信箱.jpg" alt=""></a><br>
                    <a .normal href="#">校长信箱</a>
                </div>
                <div class="link">
                    <a href="#"><img src="图片/链接图片/周表安排.jpg" alt=""></a><br>
                    <a .normal href="#">周表安排</a>
                </div>
                <div class="link">
                    <a href="#"><img src="图片/链接图片/校园快讯.jpg" alt=""></a><br>
                    <a .normal href="#">校园快讯</a>
                </div>
                <div class="link">
                    <a href="#"><img src="图片/链接图片/信息公开.jpg" alt=""></a><br>
                    <a .normal href="#">信息公开</a>
                </div>
                <div class="link">
                    <a href="#"><img src="图片/链接图片/就业指导.jpg" alt=""></a><br>
                    <a .normal href="#">就业指导</a>
                </div>
                <div class="link">
                    <a href="#"><img src="图片/链接图片/电子邮件.jpg" alt=""></a><br>
                    <a .normal href="#">电子邮件</a>
                </div>
                <div class="link">
                    <a href="#"><img src="图片/链接图片/教务相关.jpg" alt=""></a><br>
                    <a .normal href="#">教务相关</a>
                </div>
                <div class="link_last">
                    <a href="#"><img src="图片/链接图片/校园卡.jpg" alt=""></a><br>
                    <a .normal href="#">校园卡</a>
                </div>

            </div>
        </div>
    </div>
    <!-- 新闻栏结束 -->

    <!-- 底栏开始 -->
    <div class="footer clearfix">
        <div class="w">
            <div class="lt ">
                <p>版权所有 © 皖西学院 地址：安徽省六安市云露桥西月亮岛　邮编：237012</p>
                <div class="big_img">
                    <img src="图片/blue.png" alt="">
                </div>
                <div class="small_img">
                    <img src="图片/gonganbeian.png" alt="">
                </div>
                <div class="beian">
                    <p>皖ICP备05003572号-1</p>
                </div>
                <br>
                <br>
                <div class="small_img">
                    <img src="图片/gonganbeian.png" alt="">
                </div>
                <div class="beian">
                    <p>皖公网安备 34150202000132号</p>
                </div>
            </div>
            <div class="rt">
                <ul>
                    <li>
                        <SElect>
                <OPTION selected>信息服务</OPTION>
                <OPTION>——————————</OPTION>
                <OPTION>校园信息门户</OPTION>
                <OPTION>校务周表</OPTION>
                <OPTION>信息化建设与管理中心</OPTION>
                <OPTION>电子邮箱</OPTION>
                <OPTION>统一身份认证</OPTION>
                <OPTION>心理中心</OPTION>
                <OPTION>校园卡服务</OPTION>
                <OPTION>校长信箱</OPTION>
                <OPTION>网上报修</OPTION>
                    </SElect>
                    </li>
                    <li>
                        <SElect>
                <OPTION selected>院点站系</OPTION>
                <OPTION>——————————</OPTION>
                <OPTION>材料与化工学院</OPTION>
                <OPTION>电气与光电工程学院</OPTION>
                <OPTION>电子与信息工程学院</OPTION>
                <OPTION>法学院</OPTION>
                <OPTION>环境与旅游学院</OPTION>
                <OPTION>机械与车辆管理学院</OPTION>
                <OPTION>建筑与土木工程学院</OPTION>
                <OPTION>金融与数学学院</OPTION>
                <OPTION>经济与管理学院</OPTION>
                <OPTION>生物与制药工程学院</OPTION>
                <OPTION>体育学院</OPTION>
                <OPTION>外国语学院</OPTION>
                <OPTION>文化与传媒学院</OPTION>
                <OPTION>艺术学院</OPTION>
                <OPTION>马克思主义学院</OPTION>
                <OPTION>实验实训教学管理部</OPTION>
                    </SElect>
                    </li>
                    <li>
                        <SElect>
                <OPTION selected>部门站点</OPTION>
                <OPTION>——————————</OPTION>
                <OPTION>党委（校长）办公室</OPTION>
                <OPTION>党委组织部（党校）</OPTION>
                <OPTION>党委宣传（统战）部</OPTION>
                <OPTION>纪委办公室</OPTION>
                <OPtion>党委巡查办公室</OPtion>
                <OPTION>审计处</OPTION>
                <OPTION>党委教师工作部（人事部）</OPTION>
                <OPTION>教务处</OPTION>
                <OPTION>学生工作处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <OPTION>科研处</OPTION>
                <option></option>
                <option></option>
                    </SElect>
                    </li>
                    <li>
                        <SElect>
                <OPTION selected>常用站点</OPTION>
                <OPTION>——————————</OPTION>
                <OPTION>国家教育部</OPTION>
                <OPTION>省教育厅</OPTION>
                <OPTION>中国教育科研网</OPTION>
                <OPTION>新华网</OPTION>
                <OPTION>人民网</OPTION>
                <OPTION>新浪网</OPTION>
                <OPTION>搜狐网</OPTION>
                <OPTION>网易</OPTION>
                <OPTION>凤凰网</OPTION>
                <OPTION>百度搜索</OPTION>
                <OPTION>六安市政府网</OPTION>
                    </SElect>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底栏结束 -->
</body>

</html>

·························································································································

哈，原谅我没有写注释。。。（这是一个不好的习惯，以后会改的）

第一天先运用“html和css”搭配使用，构建出学校网站大概模样。接下来是Css部分了。
···········································································································································································································································································································································································

CSS部分：

源码:

* {
    
    
    margin: 0;
    padding: 0;
}

a {
    
    
    text-decoration: none;
    color: #000;
}

li {
    
    
    list-style: none;
}

input {
    
    
    outline: none;
}

select {
    
    
    width: 150px;
    height: 33px;
    border: 1px #3f70ab solid
}

element.style {
    
    
    width: 153px;
}

.w {
    
    
    width: 1200px;
    margin: 0 auto;
    /* background-color: pink; */
}

.clearfix:before,
.clearfix:after {
    
    
    content: "";
    display: table;
}

.clearfix:after {
    
    
    clear: both;
}

.clearfix {
    
    
    *zoom: 1;
}

.language {
    
    
    background-color: rgb(3, 42, 128);
    font-family: "Microsoft Yahei";
}

.language ul li {
    
    
    float: right;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
}

.language ul li a:haver {
    
    
    background-color: #bfdaf5;
}

.language ul li a {
    
    
    color: rgb(216, 215, 215);
    font-size: 14px;
}


/* 语言栏结束 */

.logo_nav {
    
    
    padding: 5px;
    background-color: rgb(16, 83, 164);
}

.logo {
    
    
    display: inline-block;
    width: 248px;
    height: 66px;
}

.logo_nav .search {
    
    
    float: right;
}

.search ul img {
    
    
    float: right;
    margin-top: 22px;
}

.search ul li {
    
    
    float: right;
    line-height: 60px;
    padding: 5px 10px;
}

.search ul li a {
    
    
    font-size: 13px "Microsoft Yahei";
    color: #bfdaf5;
}

.text {
    
    
    margin-left: 15px;
    width: 203px;
    height: 26px;
    background-color: rgb(16, 83, 164);
    border-top: 1px solid rgb(59, 115, 176);
    border-bottom: 1px solid rgb(59, 115, 176);
    border-left: 1px solid rgb(59, 115, 176);
    color: rgb(59, 115, 176);
}

.search ul .last {
    
    
    margin-right: 0;
    padding: 5px 0;
}


/* logo栏结束 */

.big_nav {
    
    
    border-top: 1px solid rgb(59, 115, 176);
    background-color: rgb(16, 83, 164);
}

.nav ul li {
    
    
    float: left;
    width: 83px;
    height: 43px;
    padding: 0 12px;
    border-right: 1px solid rgb(59, 115, 176);
    text-align: center;
}

.nav ul li a:hover {
    
    
    color: sandybrown;
}

.nav ul li a {
    
    
    font: 17px "Microsoft Yahei";
    color: #fff;
    line-height: 43px;
}

.nav ul .last {
    
    
    border-right: 0;
}


/* 导航栏结束 */

.hot {
    
    
    position: relative;
    width: 1200px;
    height: 302px;
    margin-bottom: 20px;
}

.hot img {
    
    
    width: 100%;
}

.hot .dot_box {
    
    
    position: absolute;
    left: 600px;
    bottom: 10px;
}

.dot_box ul li {
    
    
    float: left;
}

.hot .dot {
    
    
    width: 8px;
    height: 8px;
    margin: 5px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 5px;
}

.hot .dot:hover {
    
    
    background-color: #fff;
}


/* 热点栏结束 */

.new a:hover {
    
    
    color: steelblue;
}

.left {
    
    
    float: left;
    width: 365px;
    height: 364px;
    margin-right: 50px;
    margin-bottom: 40px;
}

.left .hd {
    
    
    height: 40px;
}

.left .hd span {
    
    
    line-height: 40px;
    font: 24px "Microsoft Yahei";
    color: #216688;
}

.left .bd {
    
    
    display: inline-block;
    border-top: 3px solid#e9bd29;
}

.left img {
    
    
    width: 100%;
}

.left h3 {
    
    
    margin: 10px 0px;
}

.left .ft {
    
    
    width: 325px;
}


/* 左侧新闻结束 */

.center {
    
    
    width: 365px;
    float: left;
    margin-right: 50px;
    margin-bottom: 40px;
}

.center .hd {
    
    
    height: 40px;
    text-align: right;
    border-bottom: 3px solid rgb(4, 66, 182);
    font: 15px "宋体";
}

.center .hd a {
    
    
    line-height: 40px;
    color: #888888;
    font-weight: 700;
}

.center .bd ul li {
    
    
    height: 34px;
    line-height: 34px;
}

.center .bd ul div {
    
    
    display: inline-block;
    font: 14px "Microsoft Yahei";
}

.center .bd ul span {
    
    
    float: right;
}


/* 中间新闻结束 */

.right {
    
    
    width: 365px;
    float: left;
    margin-bottom: 40px;
}

.right .hd {
    
    
    height: 40px;
    text-align: right;
    border-bottom: 3px solid #e9bd29;
    font: 15px "宋体";
}

.right .hd span {
    
    
    float: left;
    line-height: 40px;
    font-weight: 400px;
    font: 24px "Microsoft Yahei";
}

.right .hd a {
    
    
    float: right;
    line-height: 40px;
    color: #888888;
    font-weight: 700;
}

.right .hd span {
    
    
    line-height: 40px;
    font: 24px "Microsoft Yahei";
    color: #216688;
}

.right .bd ul li {
    
    
    height: 34px;
    line-height: 34px;
}

.right .bd ul div {
    
    
    display: inline-block;
    font: 14px "Microsoft Yahei";
}

.right .bd ul span {
    
    
    float: right;
}


/* 右侧新闻结束 */

.bottom_left {
    
    
    float: left;
    width: 365px;
    margin-right: 50px;
}

.bottom_left .hd {
    
    
    height: 40px;
    text-align: right;
    border-bottom: 3px solid #e9bd29;
    font: 15px "宋体";
}

.bottom_left .hd span {
    
    
    float: left;
    line-height: 40px;
    font-weight: 400px;
    font: 24px "Microsoft Yahei";
}

.bottom_left .hd a {
    
    
    float: right;
    line-height: 40px;
    color: #888888;
    font-weight: 700;
}

.bottom_left .hd span {
    
    
    line-height: 40px;
    font: 24px "Microsoft Yahei";
    color: #216688;
}

.bottom_left .bd ul li {
    
    
    height: 34px;
    line-height: 34px;
}

.bottom_left .bd ul div {
    
    
    display: inline-block;
    font: 14px "Microsoft Yahei";
}

.bottom_left .bd ul span {
    
    
    float: right;
}


/* 下——左新闻结束 */

.bottom_center {
    
    
    float: left;
    width: 365px;
    margin-right: 50px;
}

.bottom_center .hd {
    
    
    height: 40px;
    text-align: right;
    border-bottom: 3px solid rgb(4, 66, 182);
    font: 15px "宋体";
}

.bottom_center .hd span {
    
    
    float: left;
    line-height: 40px;
    font-weight: 400px;
    font: 24px "Microsoft Yahei";
}

.bottom_center .hd a {
    
    
    float: right;
    line-height: 40px;
    color: #888888;
    font-weight: 700;
}

.bottom_center .hd span {
    
    
    line-height: 40px;
    font: 24px "Microsoft Yahei";
    color: #216688;
}

.bottom_center .bd ul li {
    
    
    height: 34px;
    line-height: 34px;
}

.bottom_center .bd ul div {
    
    
    display: inline-block;
    font: 14px "Microsoft Yahei";
}

.bottom_center .bd ul span {
    
    
    float: right;
}


/* 下——中新闻结束 */

.bottom_right {
    
    
    float: left;
    width: 365px;
}

.bottom_right .hd {
    
    
    height: 40px;
    text-align: right;
    border-bottom: 3px solid #e9bd29;
    font: 15px "宋体";
}

.bottom_right .hd span {
    
    
    float: left;
    line-height: 40px;
    font-weight: 400px;
    font: 24px "Microsoft Yahei";
    color: #216688;
}

.bottom_right .bd .link {
    
    
    float: left;
    text-align: center;
    padding: 20px;
    margin: 10px 8px;
}

.bottom_right .bd .link_last {
    
    
    float: left;
    text-align: center;
    padding: 20px 28px;
    margin: 10px 8px;
}

.bottom_right .bd .link>a {
    
    
    display: inline-block;
    margin: 0 auto;
}

.bottom_right .bd .link .normal {
    
    
    display: inline-block;
    margin: 0 auto;
    font-style: normal;
}

.bottom_right .bd a img {
    
    
    width: 40px;
    height: 40px;
}


/* 新闻栏结束 */

.footer {
    
    
    background-color: rgb(16, 83, 164);
    font-size: 12px;
    height: 100px;
    padding: 20px 0;
}

.footer .lt {
    
    
    float: left;
    color: #dddddd;
    font-family: "MicroSoft Yahei";
}

.footer .lt .big_img img {
    
    
    float: left;
}

.footer .lt .small_img img {
    
    
    float: left;
    margin-top: 6px;
}

.footer .lt .beian {
    
    
    float: left;
    margin-top: 10px;
}

.footer .rt {
    
    
    float: right;
    width: 700px;
    margin: 0 0 0 30px;
}

.footer .rt select {
    
    
    float: left;
    padding: 5px 5px;
    margin: 8px;
    background-color: rgb(16, 83, 164);
    color: rgb(216, 215, 215);
    font-size: 14px;
}

.footer .rt select option {
    
    
    height: 100px;
    overflow: scroll;
}

·························································································································
这里面博主编写的时候也遇到了一些困难，不过都慢慢解决了，至于体会与心得，由于时间仓促，这里就不一一和大家分享了。之后我会发一篇博客来专门讲述的（要是忘了的话，那就当我没说，哈哈哈。。。想看粉丝（如果有）可以给我留言哦！）
好了，到这里基本的结构就完成了。嗯，别问JS（JavaScript）的内容呢？因为博主现在还没有看哈哈哈~不过我会尽量快速把它学习完的。
本次就到这里了！期待博主的下一篇博客吧！
·························································································································
ps：博主一定尽快学习完JavaScript的内容的。

猜你喜欢

转载自blog.csdn.net/weixin_44376552/article/details/109278409
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022