Skip to content

任超 / js.portalStaticPage

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

feat:首页

1 parent f1253678
Inline Side-by-side
Showing 7 changed files with 535 additions and 55 deletions
......@@ -8,6 +8,9 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
background: transparent;
font-family: Arial;
}
.clearfix {
overflow: auto;
}
/*================首页 start=====================*/
......@@ -183,7 +186,8 @@ div.banner ul li a {
.laws_regulations {
width: 1200px;
margin: 0 auto;
padding: 60px 0;
padding: 50px 0;
overflow: hidden;
}
.laws_regulations .regulations, .policy {
border-radius: 2px;
......@@ -198,28 +202,191 @@ div.banner ul li a {
.laws_regulations .regulations{
float: left;
padding-left: 5px;
}
.laws_regulations .regulations h2 a{
.laws_regulations .title h2 a{
display: block;
padding: 20px;
box-sizing: border-box;
height: 60px;
box-sizing: border-box;
border-bottom: 1px solid #E6E6E6;
width: 100%;
}
.laws_regulations .regulations h2 a p{
.laws_regulations .title h2 a p{
font-weight: 600;
color: #4A4A4A;
line-height: 20px;
float: left;
height: 36px;
border-bottom: 2px solid #006CFF;
}
.laws_regulations .regulations h2 i{
.laws_regulations .title h2 a p span {
position: relative;
}
.laws_regulations .title h2 i{
font-style: normal;
float: right;
font-size: 14px;
color: #9B9B9B;
line-height: 14px;
}
.laws_regulations .title h2 i:hover {
color: #f46143;
}
.laws_regulations .laws_list {
padding: 0 21px;
}
.laws_regulations .laws_list li{
height: 50px;
line-height: 50px;
padding-left: 3px;
}
.laws_regulations .laws_list li a{
display: block;
white-space:nowrap; /*文本不换行*/
text-overflow:ellipsis;/*设置超出部分显示...*/
-o-text-overflow:ellipsis;
overflow: hidden;
width: 380px;
}
.laws_regulations .laws_list li a:hover {
color: #f46143;;
}
.laws_regulations .laws_list li:not(:last-child) {
border-bottom: 1px dotted #DEDEDE;
}
/* ---------------end----------------------- */
/* ---------------好差评start---------------------------- */
.Good_bad_reviews {
width: 100%;
height: 180px;
}
.Good_bad_reviews img {
width: 100%;
height: 100%;
}
/* ------------------end----------- */
/* -------------常见问题start--------------------- */
.common_question {
padding: 40px;
background-color: #F6F9FB;
}
.common_question .subject_con {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.common_question .subject, .interact{
border-radius: 2px;
width: 48%;
border: 1px solid #DEDEDE;
background-color: #ffffff;
}
.common_question .list_content , .list_content_right{
padding: 10px 20px 20px 20px;
box-sizing: border-box;
}
.common_question .list_content dd {
height: 50px;
line-height: 50px;
}
.common_question .list_content dd a{
display: inline-block;
width: 40%;
height: 50px;
line-height: 50px;
border-bottom: 1px dotted #DEDEDE;
}
.common_question .list_content dd a:hover {
color: #f46143;
}
.common_question .list_content dd a:first-child {
float: left;
}
.common_question .list_content dd a:last-child {
float: right;
}
.common_question .list_content dd:last-child a{
border: none;
}
.common_question .subject {
float: left;
}
.common_question .interact {
float: right;
}
.common_question .title h2 a{
display: block;
padding: 20px;
box-sizing: border-box;
height: 60px;
box-sizing: border-box;
border-bottom: 1px solid #E6E6E6;
width: 100%;
}
.common_question .title h2 a p{
font-weight: 600;
color: #4A4A4A;
float: left;
height: 36px;
border-bottom: 2px solid #006CFF;
}
.common_question .title h2 a p span {
position: relative;
}
.common_question .title h2 i{
font-style: normal;
float: right;
font-size: 14px;
color: #9B9B9B;
}
.common_question .title h2 i:hover {
color: #f46143;
}
.common_question .list_content_right {
text-align: center;
padding-bottom: 8px;
box-sizing: border-box;
overflow: hidden;
}
.common_question .list_content_right dd{
width: 49%;
float: left;
height: 130px;
text-align: center;
}
.common_question .list_content_right dd {
border-right: 1px dotted #DEDEDE;
border-bottom: 1px dotted #DEDEDE;
}
.common_question .list_content_right dd:nth-of-type(n+3) {
border-bottom: none;
}
.common_question .list_content_right dd:nth-child(even){
border-right: none;
}
.common_question .list_content_right dd a {
display: block;
position: relative;
top:50%;
height: 70px;
transform:translateY(-50%);
}
.common_question .list_content_right dd a img{
width: 70px;
height: 70px;
display: inline-block;
}
.common_question .list_content_right dd a p{
display: inline-block;
position: relative;
left: 0;
top: -25px;
}
/* -----------------end---------------------------- */
div.c_one {
}
......@@ -364,6 +531,7 @@ div.c_two ul li {
margin-left: 2.88%;
padding: 40px 36px;
border: 1px solid #E6E6E6;
background: #ffffff;
}
div.c_two ul li:first-child {
......@@ -382,11 +550,13 @@ div.c_two ul li p {
}
div.c_three {
width: 100%;
background: #F6F9FB;
}
div.c_three div:first-child {
width: 1200px;
height: 650px;
height: 360px;
}
div.c_three .c_t_banner{
float: left;
......@@ -413,32 +583,126 @@ width: 100%;
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 h2 {
text-align: center;
font-size: 24px;
margin-bottom: 30px;
}
div.c_five div:first-child {
width: 1200px;
height: 370px;
background-color: #5cf9ff;
padding: 40px 0 20px 0;
}
div.c_five ul {
width: 100%;
height: auto;
overflow: hidden;
}
div.c_five ul li{
float: left;
width: 25%;
padding-right: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
div.c_five ul li:nth-child(4n+4) {
padding-right: 0;
}
div.c_five ul li a {
display: block;
height: 60px;
border-radius: 1px;
border: 1px solid #DEDEDE;
box-sizing: border-box;
width: 100%;
box-sizing: border-box;
}
div.c_five ul li a img {
height: 100%;
}
/* -----------------底部start----------------------------- */
div.footer {
background-color: #233042;
}
div.footer div:first-child {
background-color: red;
div.footer .system_service {
width: 100%;
border-bottom: 1px solid #4A4A4A;
}
div.footer .system_service ul {
padding: 40px 0;
width: 1400px;
margin: 0 auto;
font-size: 0;
}
div.footer .system_service ul li {
width: 20%;
display: inline-block;
text-align: center;
height: 18px;
box-sizing: border-box;
}
div.footer .system_service ul li:not(:last-child) {
border-right: 1px solid #6D7278;
}
div.footer .system_service ul li a{
font-size: 16px;
font-weight: 400;
color: #DEDEDE;
}
.footer .subject {
width: 1200px;
padding: 32px 0;
margin: 0 auto;
padding: 40px 0;
overflow: hidden;
}
.footer .subject .footer_logo {
float: left;
}
.footer .subject .footer_logo a{
display: block;
width: 64px;
height: 74px;
padding: 10px;
}
.footer .subject .footer_logo a img {
width: 100%;
height: 100%;
}
.footer .subject ul, ol {
float: left;
color: #CBCBCB;
text-align: left;
}
.footer .subject ul {
width: 73%;
box-sizing: border-box;
padding-left: 40px;
margin-top: 10px;
}
.footer .subject ul li {
width: 30%;
display: inline-block;
text-align: left;
margin-bottom: 30px;
}
.footer .subject ol li {
display: inline-block;
text-align: center;
}
.footer .subject ol li:last-child {
margin-left: 60px;
}
.footer .subject ol li img {
width: 80px;
height: 80px;
}
.footer .subject ol li p {
font-size: 12px;
color: #CBCBCB;
margin-top: 5px;
}
\ No newline at end of file
......
......@@ -125,8 +125,8 @@
</div>
</div>
<!-- 法律法规 -->
<div class="laws_regulations ">
<div class="regulations">
<div class="laws_regulations">
<div class="regulations title">
<h2>
<a href="">
<p>
......@@ -135,68 +135,284 @@
<i>查看全部 ></i>
</a>
</h2>
<ul class="laws_list">
<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="policy title">
<h2>
<a href="">
<p>
<span>相应政策</span>
</p>
<i>查看全部 ></i>
</a>
</h2>
<ul class="laws_list">
<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="policy">
你的内容 3/12
</div>
<!-- 好差评 -->
<div class="Good_bad_reviews">
<img src="./images/bannerbg.png" title="背景">
</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>
<!-- 常见问题，政民互动 -->
<div class="common_question">
<div class="subject_con">
<dl class="subject">
<dt class="title">
<h2>
<a href="">
<p>
<span>常见问题</span>
</p>
<i>查看全部 ></i>
</a>
</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>
<div class="list_content">
<dd>
<a href="">基础问题</a>
<a href="">继承登记</a>
</dd>
<dd>
<a href="">一手商品房办证</a>
<a href="">抵押登记</a>
</dd>
<dd>
<a href="">二手房办证</a>
<a href="">预售及网签</a>
</dd>
<dd>
<a href="">经济适用房登记</a>
<a href="">夫妻加减名变更</a>
</dd>
<dd>
<a href="">变更登记</a>
<a href="">夫妻离婚变更</a>
</dd>
</div>
</dl>
<dl class="interact">
<dt>
<h2>政民互动</h2>
<dt class="title">
<h2>
<a href="">
<p>
<span>政民互动</span>
</p>
<i>查看全部 ></i>
</a>
</h2>
</dt>
<div class="list_content_right">
<dd>
<a>
<img src="" />
<img src="./images/two_s_1.jpg" />
<p>在线评价</p>
</a>
</dd>
<dd>
<a>
<img src="" />
<img src="./images/two_s_1.jpg" />
<p>在线留言</p>
</a>
</dd>
<dd>
<a>
<img src="" />
<img src="./images/two_s_1.jpg" />
<p>征集调查</p>
</a>
</dd>
<dd>
<a>
<img src="" />
<img src="./images/two_s_1.jpg" />
<p>即时聊天</p>
</a>
</dd>
</div>
</dl>
</div>
</div>
<div class="c_four">
<div class="subject"> dfadfasdf</div>
<!-- 友情链接 -->
<div class="c_five Links">
<div class="subject">
<h2>
<a href="">
友情链接
</a>
</h2>
<ul>
<li>
<a href="">
<img src="./images/guotuziyuanbao.png">
</a>
</li>
<li>
<a href="">
<img src="./images/zhongyangzhengfuwang.png">
</a>
</li>
<li>
<a href="">
<img src="./images/zhongyangzhengfuwang.png">
</a>
</li>
<li>
<a href="">
<img src="./images/guotuziyuanbao.png">
</a>
</li>
<li>
<a href="">
<img src="./images/guotuziyuanbao.png">
</a>
</li>
<li>
<a href="">
<img src="./images/zhongyangzhengfuwang.png">
</a>
</li>
<li>
<a href="">
<img src="./images/guotuziyuanbao.png">
</a>
</li>
<li>
<a href="">
<img src="./images/zhongyangzhengfuwang.png">
</a>
</li>
</ul>
</div>
<div class="c_five">
<div class="subject"> dfadfasdf</div>
</div>
<div class="footer">
<div class="subject"> dfadfasdf</div>
<div class="system_service">
<ul class="">
<li>
<a href="">
<span>公示公告</span>
</a>
</li>
<li>
<a href="">
<span>法律法规</span>
</a>
</li>
<li>
<a href="">
<span>相应政策</span>
</a>
</li>
<li>
<a href="">
<span>下载服务</span>
</a>
</li>
<li>
<a href="">
<span>关于我们</span>
</a>
</li>
</ul>
</div>
<div class="subject">
<div class="footer_logo">
<a href="">
<img src="./images/jiguan.png">
</a>
</div>
<ul>
<li>
西安市自然资源和规划局
</li>
<li>
电话：028-456465
</li>
<li>
地址：西安市丰城8路
</li>
<li>
网站标识吗：87987987
</li>
<li>
备案：陕IPC456465465
</li>
<li>
陕公网备案：456465465
</li>
</ul>
<ol>
<li>
<img src="./images/code.png">
<p>扫描关注公众号</p>
</li>
<li>
<img src="./images/code.png">
<p>扫描关注公众号</p>
</li>
</ol>
</div>
</div>
</body>
......