day02

今天学到了什么

1.常用HTML标签

1.1 段落标签

hello world

1.2 图片标签

 //其中alt属性是当图片无法显示时对图片的描述,
为换行标签

1.3 文本框，按钮

百度一下

1.4 无序列表ul，列表项li

 
 
        
小米手机
        
苹果手机
        
三星手机
 

1.5 链接标签

 //点击时为自动跳转到网站

1.6 定义标签

                    //定义列表
        
HTML
   //定义的术语
        
456
    //定义的描述

2.CSS样式

2.1 常用的css样式

color:设置文字的颜色
width:设置一个元素的宽度
height:设置一个元素的高度
background-color:设置背景颜色
background-image:设置一个元素的背景图片
line-height:设置文字的行高
text-align:设置文字对其的方式
border-width:边框的宽度

2.2 给

设置一个样式

        p{
            background-color: pink;   /* 背景颜色 */ 
            height: 50px;               /* 设置一个高度 */
            line-height: 50px;          /* 行高会让文本在行高中垂直居中 */
            color: white;             /* 字体颜色 */
            text-align: center;         /* 设置文本的对其方向*/
            font-size: 20px;            /* 设置字体大小*/ 
        }

      
hello world

效果展示：

p标签.png

3.css常用选择器

3.1class选择器

        .one{
            color: pink;
        }
        .two{
            background-color: #eee;
        }

    
123
    
456
    
789

效果展示：

class.png

3.2 id选择器（不常用）

        #ps{
            color: blue;
        }

 
789789

4.盒子模型

  /*
        margin
        功能：可以改变元素的位置
        border: 可以改变元素的宽度
        padding : 可以改变元素的width和height
        */
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 100px;
            margin-top: 100px;

            border-width: 10px;
            border-style: solid;
            border-color: black;

            padding-left: 20px;
            padding-right: 20px;
            padding-top: 30px;
            padding-bottom: 30px;
        }

盒子模型.jpg

5.水平居中

6.样式重置

今天不会什么

对margin，padding的概念模糊不清，应着重加强记！