导航栏列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3_最简单的导航栏</title>
<style type="text/css">
/*垂直导航栏,不需要更改html代码*/
/*
ul {
list-style-type: none;
margin:0;
padding:0;
}
a:link, a:visited {
text-decoration: none;
color: white;
background-color: chocolate;
display: block;
width:50px;
text-align: center;
}
a:active,a:hover {
background-color: green;
}
*/
/*水平导航栏*/
ul {
list-style-type: none;
margin:0;
padding:10px;
background-color: lightgray;
width: 300px;
text-align: center;
}
li {
display: inline;
padding: 5px;
}
a:link, a:visited {
font-weight:normal;
text-decoration: none;
color: white;
background-color: gray;
width:50px;
padding: 5px;
text-align: center;
}
a:active,a:hover {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
</html>
效果图:
图片列导航
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3_图片列导航</title>
<style type="text/css">
body {
margin: 10px auto;
width:70%;
height:auto;
}
.image {
border:1px solid darkgray;
width:auto;
height:auto;
float: left;
text-align:center;
margin:5px;
}
img {
margin: 5px;
opacity: 0.9; /*透明度*/
}
.text {
font-size: 12px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="image">
<a href="#">
<img src="image1.jpg" alt="风景" width="200px" height="200px" onerror="xxx.xxx">
</a>
<div class="text">8月份的维多利亚</div>
</div>
<div class="image">
<a href="#">
<img src="image1.jpg" alt="风景" width="200px" height="200px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
<div class="image">
<a href="#">
<img src="image1.jpg" alt="风景" width="200px" height="200px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
<div class="image">
<a href="#">
<img src="image1.jpg" alt="风景" width="200px" height="200px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
<div class="image">
<a href="#">
<img src="image1.jpg" alt="风景" width="200px" height="200px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
</body>
</html>
布局效果:
图片瀑布流
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3_页面特效_多列</title>
<link href="mysyle.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div><img src="4.jpg"></div>
<div><img src="5.jpg"></div>
<div><img src="6.jpg"></div>
<div><img src="7.jpg"></div>
<div><img src="8.jpg"></div>
<div><img src="9.jpg"></div>
<div><img src="10.jpg"></div>
<div><img src="11.jpg"></div>
<div><img src="12.jpg"></div>
<div><img src="13.jpg"></div>
<div><img src="14.jpg"></div>
<div><img src="15.jpg"></div>
</div>
</body>
</html>
//mystyle.css
div.container {
width:100%;
column-width: 250px;
-webkit-column-width:170px;
column-gap: 5px;
-webkit-column-gap: 10px;
}
div.container div {
margin-top:0;
margin-bottom: 5px;
}
img {
width:250px;
}
效果图:
内容多列
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3_多列</title>
<style type="text/css">
/*多列参数介绍:
colomn-count:指定列数
column-gap:指定列间距
column-rule:指定列与列之间的线
*/
div.content {
column-count: 4;
-webkit-column-count: 4;
column-gap: 50px;
-webkit-column-gap: 50px;
column-rule: 5px outset lightgray;
-webkit-column-rule: 5px outset lightgray;
}
</style>
</head>
<body>
<div style="width:80%;margin:0 auto;">
<div style="height:50px;background-color:green;margin-bottom:20px;text-align:center;line-height:50px">标题</div>
<div class="content">
gap sale页面为您提供各类限时特惠信息,1111111精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,22222222精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,33333333精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,44444444精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,55555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,6666666精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,777777精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,88888888精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,999999999精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,5555555精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
gap sale页面为您提供各类限时特惠信息,10110101精选春季新品享限时7-8折优惠,全长场正价长裤75折优惠哦
</div>
</div>
</body>
</html>
效果图:
HTML5音频、视频、文档预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html文件测试</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script type="text/javascript" src="http://sources.ikeepstudying.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://sources.ikeepstudying.com/jquery.media/jquery.media.js"></script>
<script type="text/javascript">
$(function() {
$('a.media').media({width:800, height:600});
});
</script>
</head>
<body>
<!--音频-->
<p>音频测试</p>
<hr>
<audio src="http://nginxweb/2016068.mp3" controls="controls" loop="loop" style="display:block;">
<source src="http://nginxweb/2016068.mp3" type="audio/ogg">
<source src="http://nginxweb/2016068.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<!--视频-->
<p>视频测试</p>
<hr>
<video controls="controls" autoplay="autoplay" loop="loop" style="display:block;" width="640" height="352">
<!-- 兼容 Firefox -->
<source src="http://nginxweb/mp4test.mp4" type="video/ogg"/>
<!-- 兼容 Safari/Chrome-->
<source src="http://nginxweb/mp4test.mp4" type="video/mp4"/>
<!-- 如果浏览器不支持video标签,则使用flash -->
<embed src="http://nginxweb/mp4test.mp4" type="application/x-shockwave-flash"
width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed>
Your browser does not support the video tag.
</video>
<!--jquery.media.js实现文件预览-->
<p>文档测试</p>
<hr>
<a class="media" href="http://nginxweb/attack.pdf">PDF File</a>
</body>
</html>
效果预览