落雨无晴
CSS练习

对山东理工大学的首页制作进行了练习

源代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>山东理工大学</title>
        <link rel="stylesheet" href="ligong.css">
    </head>

    <body>
        <div id="aaa">
            <div id="bbb"><img src="english-bg.jpg" alt="123" id="img1">
                <div id="ccc">
                    <div id="ddd">
                        <ul>
                            <li><a href="http://ehall.sdut.edu.cn/new/index.html" target="_blank" class="k1">在校生</a></li>
                            <li>+</li>
                            <li><a href="http://ehall.sdut.edu.cn/new/index.html" target="_blank" class="k1">教职工</a></li>
                            <li>+</li>
                            <li><a href="http://zszx.sdut.edu.cn/" target="_blank" class="k1">考生</a></li>
                            <li>+</li>
                            <li><a href="http://xy.sdut.edu.cn/" target="_blank" class="k1">校友</a></li>
                            <li>+</li>
                            <li><a href="http://xy.sdut.edu.cn/" target="_blank" class="k1">访客</a></li>
                            <li>+</li>
                        </ul>
                    </div>
                    <div id="eee">
                        <input type="text" placeholder="请输入关键字" id="fff">
                        <img src="sous-bg.jpg" alt="123" id="ggg">
                    </div>
                </div>
            </div>
            <hr style="width: 80%;margin-left: 135px">
            <div class="ul">
                <ul>
                    <li>首页</li>
                    <li>新闻网</li>
                    <li>学校概况</li>
                    <li>机构设置</li>
                    <li>师资队伍</li>
                    <li>科学研究</li>
                    <li>人才培养</li>
                    <li>招生就业</li>
                    <li>大学文化</li>
                    <li>国际交流</li>
                    <li>校友联谊</li>
                </ul>
            </div>
            <div id="hhh">
                <img src="a0d13181-accf-4838-8eda-1496d93c2942.jpg" alt="123" width="100%">
            </div>
            <div id="iii">
                <div id="a1">
                    <div id="b1">学校新闻</div>
                    <div id="b2">[更多]</div>
                    <div id="b3">让每一位教师都主动成为“驱动单元”</div>
                    <p align="center" id="b4"><a href="gwindow.sdut.edu.cn/2018/0608/c1058a181333/page.htm" target="_blank" class="k1">--——我校第二轮岗位聘用期满考核与...</a></p>
                    <div id="b6">
                    <p id="b5"><a href="http://lgwindow.sdut.edu.cn/2018/0608/c1058a181333/page.htm" target="_blank" class="k1">5月31日，当音乐学院刘楠老师从学校发布的《关于聘任方晓英等工作人员相应岗位的通知》中找到自己的名字，并看到对应的岗位等级为“8级”时...</a>[详细] </p>
                    </div>
                    <div>
                        <ul>
                            <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0504/c1058a170071/page.htm" target="_blank" class="k1">纪念改革开放40周年作品征集启事</a><span class="c2">05-04</span></li>
                            <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0608/c1058a181410/page.htm" target="_blank" class="k1">“善小”奖学金、助学金颁发仪式举行</a><span class="c2">06-08</span></li>
                            <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0608/c1058a181335/page.htm" target="_blank" class="k1">学校召开研究生工作会议</a><span class="c2">06-08</span></li>
                            <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0607/c1058a181299/page.htm" target="_blank" class="k1">学校颁发2018年研究生优秀成果单项奖</a><span class="c2">06-08</span></li>
                            <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0605/c1058a180447/page.htm" target="_blank" class="k1">2018代数图论国际前沿研讨会”举行</a><span class="c2">06-08</span></li>
                            <li class="c3"><a href="http://lgwindow.sdut.edu.cn/2018/0607/c1058a181288/page.htm" target="_blank" class="k1">学校举行巩固防治“吃空饷”问题工作会议</a><span class="c2">06-08</span></li>
                        </ul>
                    </div>
                    <div id="d1">通知公告</div>
                    <div id="d2">[更多]</div>
                    <div>
                        <ul>
                            <li class="c4"><a href="http://rshch.sdut.edu.cn/2017/1212/c204a104106/page.psp" target="_blank" class="k2">诚聘海内外高层次人才启事</a></li>
                        </ul>
                    </div>
                </div>
