07-html练习

作者: 努力爬行中的蜗牛 | 来源:发表于2018-12-10 14:02 被阅读5次

background属性

属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个符合属性，它可以分解成如下几个设置项：

background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如："background：#00FF00 url(bgimage.gif) no-repeat left center fixed",这里面的"#00ff00"是设置background-color，"url(bgimage.gif)"是设置background-image;"not-repeat"是设置background-repeat；"left center"是设置background-position；"fixed"是设置background-attachment，各个设置项用空格隔开，有的设置项不写也可以的，他会使用默认值。

<!DOCTYPE html>
<html>
<head>
    <title>background属性</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 200px;
            border: 5px solid #000;
            margin: 50px auto 0;
            /*background-image: url(images/bg.jpg);*/
            /*
                repeat-x:只平铺x轴方向;
                repeat-y:只屏幕y轴方向;
                repeat:缺省值，平铺所有的;
                no-repeat：只平铺一次
            */
            /*background-repeat: no-repeat;*/
            /*
                水平方向：left center right
                垂直方向：left center right
            */
            /*background-position: left center;*/
            /*background-position: 10px 10px;*/

            /*background-color: cyan;*/
            background: url(images/bg.jpg) 20px 10px no-repeat cyan;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <img src="images/bg.jpg" alt="h5"> -->
        html5图片
    </div>

</body>
</html>

demo

<!DOCTYPE html>
<html>
<head>
    <title>背景图定位</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            border: 5px solid #000;
            margin: 50px auto 0;
            background: url(images/location_bg.jpg) -103px -151px no-repeat;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>

</body>
</html>

雪碧图
雪碧图，就是将我网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。
步骤：
1、使用photoshop新建一张背景透明的图片
2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小
3、按照所有小图片的范围裁剪图片，村委透明背景的png图片

<!DOCTYPE html>
<html>
<head>
    <title>雪碧背景图</title>
    <style type="text/css">
        .list {
            list-style: none;
            width: 300px;
            height: 305px;
            margin: 50px auto 0;
            padding: 0;
            background: cyan;
        }

        .list li {
            height: 60px;
            border-bottom: 1px dotted #000;
            line-height: 60px;
            text-indent: 50px;
            background: url(images/bg01.png) left 10px no-repeat cyan;
        }

        .list .icon02 {
            background-position: left -71px;
        }

        .list .icon03 {
            background-position: left -154px;
        }

        .list .icon04 {
            background-position: left -235px;
        }

        .list .icon05 {
            background-position: left -315px;
        }

    </style>
</head>
<body>
    <ul class="list">
        <li>美人鱼</li>
        <li class="icon02">美人鱼</li>
        <li class="icon03">美人鱼</li>
        <li class="icon04">美人鱼</li>
        <li class="icon05">美人鱼</li>
    </ul>

</body>
</html>

背景图片固定不动

<!DOCTYPE html>
<html>
<head>
    <title>background属性</title>

    <style type="text/css">
        body {
            background: url(images/0022.jpg) fixed;
            /*background-attachment: fixed;*/
        }

        p {
            text-align: center;
        }
    </style>

}
</head>
<body>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>网页文字</p>
    <br>
    <br>
    <br>
    <br>
    <br>

</body>
</html>

翻页效果导航条demo

<!DOCTYPE html>
<html>
<head>
    <title>翻页效果 导航条</title>
    <style type="text/css">
        .pagenation {
            list-style: none;
            margin: 50px auto 0;
            width: 600px;
            height: 40px;
            border: 1px solid #666;
            text-align: center;
        }

        .pagenation li {
            display: inline-block;
            height: 26px;
            font-size: 12px;
            margin-top: 7px;
        }

        .pagenation li a {
            display: block;
            background-color: gold;
            height: 26px;
            line-height: 26px;
            text-decoration: none;
            padding: 0 10px;
            font: normal 12px/26px 'Microsoft Yahei';
            color: #000;
        }

        .pagenation li a:hover {
            background-color: red;
            color: #fff;
        }

        .menu {
            list-style: none;
            margin: 50px auto 0;
            padding: 0;
            width: 958px;
            height: 40px;
            border: 1px solid #666;
            text-align: center;
            font-size: 0;
        }

        .menu li {
            display: inline-block;
            font-size: 14px;
            height: 40px;
        }

        .menu li a {
            display: block;
            height: 40px;
            font: normal 14px/40px 'Microsoft Yahei';
            text-decoration: none;
            color: #000;
        }

        .menu li a:hover {
            color: #ff8800;
        }

        .menu li span {
            display: block;
            height: 40px;
            font: normal 14px/40px 'Microsoft Yahei';
            margin: 0 20px;
        }

        .menu02 {
            list-style: none;
            margin: 50px auto 0;
            padding: 0;
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
            position: relative;
        }

        .menu02 li {
            width: 100px;
            height: 40px;
            float: left;
        }

        .menu02 li a {
            display: block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            font-family: 'Microsoft Yahei';
            color: #fff;
            text-decoration: none;
        }

        .menu02 li a:hover {
            background-color: #00619f;
        }

        .menu02 .new {
            width: 33px;
            height: 20px;
            background: url(images/new.png) no-repeat;
            position: absolute;
            left: 432px;
            top: -10px;
        }
    </style>
</head>
<body>
    <ul class="pagenation">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><span>...</span></li>
        <li><a href="#">17</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">下一页</a></li>
    </ul>


    <ul class="menu">
        <li><a href="#">网站介绍</a></li>
        <li><span> | </span></li>
        <li><a href="#">网站介绍</a></li>
        <li><span> | </span></li>
        <li><a href="#">网站介绍</a></li>
        <li><span> | </span></li>
        <li><a href="#">网站介绍</a></li>
        <li><span> | </span></li>
        <li><a href="#">网站介绍</a></li>
        <li><span> | </span></li>
        <li><a href="#">网站介绍</a></li>
        <li><span> | </span></li>
        <li><a href="#">网站介绍</a></li>
    </ul>

    <ul class="menu02">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li class="new"></li>
    </ul>

</body>
</html>

07-html练习

background属性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读