Github代码地址

css06背景图片 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--内部样式-->
    <style type="text/css">
   body{
      /* background-color: pink;/!*背景颜色*!/
       background-image: url("image/liqingzhao.jpg");/!*背景图片*!/
       background-position: 200px 50px; /!*设置背景图片的位置*!/
       background-repeat: no-repeat;/!*背景图片 填充方式*!/ */
       /*简写的方式*/
     background:pink url("image/cat.jpg")  200px 50px no-repeat ;
   }
    </style>
</head>
<body>
</body>
</html>

 商品分类

01.创建一个html页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全部商品分类</title>
    <link  type="text/css" rel="styleSheet"  href="css/demo1.css" />
</head>
<body>
<div id="nav">
    <div class="title">全部商品分类</div>
    <ul>
        <li><a href="#">图书</a>&nbsp;<a href="#">音像</a>&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;<a href="#">手机</a>&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;<a href="#">家装</a>&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;<a href="#">钟表</a>&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;<a href="#">旅行</a>&nbsp;<a href="#">充值</a>&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

02.创建对应的demo1.css文件

*{
    margin: 0px;  /*设置网页中所有的元素  外边距为0*/
}

#nav{
    width: 230px;  /*最大的div宽度*/
}

.title{
    height: 30px;  /*div的高度*/
    line-height: 30px;/*内容的行高*/
    color: white; /*字体颜色*/
    background:red url("../image/arrow-down.gif") 210px no-repeat; /*背景*/
    cursor: move; /*控制鼠标的形状为 可移动状态*/
}

ul{
    background-color: #D7D7D7;  /*背景颜色*/
}
a{
    text-decoration: none;  /*去掉超链接默认的下划线*/
}
li{
    background-image: url("../image/arrow-right.gif") ; /*背景图片*/
    background-repeat: no-repeat;   /*背景图片的填充方式*/
    background-position: 173px;     /*背景图片的位置*/
    line-height: 30px;     /*内容的行高*/
    /*list-style-image: url("../image/arrow-down.gif");  设置列表的标志图片*/
   /* list-style-type: decimal-leading-zero;  设置列表的标志类型*/
   /* list-style: decimal url("../image/arrow-down.gif") ; 类型和图片同时存在  取图片*/
   list-style: none;  /*去除标记*/
}

/* 超链接的伪类*/
/*a:link{  未访问的链接
    color:red;
}*/
/*a:visited{ 已经访问的链接
    color:darkcyan;
}*/
a:hover{/* 鼠标悬停的链接*/
    color:red;
    text-decoration: underline;/*给超链接增加下划线*/
}
/*
a:active｛ 点或者是被选中的链接
    color:yellow;
}*/

03.效果图

 

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对背景图片的大小进行设置</title>
    <style type="text/css">
           div{
               height: 200px;
               width: 200px;
               border: 5px solid red;
               background: url("images/cat.jpg") no-repeat;
               background-size: cover;  /*对背景图片的大小进行设置*/
           }
    </style>
</head>
<body>
 <div></div>
</body>
</html>

 

posted @ 2016-11-09 14:15  @小葱拌豆腐  阅读(497)  评论(1)  编辑  收藏  举报

霸气