利用css布局效果图
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>山东理工大学</title> 6 <link rel="shortcut icon" href="images/图标.ico"> 7 <link rel="stylesheet" href="css/ligongda neirong.css"> 8 </head> 9 10 <body> 11 <div id="head"> 12 <div class="a33 head-div"> 13 <img class="img" src="images/20171226133839.jpg"> 14 <div class="head_d"> 15 <div class="hdd hdd1"> 16 <div class="hdd1-div"> 17 <a class="q12" href="#">在校生</a> 18 <span>+</span> 19 <a class="q12" href="#">教职工</a> 20 <span>+</span> 21 <a class="q12" href="#">考生</a> 22 <span>+</span> 23 <a class="q12" href="#">校友</a> 24 <span>+</span> 25 <a href="#">访客</a> 26 <span>+</span> 27 </div> 28 </div> 29 <div class="hdd hdd2"> 30 <input class="hdd2-text" type="text" placeholder="请输入关键字"> 31 <input class="hdd2-img" type="image" src="images/20171226145938.jpg"> 32 </div> 33 </div> 34 </div> 35 </div> 36 <div id="nav"> 37 <div class="nav-div"> 38 <ul> 39 <li><a href="#">首页</a></li> 40 <li><a href="#">新闻网</a></li> 41 <li><a href="#">学校概况</a></li> 42 <li><a href="#">机构设置</a></li> 43 <li><a href="#">师资队伍</a></li> 44 <li><a href="#">科学研究</a></li> 45 <li><a href="#">人才培养</a></li> 46 <li><a href="#">招生就业</a></li> 47 <li><a href="#">大学文化</a></li> 48 <li><a href="#">国际交流</a></li> 49 <li><a href="#">校友联谊</a></li> 50 </ul> 51 </div> 52 </div> 53 <div id="lunbo"> 54 <img src="images/20171226155301.jpg" alt="" width="100%" height="280"> 55 </div> 56 <div > 57 <div id="neirong"> 58 <div class="a3 nei1"> 59 <div class="one1"> 60 <div class="one123"> 61 <div> 62 <ul class="ul-1"> 63 <li class="li1"><b>学校新闻</b></li> 64 <li class="li2">【更多】</li> 65 </ul> 66 </div> 67 <div> 68 <img class="ul-2" src="../2017.12.20/20171223100830.jpg"> 69 </div> 70 <div class="q235"> 71 <h4 class="a11">山东理工大学思想政治教育研究会成立</h4> 72 <h5 class="aqq">--</h5> 73 <p class="p"> 74 <span class="span">本网讯12月19日上午，山东理工大学思想政治教育研究会成立大会在鸿远楼一楼报告厅举行。校领导吕传毅、胡兴禹、张祥云、魏修亭、张金生出席... 75 </span> 76 <span class="span">[详细]</span> 77 </p> 78 </div> 79 <div class="qwe"> 80 <ul class="ul18"> 81 <li><span>我校全讲党的十九大精神</span><span class="a2">12-15</span> </li> 82 <li><span>凯莱希模特见面会在我校...</span><span class="a2">12-21 </span></li> 83 <li><span>学校一技术创新取得突破性成果</span> <span class="a2">12-20 </span></li> 84 <li><span>科研体制改革试点工作</span><span class="a2">12-18</span></li> 85 <li><span>校党委副书记鲁东大学调研</span><span class="a2">12-18</span></li> 86 <li><span>山东建筑存礼一行来访</span> <span class="a2">12-15</span></li> 87 </ul> 88 </div> 89 </div> 90 </div> 91 <div class="one2"> 92 <div> 93 <ul class="ul-1"> 94 <li class="li1"><b>通知公告</b></li> 95 <li class="li2">【更多】</li> 96 </ul> 97 </div> 98 <div> 99 <img class="ul-2" src="../2017.12.20/20171223100830.jpg"> 100 </div> 101 <div> 102 <ul class="ul20"> 103 <li><span>2018年招收攻读硕士学位研究生招生简章</span></li> 104 <li><span>2018年全国硕士研究生招生考试公告</span></li> 105 <li><span class="a521">诚聘海内外高层次人才启事</span></li> 106 </ul> 107 </div> 108 </div> 109 </div> 110 <div class="a3 nei2"> 111 <div class="one3"> 112 <div> 113 <ul class="ul-1"> 114 <li class="li5"><b>图说理工 视频理工</b></li> 115 </ul> 116 </div> 117 <div> 118 <img class="ul-2" src="../2017.12.20/20171223100830.jpg"> 119 </div> 120 <div> 121 <img class="ul-8" src="../2017.12.23/75f32f9d-1bc1-4e0f-a516-90961e5eb8c4.jpg" width="100% "> 122 </div> 123 </div> 124 <div class="one4"> 125 <div> 126 <ul class="ul-1"> 127 <li class="li1"><b>媒体报道</b></li> 128 <li class="li2">【更多】</li> 129 </ul> 130 </div> 131 <div> 132 <img class="ul-2" src="../2017.12.20/20171223100830.jpg"> 133 </div> 134 <div> 135 <ul class="ul20"> 136 <li><span>〖凤凰网〗山东理工的发明专利，竟卖...</span></li> 137 <li><span>〖山东省教育厅〗对接交流科研体制改...</span></li> 138 <li><span>〖光明网〗山东理工大学第二届驻校作家入校</span></li> 139 <li><span>〖山东省教育厅〗山理工十九大精神走进全...</span></li> 140 <li><span>〖山东省教育厅〗山理工出台课堂课程思政</span></li> 141 <li><span>〖大众网〗山东足协首个与高校共建足...</span></li> 142 <li><span>〖鲁中网〗淄博三企业在山东理工大学.</span></li> 143 </ul> 144 </div> 145 </div> 146 </div> 147 <div class="a3 nei3"> 148 <div class="one5"> 149 <div> 150 <ul class="ul-1"> 151 <li class="li1"><b>学术活动</b></li> 152 <li class="li2">【更多】</li> 153 </ul> 154 </div> 155 <div> 156 <img class="ul-2" src="../2017.12.20/20171223100830.jpg"> 157 </div> 158 <table width="100%" id="a123"> 159 <tr > 160 <td class="wq1"> 161 <img src="../2017.12.23/11.png"> 162 </td> 163 <td> 164 <ul class="as1"> 165 <li class="w123">化学与物理方法相结合的固...</li> 166 <li> 主讲:吕喆教授</li> 167 <li>地点:13号教学楼404</li> 168 </ul> 169 </td> 170 </tr> 171 <tr> 172 <td class="wq1"> 173 <img src="../2017.12.23/11.png"> 174 </td> 175 <td> 176 <ul class="as1"> 177 <li class="w123">电子显微技术在材料物理与... </li> 178 <li>主讲:秦禄昌教授</li> 179 <li>地点:12号教学楼340室</li> 180 </ul> 181 </td> 182 </tr> 183 <tr> 184 <td class="wq1"> 185 <img src="../2017.12.23/11.png"> 186 </td> 187 <td> 188 <ul class="as1"> 189 <li class="w123">近十三年来国家基金资助建... </li> 190 <li>主讲:曹伟教授</li> 191 <li>地点:12号教学楼340室</li> 192 </ul> 193 </td> 194 </tr> 195 <tr> 196 <td class="wq1"> 197 <img src="../2017.12.23/11.png"> 198 </td> 199 <td> 200 <ul class="as1"> 201 <li class="w123">Energy storage device de...</li> 202 <li>主讲:梁培副教授</li> 203 <li>地点:13号教学楼404室</li> 204 </ul> 205 </td> 206 </tr> 207 </table> 208 </div> 209 <div class="one6"> 210 <div> 211 <ul class="ul-1"> 212 <li class="li1"><b>通知公告</b></li> 213 <li class="li2">【更多】</li> 214 </ul> 215 </div> 216 <div> 217 <img class="ul-2" src="../2017.12.20/20171223100830.jpg"> 218 </div> 219 <div> 220 <ul class="ul20"> 221 <li><span>山东理工大学“审核评估评建”专题网站</span></li> 222 <li><span>山东理工大学“一精神”“一规划”专题</span></li> 223 <li><span>山东理工大学“两学一做”学习教育网站</span></li> 224 </ul> 225 </div> 226 </div> 227 </div> 228 </div> 229 </div> 230 <div id="dibudaohang"> 231 <div class="nav-divv"> 232 <ul class="qa1"> 233 <li><a href="#">图书馆</a><li class="e1">.</li></li> 234 <li><a href="#">信息公开</a><li class="e1">.</li></li> 235 <li><a href="#">招标采购</a><li class="e1">.</li></li> 236 <li><a href="#">办公系统</a><li class="e1">.</li></li> 237 <li><a href="#">邮件系统</a><li class="e1">.</li></li> 238 <li><a href="#">校园VPN</a><li class="e1">.</li></li> 239 <li><a href="#">在线学习</a><li class="e1">.</li></li> 240 <li><a href="#">在线导购</a><li class="e1">.</li></li> 241 </ul> 242 </div> 243 </div> 244 <div id="dibuxinxi"> 245 <img src="../2017.12.20/12.20/20171220162541.png" width="100%"> 246 </div> 247 </body> 248 </html>
1 /* CSS Document */ 2 *{ 3 margin: 0px; 4 padding: 0px; 5 } 6 .a33{ 7 width: 80%; 8 height: 100%; 9 background-color: bisque; 10 margin: 0 auto; 11 } 12 #head{ 13 width: 100%; 14 height: 125px; 15 } 16 .head-div{ 17 width: 1000px; 18 height: 125px; 19 background-image: url(../images/20171226113831.png); 20 position: relative 21 /*background-size: cover;*/ 22 } 23 .img{ 24 position: absolute; 25 left: 35.5%; 26 top: 58%; 27 } 28 .head_d{ 29 width: 270px; 30 height: 100%; 31 float: right; 32 } 33 .hdd{ 34 width: 100%; 35 height: 50%; 36 font-size: 12px; 37 } 38 .hdd1{ 39 position: relative; 40 } 41 .hdd1-div{ 42 position: absolute; 43 top: 34px; 44 cursor: pointer; 45 text-decoration: none; 46 } 47 .hdd1 a{ 48 color: #666666; 49 text-decoration: none; 50 } 51 .hdd1 a:hover{ 52 color: #CD0200; 53 } 54 .hdd1 span{ 55 color: #B0B0B0; 56 } 57 .hdd2{ 58 padding-left:60px; 59 box-sizing: border-box; 60 } 61 .hdd2-text{ 62 width: 155px; 63 height: 26px 64 } 65 .hdd2-img{ 66 top: 10px; 67 left: -7px; 68 position: relative; 69 } 70 #nav{ 71 width: 100%; 72 height: 50px; 73 background-color:white; 74 } 75 .nav-div{ 76 width: 80%; 77 height: 50px; 78 margin: 0 auto; 79 line-height: 50px; 80 border-top: 1px solid #ccc; 81 } 82 .nav-div ul{ 83 list-style-type: none; 84 } 85 .nav-div ul li:first-child{ 86 margin-left: 70px; 87 } 88 .nav-div ul li{ 89 float: left; 90 margin-right: 25px; 91 } 92 .nav-div ul li a{ 93 text-decoration: none; 94 color: #8888A5; 95 font-size: 16px; 96 } 97 #lunbo{ 98 width: 100%; 99 height: 280px; 100 } 101 #neirong{ 102 width: 960px; 103 height: 566px; 104 margin: 0 auto; 105 } 106 .one1,.one5{ 107 width: 100%; 108 height: 70%; 109 } 110 .one5{ 111 box-sizing: border-box; 112 } 113 .one2,.one6{ 114 width: 100%; 115 height: 30%; 116 } 117 .one3{ 118 width: 100%; 119 height: 48%; 120 } 121 .one4{ 122 width: 100%; 123 height: 52%; 124 } 125 .ul-2{ 126 line-height: 0px; 127 padding-top: -1cm; 128 font-size:#ccc; 129 margin-left: auto; 130 position: relative; 131 top: -8px; 132 } 133 .ul-1 li{ 134 list-style: none; 135 float: left; 136 padding-top: 0.5cm; 137 position: relative; 138 } 139 .li1{ 140 font-size:17px; 141 margin-right: 183px; 142 } 143 .li2{ 144 font-size:12px; 145 color: red; 146 } 147 .a11{ 148 text-align: center; 149 font-size: 15px; 150 line-height: 30px; 151 color: blue 152 } 153 .aqq{ 154 text-align: center 155 } 156 .p{ 157 color: #7A6666; 158 text-indent: 2em; 159 font-size: 6px; 160 text-align: left; 161 position: relative; 162 top: 13px; 163 } 164 p .span:hover{ 165 color: #CD0200; 166 cursor:pointer; 167 } 168 p .span{ 169 font-size: 16px; 170 } 171 .q235{ 172 border-bottom: 1px solid #ccc; 173 height: 140px; 174 } 175 .ul18{ 176 font-size: 14px; 177 position: relative; 178 top: 30px; 179 word-wrap: break-word; 180 list-style-position: inside; 181 margin-top: -15px; 182 } 183 .ul18 li span:first-child:hover{ 184 color: red; 185 } 186 .ul18 li{ 187 color: #7A6666; 188 height: 30px; 189 border-bottom: 1px dotted #ccc; 190 line-height: 30px; 191 cursor:pointer; 192 } 193 .a2:hover{ 194 color: #000000; 195 } 196 .ul20{ 197 font-size: 14px; 198 position: relative; 199 top: 10px; 200 word-wrap: break-word; 201 list-style-position: inside; 202 } 203 .ul20 li span:first-child:hover{ 204 color: red; 205 } 206 .ul20 li{ 207 color: #7A6666; 208 height: 30px; 209 border-bottom: 1px dotted #ccc; 210 line-height: 30px; 211 cursor:pointer; 212 } 213 .a521{ 214 color: red; 215 } 216 .ul-8{ 217 position: relative; 218 top: 15px; 219 } 220 #a123 td{ 221 border-bottom: 1px dotted #ccc; 222 line-height: 10px; 223 }s 224 ul li{ 225 226 } 227 .w123{ 228 color: #CCC; 229 } 230 .w123:hover{ 231 color: red; 232 } 233 .as1{ 234 line-height: 28px; 235 list-style-type: none; 236 } 237 .wq1{ 238 width: 80px; 239 text-align: center 240 } 241 #dibudaohang{ 242 width: 100%; 243 height: 37px; 244 } 245 .nav-divv{ 246 width: 100%; 247 height: 100%; 248 margin: 0 auto; 249 border-top: 1px solid #ccc; 250 } 251 .nav-divv ul li{ 252 float: left; 253 margin-right: 25px; 254 } 255 .nav-divv ul li a{ 256 text-decoration: none; 257 color:rgba(43,41,41,1.00); 258 font-size: 14px; 259 } 260 .nav-divv ul li:first-child{ 261 margin-left: 320px; 262 } 263 .e1{ 264 margin-right: 10px; 265 } 266 #dibuxinxi{ 267 width: 100%; 268 height: 90px; 269 background-color: aqua; 270 } 271 .qa1{ 272 list-style-type: none; 273 } 274 .a3{ 275 width: 33%; 276 height: 100%; 277 float: left; 278 } 279 .nei2,.nei3{ 280 margin-left: 0.5%; 281 } 282 .one5-1{ 283 border-style: none; 284 }
效果图：
