利用css布局效果图
![](/assets/blank.gif)
![](/assets/blank.gif)
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="data: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="data: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="data: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>
HTML代码
![](/assets/blank.gif)
![](/assets/blank.gif)
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 }
css样式
效果图:
转载于:https://www.cnblogs.com/1301694f/p/8127830.html
利用css布局效果图相关推荐
- html与css编程证书,利用CSS布局做一个简单的荣誉证书(代码示例)
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
- 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
- 利用css特性布局页面制作京东特价框
布局技巧:利用css特性去制作京东价格图框: 类似步骤: 1.首先制作一个四边形的样式,对高度和宽度进行设置,两者设置为0px 2.原来制作一个四边形里面的一个三角形部分采取的是对颜色设置transp ...
- 用html浮雕效果图,怎么利用css实现浮雕效果
怎么利用css实现浮雕效果 发布时间:2021-03-20 09:35:58 来源:亿速云 阅读:71 作者:小新 这篇文章主要介绍了怎么利用css实现浮雕效果,具有一定借鉴价值,感兴趣的朋友可以参考 ...
- html用css完成动画效果图,利用CSS Sprite实现PNG图片动画
利用CSS Sprite实现PNG图片动画 12月 6, 2012 评论 (6) Sponsor 如题,今天将会和大家讲解如何利用CSS Sprite(CSS雪碧)来实现PNG图片动画,就像GIF一样 ...
- bootstrap 垂直居中 布局_给你一份详细的CSS布局指南,请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...
- 给你一份详细的web前端CSS布局指南,请查收
我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
最新文章
- nginx rewrite和根据url参数location
- Linux 下 hosts 应用
- mysql查询结果单位换算后小数位数的保留方式
- java中上传文件有哪些框架,Spring MVC系列教材 (八)- SPRING MVC 上传文件
- db2 日期加减一天_常用SQL系列之(八):列值累计、占比、平均值以及日期运算等...
- 【Java入门】桌球小游戏
- ddr4服务器内存频率_金士顿DDR4-3200服务器内存通过完整测试
- Docker容器真的安全吗?
- 利用 cwRsync 实现代码(文件)同步的解决办法
- java 8-6 抽象的练习
- apk文件在window上查看
- 一个网站的建设步骤(写给新手)
- 毕业设计的一些小总结
- 判断分数是否为无限循环小数
- JavaScript事件与JQuery事件
- HTML5期末大作业:文采网站设计——个人书画作品展示(6个页面) HTML+CSS+JavaScript...
- 5.22 综合案例2.0-4G远程遥控车DEMO(2.2版本接口有更新)
- GStreamer1.0 工具用法
- 中文***测试专用Linux系统—MagicBox(魔方系统)
- js或者jQuery模拟点击提交按钮button,触发提交操作
热门文章
- SQL反模式笔记7——多列属性
- OriginPro 2021 for win 科学绘图软件最新版 中英文 完美稳定附下载安装使用教程
- 结对编程前对队友程序的分析与对比总结
- html表单php比较三个值大小,PHP比较三个数大小实现办法
- python爬虫 小白轻松从0到1_小白学 Python 爬虫(1):开篇
- 光流 | 基于Matlab实现Lucas-Kanade方法:方法1(附源代码)
- 计算机视觉与深度学习 | 使用HOG特征进行数字分类
- jdbc连接mysql视频_jdbc连接mysql数据库视频
- oracle中的存在函数吗,Oracle判断表是否存在的函数
- MySQL 笔记7 -- 权限操作与视图