1.今日推荐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日推荐</title>
<style>
.a{
width: 300px;
height: 400px;
border: 1px solid gray;
border-radius: 10px;
}
h2{
display: inline-block;
}
.a div{
display: inline-block;
position: relative;
top: 25px;
}
ul{
list-style: none;
position: relative;
right: 20px;
}
.c {
float: right;
}
.b li{
margin-bottom: 20px;
}
.c li{
position: relative;
bottom: 290px;
}
.a .d{
position: relative;
z-index: 1;
right: 100px;
top: 70px;
}
.c a:hover{
color: red;
}
</style>
</head>
<body>
<div class="a">
<h2>SHOP 今日推荐</h2>
<div class="d"><img src="../案列八picture/shen.png"/></div>
<div style="float: right;"><img src="../案列八picture/more.gif"/></div>
<ul class="b">
<li><img src="../案列八picture/img7.gif"/></li>
<li><img src="../案列八picture/img8.gif"/></li>
<li><img src="../案列八picture/img9.gif"/></li>
</ul>
<ul class="c">
<li>
<a href=""> 汉来国际美食百货</a>
</li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="c">
<li>
<a href=""> 汉来国际美食百货</a>
</li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="c">
<li>
<a href=""> 汉来国际美食百货</a>
</li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
</div>
</body>
</html>2.京东轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播图</title>
<style>
ul li{
list-style: none;
}
ul span{
border-radius: 50%;
background: #333333;
color: white;
width: 20px;
height: 20px;
text-align: center;
float: left;
display: inline-block;
}
ul{
position: relative;
left:260px;
bottom: 50px;
}
.a{
display: none;
}
a:hover .a{
display: block;
}
</style>
</head>
<body>
<div>
<img src="../案列八picture/focus.jpg"/>
</div>
<ul>
<li>
<a href="">
<span>1</span>
<div class="a"><img src="../案列八picture/focus.jpg"/></div>
</a>
</li>
<li>
<a href="">
<span>2</span>
<div class="a"><img src="../案列八picture/focus.jpg"/></div>
</a>
</li>
<li>
<a href="">
<span>3</span>
<div class="a"><img src="../案列八picture/focus.jpg"/></div>
</a>
</li>
<li>
<a href="">
<span>4</span>
<div class="a"><img src="../案列八picture/focus.jpg"/></div>
</a>
</li>
</ul>
</body>
</html>