12月25晚-12月29日做的两个网页
生活随笔
收集整理的這篇文章主要介紹了
12月25晚-12月29日做的两个网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>仿山東理工大學</title>
6 <link rel="stylesheet" href="css/wangye.css">
7 <link href="img/favicon.ico" rel="shortcut icon">
8 </head>
9 <body>
10 <!--頁頭-->
11 <div id="head_1">
12 <div class="center_div head_div">
13 <img class="img1" src="img/QQ圖片20171226133838.jpg">
14 <!--右邊搜索框-->
15 <div class="head_div1">
16 <div class="hdd div_hdd1">
17 <div class="hdd1_div">
18 <a href="#">在校生</a>
19 <span>+</span>
20 <a href="#">教職工</a>
21 <span>+</span>
22 <a href="#">考生</a>
23 <span>+</span>
24 <a href="#">校友</a>
25 <span>+</span>
26 <a href="#">訪客</a>
27 <span>+</span>
28 </div>
29 </div>
30 <div class="hdd div_hdd2">
31 <input type="text" class="text1" placeholder="請輸入關鍵字">
32 <input type="image" src="img/QQ圖片20171226145940.jpg" class="text2">
33 </div>
34 </div>
35 </div>
36 </div>
37 <!--導航-->
38 <div class="dh">
39 <div class="dh_div">
40 <ul>
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 <li> <a href="#">國際交流</a></li>
51 <li> <a href="#">校友聯誼</a></li>
52 </ul>
53 </div>
54 </div>
55 <!--輪播圖-->
56 <div class="lbt">
57 <img src="img/QQ圖片20171226155554.jpg">
58 </div>
59 <!--內容-->
60
61
62 <!--內容-->
63 <div class="nr1">
64 <div class="nr1_1">
65 <div class="nr2">
66 <div class="nr2_1">
67 <span class="span2">學校新聞</span>
68 <span class="span1"><a href="#">【更多】</a></span>
69 <div><img src="img/QQ20171223095502.jpg" alt="" class="nr2_img"></div>
70 <span class="span3">
71 <h4>我校與周村區簽訂戰略合作協議</h4>
72 </span>
73 <span class="span4">
74 <a href="#">--呂傳毅提出“大米小米一起熬”校...</a>
75 </span>
76 <p class="p2">
77 <span class="p1">本網訊12月24日，山東理工大學與周村區戰略合作簽約儀式暨2017校城融合創新發展論壇，在杏園賓館北樓二層會議室舉行。由此，雙方步入融合發...</span> <span class="span_1">[詳細]</span>
78 </p>
79 <div class="liebiao">
80 <ul>
81 <li><a href="#">我校女籃實現CUBA山東賽區三連冠</a><span>12-26</span></li>
82 <li><a href="#">山東省法學理論研究會年會在我校舉行</a><span>12-26</span></li>
83 <li><a href="#">學校成立校歐美同學會</a><span>12-26</span></li>
84 <li><a href="#">“不忘初心幼兒情 童展歌舞迎新年”聯歡會...</a><span>12-26</span></li>
85 <li><a href="#">省學校后勤協會七屆一次理事會在我校召開 </a><span>12-26</span></li>
86 <li><a href="#">“E路領航”2017年度學風建設表彰會舉行</a><span>12-26</span></li>
87 </ul>
88 </div>
89 </div>
90 <div class="nr2-2">
91 <span class="n22_1">通知公告</span>
92 <span class="n22_2"><a href="#">[更多]</a></span>
93 <span><img src="img/QQ20171223095502.jpg" width="100%"></span>
94 <div class="n22_lb2">
95 <ul>
96 <li><span><a href="#">2018年招收攻讀碩士學位研究生招生簡章</a></span></li>
97 <li><span><a href="#">2018年全國碩士研究生招生考試公告</a></span></li>
98 <li><span><a href="#">誠聘海內外高層次人才啟事</a></span></li>
99 </ul>
100 </div>
101 </div>
102 </div>
103 <div class="nr3">
104 <div class="nr3_1">
105 <span class="nr3_span1">視頻理工</span>
106 <span class="nr3_span">圖說理工</span>
107 <div><img src="img/QQ20171223095502.jpg" width="100%"></div>
108 <div class="nr3_img">
109 <img src="img/QQ20171227111320.png" width="100%">
110 </div>
111 </div>
112 <div class="nr3_2">
113 <span class="nr3_mt">媒體報道</span>
114 <span class="nr3_gd">[更多]</span>
115 <div class="nr3_img"><img src="img/QQ20171223095502.jpg" width="100%"></div>
116 <div class="nr3_lieb">
117 <ul>
118 <li><span>〖山東省教育廳〗</span><a href="#">定標準、劃底線，山理工“七項規定”...</a></li>
119 <li><span>〖齊魯晚報〗</span><a href="#">實施人才優先戰略,打造高水平師資隊...</a></li>
120 <li><span>〖大眾網〗</span><a href="#">山東理工大學管理學院舉行冬季呼吸道...</a></li>
121 <li><span>〖大眾網〗</span><a href="#">山東理工大學管理學院舉行海外游學分...</a></li>
122 <li><span>〖大眾網〗</span><a href="#">山東理工大學管理學院邀請新西蘭國立...</a></li>
123 <li><span>〖山東省教育廳〗</span><a href="#">山理工推出思政工作質量保障體系構建...</a></li>
124 <li><span>〖大眾網〗</span><a href="#">周村區與山東理工大學2017校城融合創...</a></li>
125 </ul>
126 </div>
127 </div>
128 </div>
129 <div class="nr4">
130 <div class="nr4_1">
131 <span class="nr4_span1">學術活動</span>
132 <span class="nr4_span2">[更多]</span>
133 <div class="nr4_img"><img src="img/QQ20171223095502.jpg" width="100%"></div>
134 <div class="nr4_img1"><img src="img/QQ20171221171528.png">
135 <span class="nr4_lieb1">
136 <ul>
137 <li><a href="#">文史研究的選題、設計與研...</a></li>
138 <li>主講:鄭杰文教授 </li>
139 <li>地點:文學與新聞傳播學院會議室 </li>
140 </ul>
141 </span>
142 </div>
143 <div class="nr4_img2">
144 <img src="img/QQ20171221171528.png">
145 <span class="nr4_lieb2">
146 <ul>
147 <li><a href="#">文史研究的選題、設計與研...</a></li>
148 <li>主講:鄭杰文教授 </li>
149 <li>地點:文學與新聞傳播學院會議室 </li>
150 </ul>
151 </span>
152 </div>
153 <div class="nr4_img3">
154 <img src="img/QQ20171221171528.png">
155 <span class="nr4_lieb3">
156 <ul>
157 <li><a href="#">文史研究的選題、設計與研...</a></li>
158 <li>主講:鄭杰文教授 </li>
159 <li>地點:文學與新聞傳播學院會議室 </li>
160 </ul>
161 </span>
162 </div>
163 <div class="nr4_img4">
164 <img src="img/QQ20171221171528.png">
165 <span class="nr4_lieb4">
166 <ul>
167 <li><a href="#">文史研究的選題、設計與研...</a></li>
168 <li>主講:鄭杰文教授 </li>
169 <li>地點:文學與新聞傳播學院會議室 </li>
170 </ul>
171 </span>
172 </div>
173 </div>
174 <div class="nr4_2">
175 <div>
176 <span class="nr4_zt">專題信息</span>
177 <span class="nr4_gd">[更多]</span>
178 <div class="div_img"><img src="img/QQ20171223095502.jpg" width="100%"></div>
179 <div class="div_lieb">
180 <ul>
181 <li><a href="">山東理工大學“審核評估評建”專題網站</a></li>
182 <li><a href="">山東理工大學“一精神”“一規劃”專題</a></li>
183 <li><a href="">山東理工大學“兩學一做”學習教育網站</a></li>
184 </ul>
185 </div>
186 </div>
187 </div>
188 </div>
189 </div>
190
191 </div>
192
193 <!--底部導航-->
194 <div class="footdh">
195 <div class="fdb">
196 <ul>
197 <li><a href="#">站點導航</a></li>
198 <li><a href="#">在線學習</a></li>
199 <li><a href="#">校園VPN</a></li>
200 <li><a href="#">郵件系統</a></li>
201 <li><a href="#">辦公系統</a></li>
202 <li><a href="#">招標采購</a></li>
203 <li><a href="#">信息公開</a></li>
204 <li><a href="#">圖書館</a></li>
205 </ul>
206 </div>
207 </div>
208
209 <!--底部-->
210 <div class="db">
211 <img src="img/QQ20171226223605.png" alt="">
212 </div>
213 </body>
214 </html> View Code css樣式 View Code
?
效果圖：
網頁二：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>企業名稱</title> 6 <link rel="stylesheet" href="wangye1.css"> 7 </head> 8 <body> 9 <!--頁頭--> 10 <div class="yt"> 11 <div class="yt1"> 12 <img src="logo.gif"> 13 </div> 14 <div class="yt2"> 15 <span>搜索產品</span> 16 <input type="text" id="yt2_text"> 17 <input type="image" src="btn_srh.gif" class="yt2_img"> 18 </div> 19 </div> 20 <!--導航--> 21 <div class="dh"> 22 <div class="dh1"> 23 <ul> 24 <li><a href="">首頁</a></li> 25 <li><a href="">企業新聞</a></li> 26 <li><a href="">企業簡介</a></li> 27 <li><a href="">產品展廳</a></li> 28 <li><a href="">企業歷史</a></li> 29 <li><a href="">招商加盟</a></li> 30 <li><a href="">網上下單</a></li> 31 <li><a href="">聯系我們</a></li> 32 </ul> 33 </div> 34 <div class="dh2"> 35 <ul> 36 <li>企業動態</li> 37 <li>領導活動</li> 38 <li>產品資訊</li> 39 <li>通知公告</li> 40 </ul> 41 </div> 42 </div> 43 <!--圖片內容1--> 44 <div class="tpnr1"> 45 <div class="tpnr1_div"> 46 <img src="pic.jpg" alt=""> 47 <input type="image" src="btn_login.gif"> 48 <input type="image" src="btn_login1.gif"> 49 </div> 50 <div class="tpnr2_div"> 51 <h2>定位層始終保持在當前可見屏</h2> 52 <div class="tpnr_span"> 53 <p class="nrtp_p">看到很多這樣的廣告，頁面兩邊各方一個方塊圖片廣告；拖動滾動條時廣告隨之滾動，始終停留在屏幕的上方或下方。對..</p> 54 </div> 55 <div class="tpnr2_img"> 56 <img src="tb-1.jpg" alt=""> 57 58 </div> 59 <div class="tpnr2_lieb"> 60 <ul> 61 <li>純CSS實現DIV三列等高布局</li> 62 <li>HTML元素的ID和Name屬性的區別</li> 63 <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明濾鏡</li> 64 <li>DIV+CSS實現放大鏡效果的分頁樣式</li> 65 <li>javascript為FF設置首頁</li> 66 <li>復制到系統剪切板之IE,FF兼容版</li> 67 </ul> 68 </div> 69 <div class="tpnr2_lieb2"> 70 <ul> 71 <li>09-11</li> 72 <li>09-13</li> 73 <li>09-19</li> 74 <li>10-05</li> 75 <li>10-11</li> 76 <li>10-12</li> 77 </ul> 78 </div> 79 </div> 80 <div class="tpnr3_div"> 81 <img src="cpdg.jpg" alt="" class="img1"> 82 <div class="tpnr3_nr1"> 83 <img src="icon2.gif" alt=""> 84 </div> 85 <div class="tpnr3_nr2"> 86 <ul> 87 <li>語音業務:</li> 88 <li>普通電話丨數字語音中繼</li> 89 </ul> 90 </div> 91 <div class="tpnr3_nr3"> 92 <ul> 93 <li>語音業務:</li> 94 <li>普通電話丨數字語音中繼</li> 95 </ul> 96 </div> 97 <div class="tpnr3_nr4"> 98 <ul> 99 <li>語音業務:</li> 100 <li>普通電話丨數字語音中繼</li> 101 </ul> 102 </div> 103 </div> 104 </div> 105 <!--圖片內容2文字內容--> 106 <div class="wznr"> 107 <div class="wznr1"> 108 <div class="wznr1_1"> 109 <div class="wznr1_1_1"><img src="rmcp.gif" alt=""></div> 110 <div class="tp1"> 111 <div class="wznr1_img"> 112 <ul> 113 <li><img src="pic4.gif" alt=""></li> 114 <li>產品名稱</li> 115 </ul> 116 </div> 117 <div class="wznr2_img"> 118 <ul> 119 <li><img src="pic4.gif" alt=""></li> 120 <li>這里是產品名稱</li> 121 </ul> 122 </div> 123 <div class="wznr3_img"> 124 <ul> 125 <li><img src="pic4.gif" alt=""></li> 126 <li>產品名稱</li> 127 </ul> 128 </div> 129 <div class="wznr4_img"> 130 <ul> 131 <li><img src="pic4.gif" alt=""></li> 132 <li>這里是產品名稱</li> 133 </ul> 134 </div> 135 <div class="wznr5_img"> 136 <ul> 137 <li><img src="pic4.gif" alt=""></li> 138 <li>產品名稱</li> 139 </ul> 140 </div> 141 </div> 142 <div class="tp2"> 143 <div class="wznr_img1"> 144 <ul> 145 <li><img src="pic4.gif" alt=""></li> 146 <li>產品名稱</li> 147 </ul> 148 </div> 149 <div class="wznr_img2"> 150 <ul> 151 <li><img src="pic4.gif" alt=""></li> 152 <li>這里是產品名稱</li> 153 </ul> 154 </div> 155 <div class="wznr_img3"> 156 <ul> 157 <li><img src="pic4.gif" alt=""></li> 158 <li>產品名稱</li> 159 </ul> 160 </div> 161 <div class="wznr_img4"> 162 <ul> 163 <li><img src="pic4.gif" alt=""></li> 164 <li>這里是產品名稱</li> 165 </ul> 166 </div> 167 <div class="wznr_img5"> 168 <ul> 169 <li><img src="pic4.gif" alt=""></li> 170 <li>產品名稱</li> 171 </ul> 172 </div> 173 </div> 174 </div> 175 <div class="wznr1_2"> 176 <div class="wznr1_2-1"> 177 <span><img src="qiyelis-1.jpg" alt="">企業歷史</span> 178 <div class="gd1"><a href="#">更多</a></div> 179 <div class="div_gd"><img src="gd-2.jpg" alt=""></div> 180 <div class="div_pic"> 181 <img src="pic5.gif" alt=""> 182 </div> 183 <div class="div_h5"> 184 <h5>多角度對比蘋果ipod系列真機</h5> 185 <p>導言：北京時間9月2日凌晨1點，蘋果在舊金山舉行新品發布會，數碼特派記者在美國現場直播</p> 186 </div> 187 <div class="wznr1_2_img"> 188 <img src="www-1.jpg" alt=""> 189 </div> 190 <div class="div_ul"> 191 <ul> 192 <li>純CSS實現DIV三列等高布局</li> 193 <li>HTML元素的ID和Name屬性的區別</li> 194 <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明濾鏡</li> 195 <li>DIV+CSS實現放大鏡效果的分頁樣式</li> 196 <li>javascript為FF設置首頁</li> 197 <li>復制到系統剪切板之IE,FF兼容版</li> 198 <li>DIV+CSS實現放大鏡效果的分頁樣式</li> 199 </ul> 200 </div> 201 </div> 202 <div class="wznr1_2-2"> 203 <span><img src="qiyelis-1.jpg" alt="">招商加盟</span> 204 <div class="gd2"><a href="#">更多</a></div> 205 <div class="div_gd1"><img src="gd-2.jpg" alt=""></div> 206 <div class="div_pic2"> 207 <img src="pic5.gif" alt=""> 208 </div> 209 <div class="div_h5_2"> 210 <h5>多角度對比蘋果ipod系列真機</h5> 211 <p>導言：北京時間9月2日凌晨1點，蘋果在舊金山舉行新品發布會，數碼特派記者在美國現場直播</p> 212 </div> 213 <div class="wznr1_2_img2"> 214 <img src="www-1.jpg" alt=""> 215 </div> 216 <div class="div_ul2"> 217 <ul> 218 <li>純CSS實現DIV三列等高布局</li> 219 <li>HTML元素的ID和Name屬性的區別</li> 220 <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明濾鏡</li> 221 <li>DIV+CSS實現放大鏡效果的分頁樣式</li> 222 <li>javascript為FF設置首頁</li> 223 <li>復制到系統剪切板之IE,FF兼容版</li> 224 <li>DIV+CSS實現放大鏡效果的分頁樣式</li> 225 </ul> 226 </div> 227 </div> 228 </div> 229 </div> 230 <div class="wznr2"> 231 <div class="wznr2_1"> 232 <img src="wd-1.jpg"> 233 <div class="chapin"> 234 <img src="xtb-1.jpg" alt=""><span>最新出的這個產品如何使用？</span> 235 </div> 236 <div class="chanpin1"> 237 <img src="xtb2-1.jpg" alt=""><span>該產品采用全新的技術，較上一產品有質的飛躍，功能上增強了許多，使用方法更簡單</span> 238 </div> 239 <div class="chapin1"> 240 <img src="xtb-1.jpg" alt=""><span>最新出的這個產品如何使用？</span> 241 </div> 242 <div class="chanpin2"> 243 <img src="xtb2-1.jpg" alt=""><span>該產品采用全新的技術，較上一</span> 244 </div> 245 <div class="chapin2"> 246 <img src="xtb-1.jpg" alt=""><span>最新出的這個產品如何使用？</span> 247 </div> 248 <div class="chanpin3"> 249 <img src="xtb2-1.jpg" alt=""><span>該產品采用全新的技術，較上一產品有質的飛躍，功能上增</span> 250 </div> 251 <div class="chapin3"> 252 <img src="xtb-1.jpg" alt=""><span>最新出的這個產品如何使用？</span> 253 </div> 254 <div class="chanpin4"> 255 <img src="xtb2-1.jpg" alt=""><span>該產品采用全新的技術，較上一產品有質的飛躍，功能上增</span> 256 </div> 257 <div class="chapin4"> 258 <img src="xtb-1.jpg" alt=""><span>最新出的這個產品如何使用？</span> 259 </div> 260 <div class="chanpin5"> 261 <img src="xtb2-1.jpg" alt=""><span>該產品采用全新的技術，較上一產品有質的飛躍，功能上增強了許多，使用方法更簡單</span> 262 </div> 263 264 </div> 265 <div class="wznr2_2"> 266 <span><img src="111-2.jpg" alt=""></span> 267 <img src="tel.gif" alt="" width="100%"> 268 </div> 269 </div> 270 </div> 271 <!--底部導航--> 272 <div class="dbdh"> 273 <div class="dbdh1"> 274 <div class="dbdh1-1"> 275 <ul> 276 <li>關于我們</li> 277 <span>丨丨</span> 278 <li>產品目錄</li> 279 <span>丨丨</span> 280 <li>聯系我們</li> 281 <span>丨丨</span> 282 <li>友情鏈接</li> 283 <span>丨丨</span> 284 <li>反饋問題</li> 285 <span>丨丨</span> 286 <li>廣告合作</li> 287 </ul> 288 </div> 289 290 </div> 291 <div class="dbdh2"></div> 292 </div> 293 </body> 294 </html> View Codecss樣式：
1 /* CSS Document */ 2 * { 3 margin: 0px; 4 padding: 0px 5 } 6 /*頁頭*/ 7 .yt { 8 width: 900px; 9 height: 70px; 10 } 11 .yt1 { 12 width: 65%; 13 height: 100%; 14 position: relative 15 } 16 .yt2 { 17 width: 35%; 18 height: 100%; 19 } 20 .yt1, .yt2 { 21 float: left 22 } 23 .yt1 img { 24 position: relative; 25 top: 10px; 26 } 27 .yt2_img { 28 position: relative; 29 top: 25px; 30 left: 28px 31 } 32 .yt2 span { 33 position: relative; 34 top: 19px; 35 left: 33px; 36 font-size: 14px 37 } 38 #yt2_text { 39 position: relative; 40 top: 19px; 41 left: 30px 42 } 43 /*導航*/ 44 .dh { 45 width: 900px; 46 height: 70px; 47 } 48 .dh1 { 49 width: 900px; 50 height: 50%; 51 background-color: orange; 52 } 53 .dh2 { 54 width: 100%; 55 height: 50%; 56 } 57 .dh1 ul li { 58 line-height: 30px; 59 float: left; 60 list-style-type: none; 61 margin-left: 38px; 62 } 63 .dh1 ul li a { 64 color: white; 65 text-decoration: none 66 } 67 /*.dh1 ul li a:visited{color: black}*/ 68 .dh2 ul li { 69 float: left; 70 list-style-type: none; 71 margin-left: 38px; 72 } 73 /*.dh2 ul li{left: 0px;top:5px;position: relative}*/ 74 /*圖片內容*/ 75 .tpnr1 { 76 width: 900px; 77 height: 270px; 78 } 79 .tpnr1_div { 80 width: 29.8%; 81 height: 100%; 82 } 83 .tpnr2_div { 84 width: 45.2%; 85 height: 100%; 86 background-image: url(hot_bg.gif); 87 background-size: cover 88 } 89 .tpnr3_div { 90 width: 23%; 91 height: 100%; 92 background-image: url(side_bg.gif) 93 } 94 .tpnr1_div, .tpnr2_div, .tpnr3_div { 95 float: left 96 } 97 .tpnr2_div, .tpnr3_div { 98 margin-left: 1% 99 } 100 .tpnr2_div h2 { 101 position: relative; 102 top: 19px; 103 left: 2px; 104 text-align: center; 105 font-weight: normal; 106 color: #515151 107 } 108 .nrtp_p { 109 font-size: 14px; 110 color: rgba(110,110,110,1.00); 111 position: relative; 112 top: 26px; 113 left: 6px 114 } 115 .tpnr_span { 116 border-bottom: 1px dashed #ccc; 117 width: 90%; 118 height: 85px; 119 margin: 0 auto 120 } 121 .tpnr2_img { 122 width: 30px; 123 height: 119px; 124 position: relative; 125 top: 10px; 126 left: 10px 127 } 128 /*.tpnr2_img img{position: relative;left: 22px;top: 19px}*/ 129 .tpnr2_lieb ul li { 130 list-style-position: inside; 131 font-size: 13px; 132 margin-top: 4px 133 } 134 .tpnr2_lieb ul { 135 list-style-type: none; 136 } 137 /*.spa1,.spa2,.spa3,.spa4,.spa5{float: right;}*/ 138 .tpnr2_lieb2 ul li { 139 font-size: 13px; 140 list-style-type: none; 141 margin-top: 4px; 142 color: rgba(87,159,17,1.00) 143 } 144 .tpnr2_lieb2 { 145 position: relative; 146 top: 3px; 147 left: 66px 148 } 149 .tpnr2_img, .tpnr2_lieb, .tpnr2_lieb2 { 150 float: left 151 } 152 .tpnr3_nr1 { 153 position: relative; 154 left: 8px; 155 top: 28px; 156 width: 48px; 157 height: 194px 158 } 159 .tpnr3_nr2 { 160 position: relative; 161 left: 59px; 162 top: -154px; 163 font-size: 13px; 164 } 165 .tpnr3_nr2 ul li { 166 list-style-type: none 167 } 168 .tpnr3_nr3 { 169 position: relative; 170 left: 59px; 171 top: -117px; 172 font-size: 13px; 173 } 174 .tpnr3_nr3 ul li { 175 list-style-type: none 176 } 177 .tpnr3_nr4 { 178 position: relative; 179 left: 59px; 180 top: -80px; 181 font-size: 13px; 182 } 183 .tpnr3_nr4 ul li { 184 list-style-type: none 185 } 186 /*文字內容*/ 187 .wznr { 188 width: 900px; 189 height: 605px; 190 191 } 192 .wznr1 { 193 width: 76%; 194 height: 100%; 195 196 } 197 .wznr2 { 198 width: 23.5%; 199 height: 100%; 200 201 } 202 .wznr1, .wznr2 { 203 float: left 204 } 205 .wznr2 { 206 margin-left: 0.5% 207 } 208 .wznr1_1 { 209 width: 100%; 210 height: 51%; 211 background-image: url( wznr-1.jpg); 212 background-size: 100% 100%; 213 background-repeat: no-repeat; 214 position: relative 215 } 216 .wznr1_1_1 img { 217 position: relative; 218 top: 5px; 219 left: 10px 220 } 221 .wznr1_img ul li { 222 list-style-type: none; 223 font-size: 14px 224 } 225 .tp1 { 226 width: 100%; 227 height: 50% 228 } 229 .wznr1_img, .wznr2_img, .wznr3_img, .wznr4_img, .wznr5_img { 230 float: left; 231 } 232 .wznr1_img { 233 position: relative; 234 left: 5px; 235 top: 18px 236 } 237 .wznr2_img { 238 position: relative; 239 top: 18px; 240 left: 30px 241 } 242 .wznr3_img { 243 position: relative; 244 top: 18px; 245 left: 60px 246 } 247 .wznr4_img { 248 position: relative; 249 top: 18px; 250 left: 90px 251 } 252 .wznr5_img { 253 position: relative; 254 top: 18px; 255 left: 120px 256 } 257 .wznr2_img ul li { 258 list-style-type: none; 259 font-size: 14px 260 } 261 .wznr3_img ul li { 262 list-style-type: none; 263 font-size: 14px 264 } 265 .wznr4_img ul li { 266 list-style-type: none; 267 font-size: 14px 268 } 269 .wznr5_img ul li { 270 list-style-type: none; 271 font-size: 14px 272 } 273 .wznr_img1, .wznr_img2, .wznr_img3, .wznr_img4, .wznr_img5 { 274 float: left; 275 position: relative; 276 } 277 .wznr_img2 ul li { 278 list-style-type: none; 279 font-size: 14px 280 } 281 .wznr_img3 ul li { 282 list-style-type: none; 283 font-size: 14px 284 } 285 .wznr_img4 ul li { 286 list-style-type: none; 287 font-size: 14px 288 } 289 .wznr_img5 ul li { 290 list-style-type: none; 291 font-size: 14px 292 } 293 .wznr_img1 ul li { 294 list-style-type: none; 295 font-size: 14px 296 } 297 .wznr_img1 { 298 left: 5px; 299 top: 11px 300 } 301 .wznr_img2 { 302 left: 30px; 303 top: 11px 304 } 305 .wznr_img3 { 306 left: 60px; 307 top: 11px 308 } 309 .wznr_img4 { 310 left: 90px; 311 top: 11px 312 } 313 .wznr_img5 { 314 left: 120px; 315 top: 11px 316 } 317 .wznr1_2 { 318 width: 100%; 319 height: 49%; 320 321 } 322 .wznr2_1 { 323 width: 100%; 324 height: 78%; 325 background-image: url(side_bg.gif) 326 } 327 .wznr2_1 img { 328 position: relative; 329 left: 10px; 330 top: 5px 331 } 332 .chapin span { 333 font-size: 13px; 334 position: relative; 335 left: 10px; 336 top: 10px; 337 font-weight: bold 338 } 339 .chapin img { 340 position: relative; 341 top: 12px 342 } 343 .chanpin1 span { 344 font-size: 13px; 345 font-weight: normal; 346 position: relative; 347 top: 20px; 348 left: 10px; 349 } 350 .chanpin1 img { 351 position: relative; 352 top: 20px 353 } 354 .chanpin1 { 355 height: 90px; 356 border-bottom: 1px dashed #ccc; 357 width: 100% 358 } 359 .chapin1 span { 360 font-size: 13px; 361 position: relative; 362 left: 10px; 363 top: 10px; 364 font-weight: bold 365 } 366 .chapin1 img { 367 position: relative; 368 top: 12px 369 } 370 .chanpin2 span { 371 font-size: 13px; 372 font-weight: normal; 373 position: relative; 374 top: 6px; 375 left: 10px; 376 } 377 .chanpin2 img { 378 position: relative; 379 top: 8px 380 } 381 .chanpin2 { 382 height: 40px; 383 border-bottom: 1px dashed #ccc; 384 width: 100% 385 } 386 .chapin2 span { 387 font-size: 13px; 388 position: relative; 389 left: 10px; 390 top: 7px; 391 font-weight: bold 392 } 393 .chapin2 img { 394 position: relative; 395 top: 9px 396 } 397 .chanpin3 span { 398 font-size: 13px; 399 font-weight: normal; 400 position: relative; 401 top: 7px; 402 left: 10px; 403 } 404 .chanpin3 img { 405 position: relative; 406 top: 9px 407 } 408 .chanpin3 { 409 height: 50px; 410 border-bottom: 1px dashed #ccc; 411 width: 100% 412 } 413 .chapin3 span { 414 font-size: 13px; 415 position: relative; 416 left: 10px; 417 top: 0px; 418 font-weight: bold 419 } 420 .chapin3 img { 421 position: relative; 422 top: 2px 423 } 424 .chanpin4 span { 425 font-size: 13px; 426 font-weight: normal; 427 position: relative; 428 top: 8px; 429 left: 10px; 430 } 431 .chanpin4 img { 432 position: relative; 433 top: 10px 434 } 435 .chanpin4 { 436 height: 60px; 437 border-bottom: 1px dashed #ccc; 438 width: 100% 439 } 440 .chapin4 span { 441 font-size: 13px; 442 position: relative; 443 left: 10px; 444 top: 9px; 445 font-weight: bold 446 } 447 .chapin4 img { 448 position: relative; 449 top: 11px 450 } 451 .chanpin5 span { 452 font-size: 13px; 453 font-weight: normal; 454 position: relative; 455 top: 9px; 456 left: 10px; 457 } 458 .chanpin5 img { 459 position: relative; 460 top: 11px 461 } 462 .chanpin5 { 463 height: 75px; 464 border-bottom: 1px dashed #ccc; 465 width: 100% 466 } 467 .wznr2_2 { 468 width: 100%; 469 height: 22%; 470 background-image: url(tub-1.jpg); 471 background-size: 100% 100%; 472 background-repeat: no-repeat 473 } 474 .wznr1_2-1 { 475 width: 49.5%; 476 height: 100%; 477 background-image: url( bj-2.jpg); 478 background-size: cover; 479 position: relative; 480 481 } 482 .wznr1_2-2 { 483 width: 49.5%; 484 height: 100%; 485 background-image: url(bj-2.jpg); 486 margin-left: 1%; 487 background-size: cover; 488 position: relative 489 } 490 .wznr1_2-1, .wznr1_2-2 { 491 float: left 492 } 493 .img1 { 494 position: relative; 495 top: 5px; 496 left: 10px 497 } 498 .div_gd, .gd1 { 499 float: right 500 } 501 .gd1 a { 502 text-decoration: none; 503 font-size: 13px; 504 color: rgba(240,157,70,1) 505 } 506 .div_pic { 507 margin-top: 20px; 508 margin-left: 10px; 509 width: 91px; 510 height: 70px 511 } 512 .wznr1_2-1 span { 513 margin-left: 10px 514 } 515 .div_h5 { 516 position: relative; 517 top: -73px; 518 left: 102px; 519 width: 240px 520 } 521 .div_h5 h5{color: rgba(51,102,153,1)} 522 .div_h5_2 h5{color: rgba(51,102,153,1)} 523 .div_h5 p { 524 font-size: 13px 525 } 526 .wznr1_2_img, .div_ul { 527 float: left 528 } 529 .div_ul ul { 530 list-style-type: none 531 } 532 .div_ul ul li { 533 font-size: 13px 534 } 535 .div_ul { 536 line-height: 22px; 537 position: relative; 538 top: -57px; 539 left: 11px 540 } 541 .wznr1_2_img { 542 position: relative; 543 top: -49px; 544 left: 8px; 545 } 546 .div_gd1, .gd2 { 547 float: right 548 } 549 .gd2 a { 550 text-decoration: none; 551 font-size: 13px; 552 color: rgba(240,157,70,1) 553 } 554 .div_pic2 { 555 margin-top: 20px; 556 margin-left: 10px; 557 width: 91px; 558 height: 70px 559 } 560 .wznr1_2-2 span { 561 margin-left: 10px 562 } 563 .div_h5_2 { 564 position: relative; 565 top: -73px; 566 left: 102px; 567 width: 240px 568 } 569 .div_h5_2 p { 570 font-size: 13px 571 } 572 .wznr1_2_img2, .div_ul2 { 573 float: left 574 } 575 .div_ul2 ul { 576 list-style-type: none 577 } 578 .div_ul2 ul li { 579 font-size: 13px 580 } 581 .div_ul2 { 582 line-height: 22px; 583 position: relative; 584 top: -57px; 585 left: 11px 586 } 587 .wznr1_2_img2 { 588 position: relative; 589 top: -49px; 590 left: 8px; 591 } 592 /*底部導航*/ 593 .dbdh { 594 width: 900px; 595 height: 100px; 596 } 597 .dbdh1 { 598 width: 100%; 599 height: 30px; 600 background-image: url(dibu-3.jpg); 601 } 602 .dbdh2 { 603 width: 100%; 604 height: 70px; 605 } 606 .dbdh1 ul li, .dbdh1 ul span { 607 float: left; 608 color: white; 609 } 610 .dbdh1 ul li { 611 list-style-type: none; 612 margin-left: 10px 613 } 614 .dbdh1-1 { 615 width: 75%; 616 height: 100%; 617 margin: 0 auto; 618 line-height: 30px 619 } 620 .dbdh1 ul span { 621 margin-left: 10px 622 } View Code效果圖：
?
轉載于:https://www.cnblogs.com/chenyang-1/p/8158936.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的12月25晚-12月29日做的两个网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS的typeof力所能及已经力所不及
- 下一篇： linux -- control ser