html基本常见组件和效果设置

最新推荐文章于 2024-06-17 19:17:09 发布

kinglyjn

最新推荐文章于 2024-06-17 19:17:09 发布

阅读量4.7k

点赞数 2

分类专栏： HTML&CSS 文章标签： html css3

本文链接：https://blog.csdn.net/kinglyjn/article/details/53924595

版权

HTML&CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

导航栏列表

<!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>

效果预览

kinglyjn

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html基本常见组件和效果设置

导航栏列表<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>CSS3_最简单的导航栏</title> <style type="text/css"> /*垂直导航栏，不需要更改html代码*/ /* ul { list-style-type: non
复制链接

扫一扫

专栏目录