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 490 additions and 49 deletions
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 {
border: 0;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
font-size: 100%;
background: transparent;
font-family: Arial;
}
/*================首页 start=====================*/
div a {
color: #000000;
text-decoration: none;
}
div.subject h2 a:hover {
color: #f46143;
}
div.subject {
margin: 0 auto;
float: none;
clear: both;
position: relative;
min-width: 1200px;
}
/*新闻 */
div.top-logo {
width: 1200px;
}
/*end*/
.top-logo h1 {
display: inline-block;
padding: 21px 0;
}
.top-logo ul {
list-style: none;
float: right;
clear: right;
margin-top: 33px;
}
/*------------------首页 end------------*/
.top-logo ul li {
float: left;
padding: 0 8px;
}
.top-logo ul li:first-child {
border-right: 1px solid grey;
}
div.nav {
width: 100%;
background: #006cff;
text-align: center;
}
div.nav ul {
list-style: none;
width: 1200px;
display: inline-block;
}
div.nav ul li {
float: left;
margin: 21px auto;
width: 149px;
border-left: 1px solid #3389ff;
}
div.nav ul li:first-child {
border-left: none;
}
div.nav ul li a {
color: #ffffff;
width: 90%;
display: inline-block;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
}
div.banner, div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.footer {
width: 100%;
text-align: center;
}
div.banner {
background: yellow;
height: 500px;
}
div.banner ul {
list-style: none;
width: 1200px;
display: inline-block;
margin-top: 350px;
}
div.banner ul li {
width: 250px;
height: 100px;
background-color: #ffffff;
float: left;
margin: auto 25px;
border-radius: 18px;
line-height: 650%;
}
div.banner ul li a {
font-size: 32px;
background: #ffffff url('../image/b_s_1.jpg') no-repeat left center;
padding-left: 42px;
letter-spacing: 2px;
color: #000000;
cursor: pointer;
}
div.c_one {
}
div.c_one div:first-child {
width: 1200px;
height: 430px;
text-align: left;
}
div.c_one div:first-child .news, div.c_one div:first-child .notice {
margin-top: 40px;
height: 340px;
border: #f3f3f3 2px solid;
padding: 0 15px 0 15px;
}
div.c_one div:first-child .news {
width: 61%;
float: left;
}
div.c_one div:first-child .notice {
width: 30%;
float: right;
}
/*<h2><a href=""><span>新闻动态</span><i>查看全部</i></a></h2>*/
div.c_one h2 {
float: left;
width: 100%;
padding: 20px 0;
border-bottom: 2px solid #efefef;
}
div.c_one h2 a {
float: left;
width: 100%;
}
div.c_one h2 span {
float: left;
background: #ffffff url("../image/n_t_s.jpg") no-repeat left center;
padding-left: 45px;
font-size: 18px;
color: #000000;
letter-spacing: 2px;
}
div.c_one h2 i {
float: right;
font-size: 12px;
font-style: normal;
color: #9d9d9d;
margin-top: 10px;
}
div.c_one h2 a:hover i {
color: #f46143;
}
div.c_one .news .news-img {
margin-top: 20px;
float: left;
}
div.c_one ul {
width: 100%;
float: left;
margin-top: 20px;
list-style: none;
font-size: 14px;
letter-spacing: 1px;
}
/*<li><a href=""><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>*/
div.c_one ul li {
border-bottom: 2px dashed #f3f3f3;
line-height: 260%;
}
div.c_one ul li a {
width: 100%;
display: block;
color: #000000;
}
div.c_one ul li a span {
float: right;
color: #9b9b9b;
}
div.c_one ul li a:hover span {
color: #f46143;
}
div.c_one ul li a i {
float: left;
color: #f46143;
font-style: normal;
border: 1px solid #f46143;
line-height: 120%;
margin: 9px 2px auto auto;
font-size: 10px;
}
div.c_one .news ul {
float: right;
width: 50%;
}
div.c_two {
background-color: #fafafa;
}
div.c_two div:first-child {
width: 1200px;
height: 400px;
}
div.c_two h2 {
float: left;
margin-top: 40px;
background-color: #fafafa;
width: 100%;
font-size: 24px;
letter-spacing: 2px;
}
div.c_two ul {
float: left;
margin-top: 28px;
list-style: none;
}
div.c_two ul li {
float: left;
width: 16.5%;
overflow: hidden;
margin-left: 2.88%;
padding: 40px 36px;
border: 2px solid #e3e3e3;
}
div.c_two ul li:first-child {
margin-left: 0;
}
div.c_two ul li h6 {
margin-top: 25px;
font-size: 16px;
letter-spacing: 2px;
}
div.c_two ul li p {
margin-top: 20px;
font-size: 14px;
}
div.c_three {
}
div.c_three div:first-child {
width: 1200px;
height: 650px;
}
div.c_three .c_t_banner{
float: left;
display: block;
margin-top: 38px;
width: 100%;
text-align: center;
}
div.c_three div dl{
text-align: left;
float: left;
margin-top: 30px;
width: 45%;
border: 2px solid #e3e3e3;
padding: 20px;
}div.c_three div dl.interact{
float: right;
}
div.c_three div dl dt{
width: 100%;
}div.c_three div dl dd{
float: left;
width: 50%;
}
div.c_four {
background-color: #006bf9;
}
div.c_four div:first-child {
width: 1200px;
height: 240px;
background-color: #7ed74e;
}
div.c_five {
}
div.c_five div:first-child {
width: 1200px;
height: 370px;
background-color: #5cf9ff;
}
div.footer {
background-color: #233042;
}
div.footer div:first-child {
background-color: red;
width: 1200px;
padding: 32px 0;
}
<!DOCTYPE html>
<html lang="zh-cn">
<html lang="en">
<head>
<title>网页模板商城</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>网上“一窗办事”登记系统</title>
<meta name="copyright" content=" &reg 技术支持 All Rights Reserved"/>
<meta name="robots" content="index,follow"/>
<meta name="googlebot" content="index,follow,archive"/>
<link rel="alternate icon" type="image/png" href="images/logo-realestate.png">
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/default.min.css?t=227" />
<meta name="description" content=""/>
<meta name="Keywords" content=""/>
<!-- <script type="text/javascript" src="/js/jquery.min.js"></script>-->
<link type="text/css" rel="stylesheet" href="./css/global.css"/>
</head>
<body>
<header class="hd">
<div class="hd-top am-hide-md-down">
<div class="cg">
<div class="hd-top-left">
<a href="#">设为首页</a>
<a href="#">收藏</a>
<a href="#">RSS订阅</a>
<div class="subject top-logo">
<h1><a href="index.html"><img src="images/logo.jpg" alt="西安市不动产登记平台"/></a></h1>
<ul>
<li>登录</li>
<li>注册</li>
</ul>
</div>
<div class="nav">
<ul class="subject">
<li><a href="">首页</a></li>
<li><a href="">新闻动态</a></li>
<li><a href="">业务办理</a></li>
<li><a href="">政策法规</a></li>
<li><a href="">办事指南</a></li>
<li><a href="">查验中心</a></li>
<li><a href="">在线缴费</a></li>
<li><a href="">好差评</a></li>
</ul>
</div>
<div class="banner">
<ul class="subject">
<li><a href="">查询档案</a></li>
<li><a href="">进度查询</a></li>
<li><a href="">在线预约</a></li>
<li><a>网上预审</a></li>
</ul>
</div>
<div class="c_one">
<div class="subject">
<div class="news">
<h2><a href=""><span>新闻动态</span><i>查看全部 ></i></a></h2>
<a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="images/news_demo.jpg"
alt="图片新闻地信中心开展外业安全生产监控系统培训工作"/></a>
<ul>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="地信中心开展外业安全生产监控系统培训工作">地信中心开展外业安全生产监控系统… …<span>2020-08-19</span></a></li>
</ul>
</div>
<div class="hd-top-right">
<a href="register.html">注册</a>
<a href="login.html">登录</a>
<div class="notice">
<h2><a href=""><span>公示公告</span><i>查看全部 ></i></a></h2>
<ul>
<li><a href="" title="1地信中心开展外业安全生产监控系统培训工作">1地信中心开展外业安全生产监控系统培训工作</a></li>
<li><a href="" title="2地信中心开展外业安全生产监控系统培训工作">2地信中心开展外业安全生产监控系统培训工作</a></li>
<li><a href="" title="3地信中心开展外业安全生产监控系统培训工作">3地信中心开展外业安全生产监控系统培训工作</a></li>
<li><a href="" title="4地信中心开展外业安全生产监控系统培训工作">4地信中心开展外业安全生产监控系统培训工作</a></li>
<li><a href="" title="5地信中心开展外业安全生产监控系统培训工作">5地信中心开展外业安全生产监控系统培训工作</a></li>
<li><a href="" title="6地信中心开展外业安全生产监控系统培训工作">6地信中心开展外业安全生产监控系统培训工作</a></li>
</ul>
</div>
</div>
</div>
<div class="c_two">
<div class="subject">
<h2><a href="">办事指南</a></h2>
<ul>
<li>
<img src="images/two_s_1.jpg"/>
<h6>土地</h6>
<p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
</li>
<li>
<img src="images/two_s_1.jpg"/>
<h6>房屋建筑</h6>
<p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
</li>
<li>
<img src="images/two_s_1.jpg"/>
<h6>构筑物</h6>
<p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
</li>
<li>
<img src="images/two_s_1.jpg"/>
<h6>森林林木</h6>
<p>快速查看网站提供分全部数据地信中心开展外业安全生产监控系统培训工作</p>
</li>
</ul>
</div>
</header>
<footer class="footer">
</footer>
<script type="text/javascript">
var noticeimg = document.getElementById("noticeimg");
var imgslider = document.querySelectorAll(".imgslider");
var index = 0;
for (var i = 0; i < imgslider.length; i++) {
imgslider[i].index = i;
imgslider[i].onclick = function () {
index = this.index;
var herf = imgslider[index].getAttribute('data-clstag');
var src = imgslider[index].getAttribute('src');
noticeimg.children[0].setAttribute('href', herf);
noticeimg.getElementsByTagName("img")[0].setAttribute('src', src);
}
}
</script>
</body>
</div>
<div class="c_three">
<div class="subject">
<a class="c_t_banner" href=""><img src="images/three_img.jpg"/></a>
<dl>
<dt><h2>常见问题</h2></dt>
<dd><a href="">基础问题</a></dd>
<dd><a href="">继承登记</a></dd>
<dd><a href="">一手商品房办证</a></dd>
<dd><a href="">抵押登记</a></dd>
<dd><a href="">二手房办证</a></dd>
<dd><a href="">预售及网签</a></dd>
<dd><a href="">经济适用房登记</a></dd>
<dd><a href="">夫妻加减名变更</a></dd>
<dd><a href="">变更登记</a></dd>
<dd><a href="">夫妻离婚变更</a></dd>
</dl>
<dl class="interact">
<dt><h2>政民互动</h2></dt>
<dd>
<a>
<img src=""/>
<p>在线评价</p>
</a>
</dd>
<dd>
<a>
<img src=""/>
<p>在线留言</p>
</a>
</dd>
<dd>
<a>
<img src=""/>
<p>征集调查</p>
</a>
</dd>
<dd>
<a>
<img src=""/>
<p>即时聊天</p>
</a>
</dd>
</dl>
</div>
</div>
<div class="c_four">
<div class="subject"> dfadfasdf</div>
</div>
<div class="c_five">
<div class="subject"> dfadfasdf</div>
</div>
<div class="footer">
<div class="subject"> dfadfasdf</div>
</div>
</body>
</html>
\ No newline at end of file
<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="lib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="lib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="lib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="js/main.min.js?t=1"></script>
\ No newline at end of file
......