<!--第一竖栏-->
                <div id="a2">
                    <div id="e1">图说理工&nbsp;&nbsp;&nbsp;视频理工</div>
                    <div id="e2">[更多]</div>
                    <div>
                        <ul>
                            <li class="e3"><a href="http://www.sdut.edu.cn/2018/0608/c2365a185596/page.htm" target="_blank" class="k1">校园新闻2018年16期</a><span class="e4">06-08</span></li>
                            <li class="e3"><a href="http://www.sdut.edu.cn/2018/0601/c2365a178514/page.htm" target="_blank" class="k1">校园新闻2018年15期</a><span class="e4">06-01</span></li>
                            <li class="e3"><a href="http://www.sdut.edu.cn/2018/0525/c2365a177617/page.htm" target="_blank" class="k1">校园新闻2018年14期</a><span class="e4">05-25</span></li>
                            <li class="e3"><a href="http://www.sdut.edu.cn/2018/0518/c2365a171555/page.htm" target="_blank" class="k1">校园新闻2018年13期</a><span class="e4">05-18</span></li>
                            <li class="e3"><a href="http://www.sdut.edu.cn/2018/0512/c2365a170688/page.htm" target="_blank" class="k1">校园新闻2018年12期</a><span class="e4">05-12</span></li>
                            <li class="e3"><a href="http://www.sdut.edu.cn/2018/0504/c2365a170143/page.htm" target="_blank" class="k1">校园新闻2018年11期</a><span class="e4">05-04</span></li>
                            <li class="e3"><a href="http://www.sdut.edu.cn/2018/0427/c2365a169599/page.htm" target="_blank" class="k1">校园新闻2018年10期</a><span class="e4">04-27</span></li>
                        </ul>
                    </div>
                    <div id="e5">媒体报道</div>
                    <div id="e6">[更多]</div>
                    <div>
                        <ul>
                            <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0608/c1070a181413/page.htm" target="_blank" class="k1">山理工加强研究生基地建设管理构协同...</a></li>
                            <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0607/c1070a181280/page.htm" target="_blank" class="k1">山东省高校青年教师教学比赛决赛在山...</a></li>
                            <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0607/c1070a181281/page.htm" target="_blank" class="k1">山理工推出安全环保纸袋助力“限塑”...</a></li>
                            <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0607/c1070a181282/page.htm" target="_blank" class="k1">山理工动真碰硬集中治理违建建设和谐...</a></li>
                            <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0601/c1070a178511/page.htm" target="_blank" class="k1">山理工“第二课堂成绩单”助力“五有...</a></li>
                            <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0601/c1070a178512/page.htm" target="_blank" class="k1">山东理工大学成立科学技术协会推进科...</a></li>
                            <li class="e7">〖山东省教育厅〗<a href="http://lgwindow.sdut.edu.cn/2018/0601/c1070a178513/page.htm" target="_blank" class="k1">山理工成立新旧动能转换研究中心</a></li>
                        </ul>
                    </div>
                </div>
<!--第二栏结束-->
                <div id="a3">
                    <div id="f1">学术活动</div>
                    <div id="f2">[更多]</div>
                    <div id="f3">
                        <div class="l1">
                            <div class="l2">2018</div>
                            <div class="l3">06-09</div>
                        </div>
                        <div id="g1">
                            <p class="h1"><a href="http://www.sdut.edu.cn/2018/0608/c740a181955/page.htm" target="_blank" class="k1">科研团队建设与研究生培养</a></p>
                            <p class="h1">主讲:王利平教授 </p>
                            <p class="h1">地点:15号教学楼314 </p>
                        </div>
                    </div>
                    <div id="f4">
                        <div class="l1">
                            <div class="l2">2018</div>
                            <div class="l3">06-09</div>
                        </div>
                        <div id="g2">
                            <p class="h2"><a href="http://www.sdut.edu.cn/2018/0608/c740a181458/page.htm" target="_blank" class="k1">激光干涉测量技术</a></p>
                            <p class="h2">主讲:朱日宏教授 </p>
                            <p class="h2">地点:15号教学楼314</p>
                        </div>
                    </div>
                    <div id="f5">
                        <div class="l1">
                            <div class="l2">2018</div>
                            <div class="l3">06-09</div>
                        </div>
                        <div id="g3">
                            <p class="h3"><a href="http://www.sdut.edu.cn/2018/0605/c740a180438/page.htm" target="_blank" class="k1">Simultaneous Colorings o...</a></p>
                            <p class="h3">主讲:王维凡教授 </p>
                            <p class="h3">地点:15号教学楼430</p>
                        </div>
                    </div>
                    <div id="f6">
                        <div class="l1">
                            <div class="l2">2018</div>
                            <div class="l3">06-09</div>
                        </div>
                        <div id="g4">
                            <p class="h4"><a href="http://www.sdut.edu.cn/2018/0605/c740a180378/page.htm" target="_blank" class="k1">Linear 2-Arboricity of G...</a></p>
                            <p class="h4">主讲:王艺桥副教授</p>
                            <p class="h4">地点:15号教学楼430</p>
                        </div>
                    </div>
                    <div id="i1">学校新闻</div>
                    <div id="i2">[更多]</div>
                    <div>
                        <ul>
                            <li class="i3"><a href="http://lxyz.sdut.edu.cn/" target="_blank" class="k1">山东理工大学“两学一做”学习教育网站</a></li>
                            <li class="i3"><a href="http://lgwindow.sdut.edu.cn/qggxzzlm/list.psp" target="_blank" class="k1">山东理工大学“一精神”“一规划”专题</a></li>
                            <li class="i3"><a href="http://charter.sdut.edu.cn/" target="_blank" class="k1">山东理工大学“大学章程建设”专题网站</a></li>
                        </ul>
                    </div>
                </div>
