利用css布局效果图
生活随笔
收集整理的這篇文章主要介紹了
利用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> 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樣式
效果圖：
轉載于:https://www.cnblogs.com/1301694f/p/8127830.html
總結
以上是生活随笔為你收集整理的利用css布局效果图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML的br/标签和hr/标签
- 下一篇： 24.路由