Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
af8ac210 by 任超
Options

feat:不动产门户首页

1 parent 9bc01825
Inline Side-by-side
Showing 8 changed files with 494 additions and 53 deletions
1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
2 border: 0;
3 margin: 0;
4 outline: 0 none;
5 padding: 0;
6 vertical-align: baseline;
7 font-size: 100%;
8 background: transparent;
9 font-family: Arial;
10 }
11
12
13 /*================首页 start=====================*/
14 div a {
15 color: #000000;
16 text-decoration: none;
17 }
18
19 div.subject h2 a:hover {
20 color: #f46143;
21 }
22
23 div.subject {
24 margin: 0 auto;
25 float: none;
26 clear: both;
27 position: relative;
28 min-width: 1200px;
29 }
30 /*新闻 */
31 div.top-logo {
32 width: 1200px;
33 }
34 /*end*/
35
36 .top-logo h1 {
37 display: inline-block;
38 padding: 21px 0;
39 }
40
41 .top-logo ul {
42 list-style: none;
43 float: right;
44 clear: right;
45 margin-top: 33px;
46 }
47 /*------------------首页 end------------*/
48
49 .top-logo ul li {
50 float: left;
51 padding: 0 8px;
52 }
53
54 .top-logo ul li:first-child {
55 border-right: 1px solid grey;
56 }
57
58 div.nav {
59 width: 100%;
60 background: #006cff;
61 text-align: center;
62 }
63
64 div.nav ul {
65 list-style: none;
66 width: 1200px;
67 display: inline-block;
68 }
69
70 div.nav ul li {
71 float: left;
72 margin: 21px auto;
73 width: 149px;
74 border-left: 1px solid #3389ff;
75 }
76
77 div.nav ul li:first-child {
78 border-left: none;
79 }
80
81 div.nav ul li a {
82 color: #ffffff;
83 width: 90%;
84 display: inline-block;
85 font-size: 18px;
86 font-weight: bold;
87 letter-spacing: 2px;
88 }
89
90 div.banner, div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.footer {
91 width: 100%;
92 text-align: center;
93 }
94
95 div.banner {
96 background: yellow;
97 height: 500px;
98 }
99
100 div.banner ul {
101 list-style: none;
102 width: 1200px;
103 display: inline-block;
104 margin-top: 350px;
105 }
106
107 div.banner ul li {
108 width: 250px;
109 height: 100px;
110 background-color: #ffffff;
111 float: left;
112 margin: auto 25px;
113 border-radius: 18px;
114 line-height: 650%;
115 }
116
117 div.banner ul li a {
118 font-size: 32px;
119 background: #ffffff url('../image/b_s_1.jpg') no-repeat left center;
120 padding-left: 42px;
121 letter-spacing: 2px;
122 color: #000000;
123 cursor: pointer;
124 }
125
126
127 div.c_one {
128 }
129
130 div.c_one div:first-child {
131 width: 1200px;
132 height: 430px;
133 text-align: left;
134 }
135
136 div.c_one div:first-child .news, div.c_one div:first-child .notice {
137 margin-top: 40px;
138 height: 340px;
139 border: #f3f3f3 2px solid;
140 padding: 0 15px 0 15px;
141 }
142
143 div.c_one div:first-child .news {
144 width: 61%;
145 float: left;
146 }
147
148 div.c_one div:first-child .notice {
149 width: 30%;
150 float: right;
151 }
152
153 /*<h2><a href=""><span>新闻动态</span><i>查看全部</i></a></h2>*/
154 div.c_one h2 {
155 float: left;
156 width: 100%;
157 padding: 20px 0;
158 border-bottom: 2px solid #efefef;
159 }
160
161 div.c_one h2 a {
162 float: left;
163 width: 100%;
164 }
165
166 div.c_one h2 span {
167 float: left;
168 background: #ffffff url("../image/n_t_s.jpg") no-repeat left center;
169 padding-left: 45px;
170 font-size: 18px;
171 color: #000000;
172 letter-spacing: 2px;
173 }
174
175 div.c_one h2 i {
176 float: right;
177 font-size: 12px;
178 font-style: normal;
179 color: #9d9d9d;
180 margin-top: 10px;
181
182 }
183
184 div.c_one h2 a:hover i {
185 color: #f46143;
186
187 }
188
189 div.c_one .news .news-img {
190 margin-top: 20px;
191 float: left;
192 }
193
194 div.c_one ul {
195 width: 100%;
196 float: left;
197 margin-top: 20px;
198 list-style: none;
199 font-size: 14px;
200 letter-spacing: 1px;
201 }
202
203 /*<li><a href=""><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>*/
204 div.c_one ul li {
205 border-bottom: 2px dashed #f3f3f3;
206 line-height: 260%;
207 }
208
209 div.c_one ul li a {
210 width: 100%;
211 display: block;
212 color: #000000;
213 }
214
215 div.c_one ul li a span {
216 float: right;
217 color: #9b9b9b;
218 }
219
220 div.c_one ul li a:hover span {
221 color: #f46143;
222 }
223
224 div.c_one ul li a i {
225 float: left;
226 color: #f46143;
227 font-style: normal;
228 border: 1px solid #f46143;
229 line-height: 120%;
230 margin: 9px 2px auto auto;
231 font-size: 10px;
232 }
233
234 div.c_one .news ul {
235 float: right;
236 width: 50%;
237 }
238
239 div.c_two {
240 background-color: #fafafa;
241 }
242
243
244 div.c_two div:first-child {
245 width: 1200px;
246 height: 400px;
247 }
248
249 div.c_two h2 {
250 float: left;
251 margin-top: 40px;
252 background-color: #fafafa;
253 width: 100%;
254 font-size: 24px;
255 letter-spacing: 2px;
256 }
257
258 div.c_two ul {
259 float: left;
260 margin-top: 28px;
261 list-style: none;
262 }
263
264 div.c_two ul li {
265 float: left;
266 width: 16.5%;
267 overflow: hidden;
268 margin-left: 2.88%;
269 padding: 40px 36px;
270 border: 2px solid #e3e3e3;
271 }
272
273 div.c_two ul li:first-child {
274 margin-left: 0;
275 }
276
277 div.c_two ul li h6 {
278 margin-top: 25px;
279 font-size: 16px;
280 letter-spacing: 2px;
281 }
282
283 div.c_two ul li p {
284 margin-top: 20px;
285 font-size: 14px;
286 }
287
288 div.c_three {
289 }
290
291 div.c_three div:first-child {
292 width: 1200px;
293 height: 650px;
294 }
295 div.c_three .c_t_banner{
296 float: left;
297 display: block;
298 margin-top: 38px;
299 width: 100%;
300 text-align: center;
301 }
302
303 div.c_three div dl{
304 text-align: left;
305 float: left;
306 margin-top: 30px;
307 width: 45%;
308 border: 2px solid #e3e3e3;
309 padding: 20px;
310 }div.c_three div dl.interact{
311 float: right;
312 }
313 div.c_three div dl dt{
314 width: 100%;
315 }div.c_three div dl dd{
316 float: left;
317 width: 50%;
318 }
319
320 div.c_four {
321 background-color: #006bf9;
322 }
323
324 div.c_four div:first-child {
325 width: 1200px;
326 height: 240px;
327 background-color: #7ed74e;
328 }
329
330 div.c_five {
331 }
332
333 div.c_five div:first-child {
334 width: 1200px;
335 height: 370px;
336 background-color: #5cf9ff;
337 }
338
339
340 div.footer {
341 background-color: #233042;
342 }
343
344 div.footer div:first-child {
345 background-color: red;
346 width: 1200px;
347 padding: 32px 0;
348 }
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="zh-cn"> 2 <html lang="en">
3
4 <head> 3 <head>
5 <title>网页模板商城</title>
6 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <title>网上“一窗办事”登记系统</title>
8 <meta name="format-detection" content="telephone=no"> 6 <meta name="copyright" content=" &reg 技术支持 All Rights Reserved"/>
9 <meta name="renderer" content="webkit"> 7 <meta name="robots" content="index,follow"/>
10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 8 <meta name="googlebot" content="index,follow,archive"/>
11 <meta http-equiv="Cache-Control" content="no-siteapp" />
12 <link rel="alternate icon" type="image/png" href="images/logo-realestate.png"> 9 <link rel="alternate icon" type="image/png" href="images/logo-realestate.png">
13 <link rel='icon' href='favicon.ico' type='image/x-ico' /> 10 <link rel='icon' href='favicon.ico' type='image/x-ico' />
14 <meta name="description" content="" /> 11 <meta name="description" content=""/>
15 <meta name="keywords" content="" /> 12 <meta name="Keywords" content=""/>
16 <link rel="stylesheet" href="css/default.min.css?t=227" /> 13 <!-- <script type="text/javascript" src="/js/jquery.min.js"></script>-->
14 <link type="text/css" rel="stylesheet" href="./css/global.css"/>
17 </head> 15 </head>
18
19 <body> 16 <body>
20 <header class="hd"> 17 <div class="subject top-logo">
21 <div class="hd-top am-hide-md-down"> 18 <h1><a href="index.html"><img src="images/logo.jpg" alt="西安市不动产登记平台"/></a></h1>
22 <div class="cg"> 19 <ul>
23 <div class="hd-top-left"> 20 <li>登录</li>
24 <a href="#">设为首页</a> 21 <li>注册</li>
25 <a href="#">收藏</a> 22 </ul>
26 <a href="#">RSS订阅</a> 23 </div>
27 </div> 24 <div class="nav">
28 <div class="hd-top-right"> 25 <ul class="subject">
29 <a href="register.html">注册</a> 26 <li><a href="">首页</a></li>
30 <a href="login.html">登录</a> 27 <li><a href="">新闻动态</a></li>
31 </div> 28 <li><a href="">业务办理</a></li>
32 </div> 29 <li><a href="">政策法规</a></li>
30 <li><a href="">办事指南</a></li>
31 <li><a href="">查验中心</a></li>
32 <li><a href="">在线缴费</a></li>
33 <li><a href="">好差评</a></li>
34 </ul>
35 </div>
36 <div class="banner">
37 <ul class="subject">
38 <li><a href="">查询档案</a></li>
39 <li><a href="">进度查询</a></li>
40 <li><a href="">在线预约</a></li>
41 <li><a>网上预审</a></li>
42 </ul>
43 </div>
44 <div class="c_one">
45 <div class="subject">
46 <div class="news">
47 <h2><a href=""><span>新闻动态</span><i>查看全部 ></i></a></h2>
48 <a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="images/news_demo.jpg"
49 alt="图片新闻地信中心开展外业安全生产监控系统培训工作"/></a>
50 <ul>
51 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
52 <li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
53 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
54 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
55 <li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
56 <li><a href="" title="地信中心开展外业安全生产监控系统培训工作">地信中心开展外业安全生产监控系统… …<span>2020-08-19</span></a></li>
57 </ul>
33 </div> 58 </div>
34 </header> 59 <div class="notice">
35 <footer class="footer"> 60 <h2><a href=""><span>公示公告</span><i>查看全部 ></i></a></h2>
36 </footer> 61 <ul>
37 <script type="text/javascript"> 62 <li><a href="" title="1地信中心开展外业安全生产监控系统培训工作">1地信中心开展外业安全生产监控系统培训工作</a></li>
38 var noticeimg = document.getElementById("noticeimg"); 63 <li><a href="" title="2地信中心开展外业安全生产监控系统培训工作">2地信中心开展外业安全生产监控系统培训工作</a></li>
39 var imgslider = document.querySelectorAll(".imgslider"); 64 <li><a href="" title="3地信中心开展外业安全生产监控系统培训工作">3地信中心开展外业安全生产监控系统培训工作</a></li>
40 var index = 0; 65 <li><a href="" title="4地信中心开展外业安全生产监控系统培训工作">4地信中心开展外业安全生产监控系统培训工作</a></li>
41 for (var i = 0; i < imgslider.length; i++) { 66 <li><a href="" title="5地信中心开展外业安全生产监控系统培训工作">5地信中心开展外业安全生产监控系统培训工作</a></li>
42 imgslider[i].index = i; 67 <li><a href="" title="6地信中心开展外业安全生产监控系统培训工作">6地信中心开展外业安全生产监控系统培训工作</a></li>
43 imgslider[i].onclick = function () { 68 </ul>
44 index = this.index; 69 </div>
45 var herf = imgslider[index].getAttribute('data-clstag'); 70 </div>
46 var src = imgslider[index].getAttribute('src'); 71 </div>
47 noticeimg.children[0].setAttribute('href', herf); 72 <div class="c_two">
48 noticeimg.getElementsByTagName("img")[0].setAttribute('src', src); 73 <div class="subject">
49 } 74 <h2><a href="">办事指南</a></h2>
50 } 75 <ul>
51 </script> 76 <li>
52 </body> 77 <img src="images/two_s_1.jpg"/>
78 <h6>土地</h6>
79 <p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
80 </li>
81 <li>
82 <img src="images/two_s_1.jpg"/>
83 <h6>房屋建筑</h6>
84 <p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
85 </li>
86 <li>
87 <img src="images/two_s_1.jpg"/>
88 <h6>构筑物</h6>
89 <p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
90 </li>
91 <li>
92 <img src="images/two_s_1.jpg"/>
93 <h6>森林林木</h6>
94 <p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
95 </li>
96 </ul>
97 </div>
98 </div>
99 <div class="c_three">
100 <div class="subject">
101 <a class="c_t_banner" href=""><img src="images/three_img.jpg"/></a>
102 <dl>
103 <dt><h2>常见问题</h2></dt>
104 <dd><a href="">基础问题</a></dd>
105 <dd><a href="">继承登记</a></dd>
106 <dd><a href="">一手商品房办证</a></dd>
107 <dd><a href="">抵押登记</a></dd>
108 <dd><a href="">二手房办证</a></dd>
109 <dd><a href="">预售及网签</a></dd>
110 <dd><a href="">经济适用房登记</a></dd>
111 <dd><a href="">夫妻加减名变更</a></dd>
112 <dd><a href="">变更登记</a></dd>
113 <dd><a href="">夫妻离婚变更</a></dd>
114 </dl>
115 <dl class="interact">
116 <dt><h2>政民互动</h2></dt>
117 <dd>
118 <a>
119 <img src=""/>
120 <p>在线评价</p>
121 </a>
122 </dd>
123 <dd>
124 <a>
125 <img src=""/>
126 <p>在线留言</p>
127 </a>
128 </dd>
129 <dd>
130 <a>
131 <img src=""/>
132 <p>征集调查</p>
133 </a>
134 </dd>
135 <dd>
136 <a>
137 <img src=""/>
138 <p>即时聊天</p>
139 </a>
140 </dd>
141 </dl>
142 </div>
143 </div>
144 <div class="c_four">
145 <div class="subject"> dfadfasdf</div>
146 </div>
147 <div class="c_five">
148 <div class="subject"> dfadfasdf</div>
149 </div>
150 <div class="footer">
151 <div class="subject"> dfadfasdf</div>
152 </div>
53 153
54 </html>
55 <!--[if (gte IE 9)|!(IE)]><!-->
56 <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
57 <!--<![endif]-->
58 <script type="text/javascript" src="lib/handlebars/handlebars.min.js"></script>
59 <script type="text/javascript" src="lib/iscroll/iscroll-probe.js"></script>
60 <script type="text/javascript" src="lib/amazeui/amazeui.min.js"></script>
61 <script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
62 <script type="text/javascript" src="js/main.min.js?t=1"></script>
...\ No newline at end of file ...\ No newline at end of file
154 </body>
155 </html>
...\ No newline at end of file ...\ No newline at end of file
......