<!--第三栏结束-->
            </div>
        </div>
        <div id="def"><hr>
            <div class="j1">
                <ul>
                    <li>图书馆</li>
                    <li>信息公开</li>
                    <li>招标采购</li>
                    <li>办公系统</li>
                    <li>邮件系统</li>
                    <li>校园VPN</li>
                    <li>在线学习</li>
                    <li>站点导航</li>
                </ul>
            </div>
        </div>
    </body>
</html>

 

CSS：

*{
    margin: 0px;
    padding: 0px;
 }
#aaa{
    max-width: 1680px;
    min-width: 1366px;
    width: 100%;
}

#bbb{
    width: 100%;
    height: 130px;
    background-image: url(head-bg.png);
    background-repeat: no-repeat;
    position: relative;
    left: 100px;
}
#ccc{
    width: 40%;
    height: 130px;
    float: right;
    position: relative;
    right: 100px;
}
#img1{
    position: relative;
    left: 350px;
    top: 65px;
    cursor: pointer;
}
li{
    float: left;
    font-family: "advent-pro";
    font-size: 0.85em;
    position: relative;
    top: 30px;
    left: 30px;
    margin: 3px;
}
#ddd{
    height: 65px;
}
#eee{
    height: 65px;
}
#fff{
    position: relative;
    left: 160px;
    width: 150px;
    height: 25px;
    top: 5px;
}
#ggg{
    position: relative;
    left: 156.5px;
    top: 15px;
    cursor: pointer;
}
#hhh{
    cursor: pointer;
}
.ul li{
    float: left;
    font-family: "advent-pro";
    font-size: 1em;
    position: relative;
    margin-left: 40px;
    left: 100px;
    top: 0px;
    cursor: pointer;
}
#iii{
    width: 90%;
    height:510px;
    margin: auto;
}
#a1{
    width: 33%;
    height:510px;
    float: left;
}
#a2{
    width: 33%;
    height: 510px;
    float: left;
}
#a3{
    width: 33%;
    height:510px;
    float:left;
}
#b1{
    float: left;
    width:  50%;
    position: relative;
    left: 40px;
    border-bottom: 1px solid;
    height: 30px;
}
#b2{
    float: right;
    width: 50%;
    text-align: right;
    position: relative;
    right: 20px;
    border-bottom: 1px solid;
    height: 30px;
    font-size: 10px;
}
#b3{
    width: 100%;
    height: 55px;
    text-align:center;
    cursor: pointer;
    color: #154CE3;
}
#b4{
    font-size: 0.6em;
    font-weight:bold;
}
#b5{
    font-size: 0.6em;
    text-indent: 20px;
    color: #787878;
}
#b6{
    width: 80%;
    height: 60px;
    margin: auto;
    border-bottom: 1px ridge;
}
.c2{
    float: right;
    top: 0px;
    font-size:0.8em;
}
.c3{
    width: 80%;
    margin: 5px;
    top: 0px;
    font-size: 0.8em;
    border-bottom: 1px ridge;
    list-style-type: square;
    list-style-position:inside;
    color: #787878;
}
#d1{
    float: left;
    width:  50%;
    position: relative;
    top: 10px;
    left: 40px;
    border-bottom: 1px solid;
    height: 30px;
}
#d2{
    float: right;
    width: 50%;
    text-align: right;
    position: relative;
    top: 10px;
    right: 20px;
    border-bottom: 1px solid;
    height: 30px;
    font-size: 10px;
}
.c4{
       width: 80%;
    margin: 5px;
    top: 15px;
    font-size: 0.8em;
    border-bottom: 1px ridge;
    list-style-type: square;
    list-style-position:inside;
    color: #787878;
}
#e1{
    float: left;
    width:  50%;
    position: relative;
    left: 40px;
    border-bottom: 1px solid;
    height: 30px;
}
#e2{
    float: right;
    width: 50%;
    text-align: right;
    position: relative;
    right: 20px;
    border-bottom: 1px solid;
    height: 30px;
    font-size: 10px;
}
.e3{
    width: 85%;
    margin: 1px;
    top: 0px;
    color: #787878;
    font-size: 0.8em;
    border-bottom: 1px ridge;
    list-style-image: url(sp.png);
    list-style-position:inside;
}
.e4{
    float: right;
    margin: 5px;
    font-size:0.8em;
}
#e5{
    float: left;
    width:  50%;
    position: relative;
    top: 10px;
    left: 40px;
    border-bottom: 1px solid;
    height: 30px;
}
#e6{
    float: right;
    width: 50%;
    text-align: right;
    position: relative;
    top: 10px;
    right: 20px;
    border-bottom: 1px solid;
    height: 30px;
    font-size: 10px;
}
.e7{
    width: 90%;
    margin: 5px;
    top:20px;
    font-size: 0.8em;
    border-bottom: 1px ridge;
    list-style-type: square;
    list-style-position:inside;
    color: #787878;
}
#f1{
    float: left;
    width:  50%;
    position: relative;
    left: 40px;
    border-bottom: 1px solid;
    height: 30px;
}
#f2{
    float: right;
    width: 50%;
    text-align: right;
    position: relative;
    right: 20px;
    border-bottom: 1px solid;
    height: 30px;
    font-size: 10px;
}
#f3{
    float: left;
    width: 80%;
    height: 80px;
    position: relative;
    left: 40px;
    background-image: url(shij-bg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    border-bottom: 1px ridge;
    list-style-type: square;
}
#f4{
    float: left;
    width: 80%;
    height: 80px;
    position: relative;
    left: 40px;
    background-image: url(shij-bg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    border-bottom: 1px ridge;
    list-style-type: square;
}
#f5{
    float: left;
    width: 80%;
    height: 80px;
    position: relative;
    left: 40px;
    background-image: url(shij-bg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    border-bottom: 1px ridge;
    list-style-type: square;
}
#f6{
    float: left;
    width: 80%;
    height: 80px;
    position: relative;
    left: 40px;
    background-image: url(shij-bg.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    border-bottom: 1px ridge;
    list-style-type: square;
}
#g1{
    width: 60%;
    height: 100%;
    position: relative;
    left: 25px;
    float: left;
}
.h1{
    font-size: 0.8em;
    position: relative;
    top: 15px;
}
#g2{
    width: 60%;
    height: 100%;
    position: relative;
    left: 25px;
    float: left;
}
.h2{
    font-size: 0.8em;
    position: relative;
    top: 15px;
}
#g3{
    width: 60%;
    height: 100%;
    position: relative;
    left: 25px;
    float: left;
}
.h3{
    font-size: 0.8em;
    position: relative;
    top: 15px;
}
#g4{
    width: 60%;
    height: 100%;
    position: relative;
    left: 25px;
    float: left;
}
.h4{
    font-size: 0.8em;
    position: relative;
    top: 15px;
}
#i1{
    float: left;
    width:  50%;
    position: relative;
    top: 10px;
    left: 40px;
    border-bottom: 1px solid;
    height: 30px;
}
#i2{
    float: right;
    width: 50%;
    text-align: right;
    position: relative;
    top: 10px;
    right: 20px;
    border-bottom: 1px solid;
    height: 30px;
    font-size: 10px;
}
.i3{
    width: 90%;
    margin: 5px;
    top:20px;
    font-size: 0.8em;
    border-bottom: 1px ridge;
    list-style-type: square;
    list-style-position:inside;
    color: #787878;
}
.j1{
    margin-left:auto;
    margin-right: auto;
    width: 80%;
    height: 100%;
}
#def{
    max-width: 1680px;
    min-width: 1366px;
    width: 100%;
    height: 30px;
}
.j1 li{
      list-style:none;
      float:left;
      margin-right: 70px;
      padding: 3px;
      position: relative;
      top: 5px;
      cursor: pointer;
}
a:hover{
    color: #EB0A0E;
}
.k1{
    color: #787878;
    text-decoration: none;
}
.k2{
    color:#EB0A0E;
    text-decoration: none;
}
.l1{
    width: 46px;
    height: 50px;
    float: left;
    position:relative;
    left:0px;
    top:15px;
}
.l2{
    text-align: center;
    width: 46px;
    height: 25px;
    color: white;
}
.l3{
    text-align: center;
    width: 46px;
    height: 25px;
    color:#02BBFD;
    font-size: 5px;
}

 

页面效果：

 

posted on 2018-06-10 16:01  落雨无晴  阅读(1077)  评论(0)  编辑  收藏  举报

Copyright © 2024 落雨无晴
Powered by .NET 9.0 on Kubernetes Powered By博客园