利用css布局效果图
生活随笔
收集整理的這篇文章主要介紹了
利用css布局效果图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>山東理工大學(xué)</title>
6 <link rel="shortcut icon" href="images/圖標(biāo).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="請輸入關(guān)鍵字">
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="#">新聞網(wǎng)</a></li>
41 <li><a href="#">學(xué)校概況</a></li>
42 <li><a href="#">機構(gòu)設(shè)置</a></li>
43 <li><a href="#">師資隊伍</a></li>
44 <li><a href="#">科學(xué)研究</a></li>
45 <li><a href="#">人才培養(yǎng)</a></li>
46 <li><a href="#">招生就業(yè)</a></li>
47 <li><a href="#">大學(xué)文化</a></li>
48 <li><a href="#">國際交流</a></li>
49 <li><a href="#">校友聯(lián)誼</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>學(xué)校新聞</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">山東理工大學(xué)思想政治教育研究會成立</h4>
72 <h5 class="aqq">--</h5>
73 <p class="p">
74 <span class="span">本網(wǎng)訊12月19日上午，山東理工大學(xué)思想政治教育研究會成立大會在鴻遠(yuǎn)樓一樓報告廳舉行。校領(lǐng)導(dǎo)呂傳毅、胡興禹、張祥云、魏修亭、張金生出席...
75 </span>
76 <span class="span">[詳細(xì)]</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>學(xué)校一技術(shù)創(chuàng)新取得突破性成果</span> <span class="a2">12-20 </span></li>
84 <li><span>科研體制改革試點工作</span><span class="a2">12-18</span></li>
85 <li><span>校黨委副書記魯東大學(xué)調(diào)研</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年招收攻讀碩士學(xué)位研究生招生簡章</span></li>
104 <li><span>2018年全國碩士研究生招生考試公告</span></li>
105 <li><span class="a521">誠聘海內(nèi)外高層次人才啟事</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>〖鳳凰網(wǎng)〗山東理工的發(fā)明專利，竟賣...</span></li>
137 <li><span>〖山東省教育廳〗對接交流科研體制改...</span></li>
138 <li><span>〖光明網(wǎng)〗山東理工大學(xué)第二屆駐校作家入校</span></li>
139 <li><span>〖山東省教育廳〗山理工十九大精神走進(jìn)全...</span></li>
140 <li><span>〖山東省教育廳〗山理工出臺課堂課程思政</span></li>
141 <li><span>〖大眾網(wǎng)〗山東足協(xié)首個與高校共建足...</span></li>
142 <li><span>〖魯中網(wǎng)〗淄博三企業(yè)在山東理工大學(xué).</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>學(xué)術(shù)活動</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">化學(xué)與物理方法相結(jié)合的固...</li>
166 <li> 主講:呂喆教授</li>
167 <li>地點:13號教學(xué)樓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">電子顯微技術(shù)在材料物理與... </li>
178 <li>主講:秦祿昌教授</li>
179 <li>地點:12號教學(xué)樓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號教學(xué)樓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號教學(xué)樓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>山東理工大學(xué)“審核評估評建”專題網(wǎng)站</span></li>
222 <li><span>山東理工大學(xué)“一精神”“一規(guī)劃”專題</span></li>
223 <li><span>山東理工大學(xué)“兩學(xué)一做”學(xué)習(xí)教育網(wǎng)站</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="#">招標(biāo)采購</a><li class="e1">.</li></li>
236 <li><a href="#">辦公系統(tǒng)</a><li class="e1">.</li></li>
237 <li><a href="#">郵件系統(tǒng)</a><li class="e1">.</li></li>
238 <li><a href="#">校園VPN</a><li class="e1">.</li></li>
239 <li><a href="#">在線學(xué)習(xí)</a><li class="e1">.</li></li>
240 <li><a href="#">在線導(dǎo)購</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代碼 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樣式
效果圖：
轉(zhuǎn)載于:https://www.cnblogs.com/1301694f/p/8127830.html
總結(jié)
以上是生活随笔為你收集整理的利用css布局效果图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML的br/标签和hr/标签
- 下一篇： 24.路由