day4

AM

01.命名规范

css命名1.png

css命名02.png

css命名03.png

cssmm04.png

02.背景

背景重复
background-repeat：no-repeat 没有重复
background-repeat：repeat-x x轴方向重复
background-repeat：repeat-y y轴方向重复
background-repeat：repeat 容器铺满
background-position-x:横坐标方向
background-position-y:纵坐标方向
//传参 top，rigth，bottom，left，center
背景简写
background-position：x y；

03.背景简写

background:color image repeat position

04.背景吸附

background-attachment: scroll|fixed;

1.gif

05.背景大小

background-size：x y； x-->width y-->heigth
cover-->会覆盖整个div 特点：只能以大覆小

div{
            width: 800px;
            height: 300px;
            background: red url("images/banner.jpg") no-repeat center center;
            background-size: 100px 100px;
        }

05.png

06.文本颜色

rgb:三原色
r: 红色 00~ff
g: 绿色 00~ff
b: 蓝色 00~ff

07.文本

文本对齐
text-align:left|center|right
文本修饰
text-decoration:none|underline|overline|line-through
文本缩进
text-indent
文本转换
text-transfomr:uppercase|lowercase|capitalize

08.字体

最小的字体-->不要小于12px
font-size字体大小
字体样式
font-style:normal|italic
字体的权重
font-weight:bold|bolder|lighter
100-900

09.链接

link -->没有访问的链接
visited-->已经访问过的链接
hover-->鼠标移入到链接上的状态
active-->鼠标点击的那一刻
tip:同时使用链接的这几种状态,顺序不打乱

a:link{
            color:red;
        }
        a:visited{
            color:yellow;
        }
        a:hover{
            color:green;
        }
        a:active{
            color:blue;
        }
  京东

06.png

10.列表

列表样式
list-style:none;
列表样式类型
list-style-type:disc|circle|square
列表样式图片
list-style-image

11.表格

    

        

            
            
商城
手机
        
        

            
            
JD
苹果
            
Tmall
小米
            
苏宁
华为
        
    

07.png

pm

01.跨行表格

    

        
商城
鞋子
 
衣服
        
     
手机
钱包
        
     
拖鞋
Tshirt
    

08.png

 

    

        
商场
        
手机
衣服
        
鞋子
pen
        
服装
瓶子
    

09.png

02.轮廓

10.png

03.设置透明度

11.png

04.样式继承

12.png

heigth的继承

13.png

    
    
hello world
    

        
1
        
1
        
1
    
    

        hello
        
world
    

14.png