今天學(xué)到了什么

1.常用HTML標(biāo)簽

1.1 段落標(biāo)簽

<p>hello world</p>

1.2 圖片標(biāo)簽<src>

<img src="images/timg.jpg" alt="這是張垃圾圖片"><br> //其中alt屬性是當(dāng)圖片無法顯示時對圖片的描述,<br>為換行標(biāo)簽

1.3 文本框救巷，按鈕

<input type="text"><button>百度一下</button>

1.4 無序列表ul何暇，列表項li

 <ul> 
        <li>小米手機</li>
        <li>蘋果手機</li>
        <li>三星手機</li>
 </ul>

1.5 鏈接標(biāo)簽<a>

<a href="http://www.reibang.com/">簡書</a> //點擊簡書時為自動跳轉(zhuǎn)到簡書網(wǎng)站

1.6 定義標(biāo)簽

<dl>                    //定義列表
        <dt>HTML</dt>   //定義的術(shù)語
        <dd>456</dd>    //定義的描述
</dl>

2.CSS樣式

2.1 常用的css樣式

color:設(shè)置文字的顏色
width:設(shè)置一個元素的寬度
height:設(shè)置一個元素的高度
background-color:設(shè)置背景顏色
background-image:設(shè)置一個元素的背景圖片
line-height:設(shè)置文字的行高
text-align:設(shè)置文字對其的方式
border-width:邊框的寬度

2.2 給<p>設(shè)置一個樣式

        p{
            background-color: pink;   /* 背景顏色 */ 
            height: 50px;               /* 設(shè)置一個高度 */
            line-height: 50px;          /* 行高會讓文本在行高中垂直居中 */
            color: white;             /* 字體顏色 */
            text-align: center;         /* 設(shè)置文本的對其方向*/
            font-size: 20px;            /* 設(shè)置字體大小*/ 
        }

      <p>hello world</p>

效果展示：

p標(biāo)簽.png

3.css常用選擇器

3.1class選擇器

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

    <p class="one two">123</p>
    <p class="one">456</p>
    <p class="two">789</p>

效果展示：

class.png

        #ps{
            color: blue;
        }

 <p id="ps">789789</p>

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.水平居中

<style>
        div{
            /* 元素水平居中 */
            margin-left: auto;
            margin-right: auto;
        }
 </style>

6.樣式重置

    <style>
        /* 樣式重置
        寫樣式之前要對所有樣式進(jìn)行重置*/
        *{margin: 0; padding: 0;}
    </style>

今天不會什么

對margin，padding的概念模糊不清冀泻，應(yīng)著重加強記常侣！