简单的网页（理工大）

一、div制作网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>山东理工大学</title>
        <link rel="stylesheet" type="text/css" href="山东理工大学.css"/>
    </head>
    <body>
        <div id="back">
            <div id="button">
                <div class="secondButton">在校生+</div>
                <div class="secondButton">教职工+</div>
                <div class="secondButton">考生+</div>
                <div class="secondButton">校友+</div>
            </div>
            <div id="clear"></div>
            <div id="boxSecond">
                <div id="search"><img src="../image/搜索.png"></div> 
                <div id="input"><input type="text" name="search" placeholder=""></div>
            </div>
        </div>
        <HR align=center width=100% color=gray SIZE=1>
        <div id="box">
            <div class="navList">首页</div>
            <div class="navList">新闻网</div>
            <div class="navList">学校概况</div>
            <div class="navList">机构设置</div>
            <div class="navList">师资队伍</div>
            <div class="navList">科学研究</div>
            <div class="navList">人才培养</div>
            <div class="navList">招生就业</div>
            <div class="navList">大学文化</div>
            <div class="navList">国际交流</div>
            <div class="navList">校友联谊</div>
        </div>
        <div id="picture"><img src="../image/长图.jpg" width="100%"></div>
        <div id="best">
            <div class="center">
                <div class="title1">
                    <div class="z">
                        学校要闻
                    </div>
                    <div class="y">
                        [更多]
                    </div>
                </div>
                <div id="clear"></div>
                <div id="jb"></div>
                <div id="d">淄博市委书记江郭涛一行来校调研</div>
                <div id="--">--</div>
                <div id="text1">
                    本网讯　10月21日上午，淄博市委书记江敦涛来校调研，
                    实地参观考察并进行座谈交流，我校党委书记吕传毅，党
                    委副书记、校长张铁柱，党委常委、副校长刘国华、王立
                    斌、易维明，淄博市委常委、秘书长毕司东，市委常委、
                    组织部长高庆波，市委常委、副市长杨洪涛，我校和淄博
                    市相关部门负责人，专家学者参加调研活动。
                </div>
                <div id="T1">
                    <div class="text2"><li>学校召开科研体制机制改革措施宣讲会</li> </div>
                    <div class="text2"><li>“守初心、担使命”身边的榜样典型事迹座谈会召开</li> </div>
                    <div class="text2"><li>吕传毅就党支部建设工作进行个别访谈</li> </div>
                    <div class="text2"><li>吕传毅会见英国格林威治大学客人</li> </div>
                    <div class="text2"><li>稷下学派文献整理与数据库建设研究开题论证会举行</li> </div>
                    <div class="text2"><li>“为科研人员放权让利、松绑减负”</li> </div>
                </div>
                <div class="title1">
                    <div class="z">
                        媒体报道
                    </div>
                    <div class="y">
                        [更多]
                    </div>
                </div>
                <div id="clear"></div>
                <div id="jb"></div>
                <div id="T2">
                    <div class="text2">
                        <li>CCTV-2《对话》：四亿身家教授是怎样炼成的？（20190721） </li>
                    </div>
                    <div class="text2">
                        <li>淄博市委书记江敦涛来山理工调研提出：大学是城市重要的创新源 </li>
                    </div>
                    <div class="text2">
                        <li>红色剧目进校园，这出五音戏是根据山东理工大学党委书记吕传毅诗歌改编！ </li>
                    </div>
                    <div class="text2">
                        <li>淄博市委书记江敦涛到山东理工大学调研 </li>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="title1">
                    <div class="z">
                        图说理工
                    </div>
                    <div id="x">
                        视频理工
                    </div>
                </div>
                <div id="clear"></div>
                <div id="jb"></div>
                <div id="T3">
                    <div id="pic">
                        <img src="../image/中间图.jpg" width="300px">
                    </div>
                </div>
                <div class="title1">
                    <div class="z">
                        综合新闻
                    </div>
                    <div class="y">
                        [更多]
                    </div>
                </div>
                <div id="clear"></div>
                <div id="jb"></div>
                <div id="T4">
                    <div class="text2">
                        <li>文明校园建设推进会召开</li>
                    </div>
                    <div class="text2">
                        <li>学校科研人员热议“六个文件” </li>
                    </div>
                    <div class="text2">
                        <li>学校举行国家社科基金项目申报第二次推进会 </li>
                    </div>
                    <div class="text2">
                        <li>宋元达教授专题获泰山学术论坛资助 </li>
                    </div>
                    <div class="text2">
                        <li>计算机学子在全国高校数字艺术设计大赛中获奖</li>
                    </div>
                    <div class="text2">
                        <li>我校来华留学质量认证工作正式启动</li>
                    </div>
                    <div class="text2">
                        <li>我校新增农业工程、电气工程两个博士后科研流动站</li>
                    </div>
                    <div class="text2">
                        <li> 李平入选国家百千万人才工程 </li>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="title1">
                    <div class="z">
                        学术活动
                    </div>
                    <div class="y">
                        [更多]
                    </div>
                </div>
                <div id="clear"></div>
                <div id="jb"></div>
                <div id="List">
                    <div id="nnn"></div>
                    <div class="n">
                        <div class="n1"><img src="../image/shi.jpg" ></div>
                        <div class="n2">
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                        </div>
                    </div>
                    <div id="ns"></div>
                    <div class="n">
                        <div class="n1"><img src="../image/shi.jpg" ></div>
                        <div class="n2">
                            <p>建国70年的山东社会发展：理论、方法、
                            与实践——山东省社会学学会2019年学术年会</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                        </div>
                    </div>
                    <div id="ns"></div>
                    <div class="n">
                        <div class="n1"><img src="../image/shi.jpg" ></div>
                        <div class="n2">
                            <p>国家社科基金项目“法国国家图书馆藏稀见中文古籍研究”开题</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                        </div>
                    </div>
                    <div id="ns"></div>
                    <div class="n">
                        <div class="n1"><img src="../image/shi.jpg" ></div>
                        <div class="n2">
                            <p>国家自然科学基金申请书撰写与申报</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                            <p>“在场·锐见”——胡学文长篇小说《麦子的盖头》研讨会</p>
                        </div>
                    </div>
                    <div id="ns"></div>
                </div>
                <div id="fg"></div>
                <div class="title1">
                    <div class="z">
                        专题·公告
                    </div>
                    <div class="y">
                        [更多]
                    </div>
                </div>
                <div id="clear"></div>
                <div id="jb"></div>
                <div id="T4">
                    <div class="text2">
                        <li>山东理工大学诚聘海内外高层次人才启事</li>
                    </div>
                    <div class="text2">
                        <li>山东理工大学2020年招收攻读硕士学位研究生招生简章</li>
                    </div>
                    <div class="text2">
                        <li>山东理工大学2020年硕士研究生招生专业目录</li>
                    </div>
                    <div class="text2">
                        <li>山东理工大学“两学一做”学习教育网站</li>
                    </div>
                </div>
            </div>
        </div>
        <div id="button1">
            <div class="under">图书馆</div>
            <div class="under">信息公开</div>
            <div class="under">招标采购</div>
            <div class="under">服务大厅</div>
            <div class="under">邮件系统</div>
            <div class="under">校园VPN</div>
            <div class="under">在线学习</div>
            <div class="under">站点导航</div>
        </div>
        <div id="button2"></div>
    </body>
