Skip to content

J
jianchayuan
Commit 37c55989 authored by liuqing's avatar liuqing
Browse files
Options

五角场

parent 48295d56
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 100 deletions
index_01.html
View file @ 37c55989
......@@ -7,15 +7,54 @@
<script src="./static/js/flexible.js"></script>
<script src="./static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<link rel="stylesheet" href="./static/css/common.css">
<script>
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find("img").css("transform", "scale(1.2)"); /* 鼠标进入时将图片放大为1.2倍 */
}).mouseleave(function() {
$(this).find("img").css("transform", "scale(1)"); /* 鼠标离开时恢复图片原始大小 */
});
});
</script>
<style>
.loupan_map_box ul li img{
width: 1.2rem;
height: 1.4rem;
}
.box_map{
background-color: #081536;
border-style: solid;
border-width: 2px;
border-image-source: linear-gradient(0deg,
#00deff 0%,
#151934 50%,
#00deff 100%);
border-image-slice: 1;
opacity: 0.84;
margin: 0.5rem 0;
}
.box_map.bot::before{
content: '';
position: absolute;
top: 50%;
left: 53%;
height: 0.4rem;
width: 0.5rem;
background: url(./static/images/bot_icon.png) no-repeat;
transform: translateX(-50%);
}
.box_map.top::before{
content: '';
position: absolute;
top: 1.5rem;
left: 53%;
height: 0.4rem;
width: 0.5rem;
background: url(./static/images/top_icon.png) no-repeat;
transform: translateX(-50%);
}
.box_title{
padding: 0 0.1rem;
}
.box_title img{
width: 1rem !important;
height: 1rem !important;
}
.box_title span{
font-size: 0.45rem;
}
</style>
</head>
<body>
<div class="container">
......@@ -26,55 +65,105 @@
<div class="area-content">
<div class="loupan_map_box">
<ul>
<li class="index">
<li class="index_01">
<div class="box_map bot">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_01">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_02">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_02">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
<div class="box_map top">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
</li>
<li class="index_03">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_04">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_05">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_06">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_07">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_08">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_09">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_10">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_11">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_12">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_13">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_14">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_15">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
</ul>
<div class="box_map bot">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_04">
<div class="box_map bot">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_05">
<div class="box_map bot">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_06">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
<div class="box_map top">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
</li>
<li class="index_07">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
<div class="box_map top">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
</li>
<li class="index_08">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
<div class="box_map top">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
</li>
<li class="index_09">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
<div class="box_map top">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
</li>
<li class="index_10">
<div class="box_map bot">
<div class="box_title">
<img src="./static/images/dalou2-mianxing.png" alt="">
<span>五角场</span>
</div>
</div>
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
</ul>
</div>
</div>
</div>
......
static/css/common.css
View file @ 37c55989
......@@ -28,72 +28,71 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
.loupan_map_box ul li{
position: absolute;
}
.loupan_map_box ul .index{
left: 11rem;
top: 0.8rem;
}
.loupan_map_box ul .index_01{
right: 6rem;
top: 4rem;
/* .loupan_map_box ul .index_01{
left: 14rem;
top: 8rem;
}
*/
.loupan_map_box ul .index_01{
left: 12rem;
top: 3.6rem;
}
.loupan_map_box ul .index_02{
right: 6rem;
top: 4rem;
left: 15.5rem;
top: 7.5rem;
}
.loupan_map_box ul .index_03{
left: 9rem;
top: 6rem;
left: 6.7rem;
top: 6.8rem;
}
.loupan_map_box ul .index_04{
left: 14rem;
top: 6rem;
left:10rem;
top: 6.5rem;
}
.loupan_map_box ul .index_05{
right:14.8rem;
top: 7rem;
left: 3.5rem;
top: 8rem;
}
.loupan_map_box ul .index_06{
left: 7rem;
top: 8.5rem;
left: 6.5rem;
top: 11.5rem;
}
.loupan_map_box ul .index_07{
left: 10rem;
top: 11rem;
left: 9rem;
top: 10rem;
}
.loupan_map_box ul .index_08{
left: 10rem;
top: 11rem;
right: 12.5rem;
top: 10.7rem;
}
.loupan_map_box ul .index_09{
left: 12rem;
top: 14rem;
right: 9.2rem;
top: 10rem;
}
.loupan_map_box ul .index_10{
right: 7rem;
top: 12rem;
}
.loupan_map_box ul .index_11{
right: 11.5rem;
top: 9rem;
}
.loupan_map_box ul .index_12{
right: 14.5rem;
top: 13rem;
}
.loupan_map_box ul .index_13{
left:16rem;
top: 10.5rem;
}
.loupan_map_box ul .index_14{
left:15rem;
top: 9rem;
}
.loupan_map_box ul .index_15{
left:14rem;
top: 8rem;
right: 7rem;
top: 8rem;
}
.area-content .loupan_map_box{
background: url(../images/home_floor.png) no-repeat;
width: 34rem;
......
static/images/model_mc.png
View replaced file @ 48295d56 View file @ 37c55989
static/images/model_mc.png

5.5 KB | W: | H:

static/images/model_mc.png

3.49 KB | W: | H:

static/images/model_mc.png
static/images/model_mc.png
static/images/model_mc.png
static/images/model_mc.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment