列表样式练习、背景图像应用及渐变、盒子模型 2022-1-26

一、列表样式练习

    
    
    



    
全部商品分类
    

        
图书  音响  数字商品
        
家用电器  手机  数码
        
电脑  办公
        
家居  家装  厨具
        
服饰鞋帽  个护化妆
        
礼品箱包  钟表  珠宝
        
食品饮料  保健食品
        
彩票  旅行  充值  票务
    

div{
    width: 250px;
    background: #eeeff1;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
ul li{
    /*background: #eeeff1;*/
    text-indent: 1em;
    list-style: none;
}
a{
    color: #000000;
    text-decoration: none;
}
a:hover{
    color: #c907ff;
    text-decoration: underline;
}

二、背景图像应用及渐变

2.1背景颜色、背景图片

background-repeat: repeat-x

2.2练习

重要代码：

    background: red url("../images/向下.png") 230px 10px no-repeat;

	background-image: url("../images/向右.png");
    background-repeat: no-repeat;
    background-position: 190px 2px;

完整代码

div{
    width: 250px;
    background: #eeeff1;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red url("../images/向下.png") 230px 10px no-repeat;

}
ul li{
    /*background: #eeeff1;*/
    text-indent: 1em;
    list-style: none;
    background-image: url("../images/向右.png");
    background-repeat: no-repeat;
    background-position: 190px 2px;

}
a{
    color: #000000;
    text-decoration: none;
}
a:hover{
    color: #c907ff;
    text-decoration: underline;
}

2.3渐变

三、盒子模型

3.1什么是盒子模型

margin:外边距
padding:内边距
border:边框

3.2边框

3.2.1边框的粗细、边框的样式、边框的颜色

    
    
    



    
会员登录
    

        

            用户名
            
        
        

            密码
            
        
        

            手机号