</html>

css：

            *{
                margin: 0 auto;
                padding: 0;
            }
            #clear{
                height: 1px;
                clear: both;
            }
            #jb{
                height: 1px;
                width: 300px;
                background: linear-gradient(to right, red,purple 50%, blue);
            }
            .secondButton{
                color: #6E6E6E;
                float: right;
                font-size: 12px;
                margin-top: 60px;
                margin-right: 7px;
                
            }
            input{
                line-height: 28px;
                padding:0 0 0 10px;
            }
            #boxSecond{
                width: 300px;
                height:30px;
                float: right;
            }
            #input{
                height: 30px;
                float:right;
                padding:0 0 0 20px;
                border: 0;
            }
            #search{
                height: 30px;
                float:right;
                color: white;
                line-height: 30px;
                cursor: pointer;
            }
            #box{
                width: 83%;
                margin: auto;
                height: 50px;
            }
            .navList{
                color: #6E6E6E;
                height:50px;
                text-align: center;
                line-height: 50px;
                float: left;
                margin-left: 3.5%;
                display:inline;
            }
            .navList:hover{
                cursor: pointer;
                color: darkgray;
            }
            #back{
                width: 80%;
                height:130px;
                margin: auto;
                background-image: url(../image/山东理工大学.png);
                background-size: 100% 100%;
            }
            #best{
                width: 80%;
                height: 700px;
            }
            .center{
                width:300px;
                height:700px;
                float: left;
                margin-left: 45px;
            }
            #button1{
                width:80%;
                height:45px;
                color: #6E6E6E;
            }
            .under{
                float: left;
                margin:0 10px 0 55px;
                text-align: center;
                line-height: 45px;
            }
            #button2{
                width:100%;
                height:90px;
                background-image: url(../image/底部.png);
            }
            .z{
                width: 70px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                float: left;
            }
            .y{
                width: 45px;
                font-size: 14px;
                color: red;
                float:right;
                line-height: 30px;
            }
            #d{
                color: #2875DF;
                font-weight:bold;
                text-align:center;
                line-height: 30px;
                font-size: 15px;
            }
            #--{
                text-align: center;
                line-height: 21px;
                height: 21px;
            }
            #text1{
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:3;
                overflow: hidden;
                text-indent:2em;
                text-indent: ;
                font-size: 14px;
                margin-top: 10px;
                height: 60px;
                font-family: "微软雅黑";
                color: #6E6E6E;
            }
            #T1{
                height: 300px;
            }
            #T2{
                margin-top: 5px;
            }
            .text2{
                margin-top: 5px;
                height: 40px;
                line-height: 40px;
                font-size: 13px;
                color: #6E6E6E;
                border-bottom: 1px dashed #A9A9A9;
            }
            li{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                list-style: inside;
                list-style-type: square;
            }
            .hongbiao{
                font-size: 14px;
                float: left;
                color: red;
            }
            #x{
                width: 70px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                float: left;
                margin-left: 20px;
            }
            #T3{
                height: 232px;
            }
            #pic{
                margin-top: 10px;
            }
            #nnn{
                height: 7.4px;
            }
            #ns{
                height: 7.4px;
                border-bottom: 1px dashed #A9A9A9;
            }
            .n{
                margin-top: 7.5px;
                height: 81px;
            }
            .n1 img{
                width: 50px;
                height: 50px;
                margin-top: 16px;
                float: left;
                }
            .n2{
                width: 240px;
                height: 81px;
                float: right;
                font-size: 12px;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:4;
                overflow: hidden;
            }
            #fg{
                height: 30px;
            }
            p{
                white-space: nowrap;
                height: 26px;
                margin-left: 0px;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:1;
                overflow: hidden;
                font-size: 12px;
            }

 

效果图

posted @ 2019-10-31 15:35  墨染千城  阅读(347)  评论(0)    收藏  举报