html+css知识总结(1)

1:简单标签

标题标签

段落标签
换行标签 加粗标签 加粗标签 加粗标签 加粗标签 删除线 删除线 下划线 下划线

独占一行,相当于一个大盒子 不是独占一行,一行可以有好多个span 用于显示页面的图像,alt替换文本,图像不能显示文字,title是鼠标放在图像上会产生提示文字 打开 //这种方式是在新的页面打开 打开 //这种方式是在当前页面打开 打开 //打开当前文件夹下的页面 打开 //跳转到页面的最上方 打开 //下载文件 //图片当超链接进行跳转 你好//跳转到id为live的标签处

2:表格标签

        
姓名 性别年龄
刘德华 51
        
排名关键词趋势进入搜索最近七日相关链接
1 鬼吹灯 456 123 向上向下向左

合并单元格:

            
                
                
            
            
                
                
                
            
            
                
                
            
            
                
                
                
            

3:列表

    

你喜欢吃什么水果

//无序列表
  • 火龙果
  • 西瓜
  • 草莓
    

你喜欢吃什么水果

//有序列表
  1. 火龙果
  2. 西瓜
  3. 草莓
        
联系我们
//自定义列表
电话:123456
邮箱:[email protected]

4:表单

        
用户名:
密码:
性别:男
爱好:吃饭睡觉

5:label标签

        
        用户名:
        
        

6:下拉表单+文本域

        

        

CSS

1:标签选择器、类选择器




class -> .class
id    -> #id

2:css文本属性



 
你好 //调用多个类样式

3:    引入css文件

4:修改链接在鼠标不同位置的颜色

ol li{

}   //选择子标签

a:hover{
    color: skyblue;
}

        input:focus{
            background-color: pink;
        }

5:元素类型转换

 display: block; //转化为块级元素,独占一行
 display: inline //行内元素不能设置宽度和高度,转化为行内元素
 display: inline-block //行内块元素,可以设置宽度和高度

6:html实现侧边栏




    
    第一个页面
    




    

7:背景属性

background-image: url(images/Logo.png);
background-repeat: repeat-x;  //背景平铺
background-position: center right; //设置背景位置

background-attachment: scroll; //图片可以滚动,或者fixed表示固定

8:盒子模型

        div{
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            border-color: pink;
        }


padding-left //padding设置盒子内边距

margin-top: 10px; //margin设置盒子外边距

9:导航栏




    
    第一个页面
    



    

10:设计产品案例




    
    第一个页面
    


    

烧鸡

来自于015的评价

黑色...

| 800元

11:消除li的小圆点

li{
list-style:none //消去li的小圆点
}

12:rgba(0,0,0,0.3):设置透明度和颜色

13:box-shadow:10px 10px 10px 10px black设置盒子阴影

14:浮动




    
    第一个页面
    


    
  • 1
  • 2
  • 3
  • 4

15:消除页面内缝隙

        *{
            margin: 0;
            padding: 0;
        }

16:案例说明定位以及浮动

定位用position,包括absolute,relative。如果要发挥作用就必须加上top,left等属性




    
    小陈的美食铺
    


    
    
    
 
    
    
 
    
    

精品推荐

查看全部
  • 芝士焗大虾

    3万元
  • 加州卷

    1万元
  • 黑松露米龙牛排

    100万元
  • 冬瓜排骨汤

    20万元
  • 骨肉相连

    5万元
  • 牛骨肉

    50万元
  • BUTTERFUL面包

    30万元
  • 茶歇甜点

    0.5万元
  • 普洱茶+包间

    2万元
  • 铁锅炖

    30万元

17:.box-bd ul li > img 找到li的第一个img标签,而不再继续找嵌套标签

18:z-index设置盒子的比重,就可以规定什么盒子在什么盒子的上面,可以解决浮动的盒子覆盖标准流盒子的问题

你可能感兴趣的:(html5)