将图片设置为背景的图片的案例

最新推荐文章于 2019-07-16 14:18:15 发布

怎么了没怎么

最新推荐文章于 2019-07-16 14:18:15 发布

阅读量632

点赞数

分类专栏： HTML实用案例

本文链接：https://blog.csdn.net/h_sq18/article/details/78451698

版权

HTML实用案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

将图片设置为背景

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度页面</title>
    <style type="text/css">
    /*将图片设置为背景*/
    *{
        margin:0 auto;
    }
     ul,li{
        list-style: none;
    }
    body{
        background-repeat: no-repeat;
        background-size:100% 100%;
        background-attachment:fixed;
    }
    .a{
        margin-top:50px;
        width:1000px;
        height:900px;
        background:#96F;
    }
    .b{
        margin:0 200px;
    }
    .search_butt{
        width:500px;
        height:30px;
        float:left;
        background:url(img/camera_off.png) no-repeat right center
    }
    .clear:after{/*在每个.class之后插入新内容*/
            content: "\200B";
            display: block;/*使段落生成行内框，每个框是一个块级元素*/
            height: 0;
            clear: both;/*是图像的左侧和右侧均不出现浮动*/
        }
        /*定义小图片集合样式*/
        .list{
            float: left;
            width: 700px;
        }   

    </style>

</head>
<body background="img/a11.jpg">
          <div class="a">
            <div style="margin:0 300px"><img src="img/logo.png"/></div>
            <div class="b">
                <input type="text"class="search_butt" />
                <input type="button" class="button" value="百度一下" style="background:#03F; height:38px;" />
            </div>
            <div class="box clear">

                <ul class="list clear">
                    <li><span class="btn"></span><p>大国外交</p></li>
                    <li><span class="btn"></span><p>大国外交</p></li>
                    <li><span class="btn"></span><p>大国外交</p></li>
                    <li><span class="btn"></span><p>大国外交</p></li>
                    <li><span class="btn"></span><p>大国外交</p></li>
                    <li><span class="btn"></span><p>大国外交</p></li>
                </ul>
            </div>

          </div>
</body>
</html>

怎么了没怎么

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将图片设置为背景的图片的案例

将图片设置为背景<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Co
复制链接

扫一扫

专栏目录