电子相册的制作代码

来源:互联网 发布:去掉原唱的软件 编辑:程序博客网 时间:2024/04/30 15:41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="电子相册.css">
</head>
<body>
<!-- 内容区 -->
<div class="content">
<!-- tltle -->
<div class="content_title">
<span>电子相册</span>
<span>-天使在人间</span>
</div>
<!-- 展示区 -->
<div class="show_img clearfix">
<div class="left">
<ul>
<li id="img1"><img src="images/mn1.jpg" alt=""></li>
<li id="img2"><img src="images/mn2.jpg" alt=""></li>
<li id="img3"><img src="images/mn3.jpg" alt=""></li>
<li id="img4"><img src="images/mn4.jpg" alt=""></li>
<li id="img5"><img src="images/mn5.jpg" alt=""></li>
<li id="img6"><img src="images/mn6.jpg" alt=""></li>
<li id="img7"><img src="images/mn7.jpg" alt=""></li>
</ul>
</div>
<div class="right">
<ul>
<li ><a href="#img1" ><img src="images/s1.jpg" alt=""></a></li>
<li ><a href="#img2" ><img src="images/s2.jpg" alt=""></a></li>
<li ><a href="#img3" ><img src="images/s3.jpg" alt=""></a></li>
<li ><a href="#img4" ><img src="images/s4.jpg" alt=""></a></li>
<li ><a href="#img5" ><img src="images/s5.jpg" alt=""></a></li>
<li ><a href="#img6" ><img src="images/s6.jpg" alt=""></a></li>
<li ><a href="#img7" ><img src="images/s7.jpg" alt=""></a></li>
</ul>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<p>奥熊丽 赫本</p>
<p>www.aodali</p>
</div>
</div>
</body>

</html>


@charset="utf-8";
*{margin: 0;padding: 0;}
.clearfix:after{content: "";display: block;clear: both;height: 0;}
.clearfix:{-ms-zoom:1;}
a{text-decoration: none;color: black;}
li{list-style: none;}
body{background-color: black;}
.content{width: 800px;height: 500px;margin: 0 auto;
border: 2px solid white;margin-top: 100px;}




.content_title{height: 100px;line-height: 100px;text-align: center;
}
.content_title span:first-child{color: white;font-size: 18px;
font-weight: bold;vertical-align: middle;}
.content_title span:last-child{color: white;font-size: 30px;
font-weight: bold;vertical-align: middle;}


.show_img>.left{overflow: hidden;width: 400px;height: 280px;
float: left;margin-left: 32px; }
.show_img>.right{float: right;overflow: scroll;width: 180px;height:280px;
}
.footer{margin-top: 20px;}
.footer p{color: white;}
.footer a{color: white;}








0 0
原创粉丝点击