html+css demo

html

    
    






















































百度一下

目标网页


空链接


    

    

    

    




    

    

    




    
无序列表
    
“没有可以顺序的”列表,列表项包含在<li></li>标签对中，无序列表以<ul></ul>定义，项目前有符号缩进
    
有序列表
    
列表项包含在<li></li>标签对中，有序列表以<ol></ol>定义，项目前有数字或者字母缩进
    
定义列表
    
需要逐条给出定义描述的列表



    
帮助中心
    
账户管理
    
购物指南
    
订单操作









    文本框: 


    密码框: 


    单选框: 



    多选框: 



    上传文件: 
    性别: 男
    女

    

        
姓名
        
成绩
        
评语
    
    

        
小哥哥
        
100分
        
孩砸, 真棒啊
    
    

        
郭德纲
        
150分
        
没有郭德纲相声早黄了, 有了郭德纲, 相声更黄了
    

    
    
    
    

    
    

    
    

    
    

    
    

    

    
    
    



    北京
    上海
    广州
    深圳





这是div标签
这是div标签

这是span标签
这是span标签

网页头部
网页导航
网页底部
侧边栏
网页区块
文章

这是HTML文档, 现在要学         习字符实体.

青春不常在，抓紧谈恋爱


    昵称: 
    

    

    性别:
     男
     女
    



    所在城市:
    
        北京
        上海
        广州
    
    

    

    喜欢的类型:
     可爱
     性感
     御姐

    

    


    个人介绍: 

    
    
我承诺
    

        
年满18岁、单身
        
年满18岁、单身
        
年满18岁、单身
    
    
    
    重置

css

三种引入方式

/*引入方式：
1


2


3

*/

基础属性

.hehuixin{
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
    font-family: Arial ;

    text-indent: 2em;
    text-align: center;
    text-decoration: none;
    line-height: 20px;
    margin: 0 auto;
}

emmet语法 

 

 

选择器:hover { css }
背景属性
.bg{
    background-color: #fff;
    background-image: url("图片路径");
    background-repeat: no-repeat;
    background-position: 0 0;
    
}

元素显示模式转换

 盒子模型组成
1.内容区域：content 
2.边框区域：border

内

-----------------------------

外
3.内边距区域：padding
4.外边距区域：margin

盒子相关属性

.box{
    border-width: 10px;
    border-style: solid;
    border-color: aqua;
    border-top: 10px dashed yellow;

    padding:10px; 上
    padding:10px 20px; 上下
    padding:10px 20px 30px; 上下左
    padding:10px 20px 30px 40px; 上下左右

    box-sizing: border-box;

    margin:10px;
    margin:10px 20px;
    margin:10px 20px 30px;
    margin:10px 20px 30px 40px;

    margin-left: 20px;
}