亚洲乱码国产乱码精品精,老外玩CSGO的妹子,97久久精品亚洲中文字幕无码

1.一個有具體功能的完整網(wǎng)頁，一般由三部分組成

HTML
網(wǎng)頁具體內(nèi)容和結(jié)構(gòu)
CSS
網(wǎng)頁的樣式（美化網(wǎng)頁最重要的一塊）
JavaScript
網(wǎng)頁的交互效果，比如用戶對鼠標(biāo)事件作出響應(yīng)

學(xué)習(xí)網(wǎng)站：一個不錯的網(wǎng)頁學(xué)習(xí)網(wǎng)站

2.HTML常見標(biāo)簽

Snip20170727_6.png

演示：

Snip20170727_7.png

運(yùn)行效果圖

Snip20170727_9.png

3.CSS的編寫格式是鍵值對形式的，比如：

color: red;
background-color: blue;
font-size: 20px;

4.CSS的三種書寫形式

Snip20170727_11.png

5.CSS-選擇器

Snip20170727_13.png

Snip20170727_14.png

Snip20170727_15.png

Snip20170727_16.png

Snip20170727_17.png

Snip20170727_18.png

Snip20170727_19.png

Snip20170727_20.png

Snip20170727_21.png

Snip20170727_22.png

Snip20170727_23.png

Snip20170727_25.png

Snip20170727_26.png

6.選擇器優(yōu)先級

Snip20170727_27.png

Snip20170727_29.png

7.HTML標(biāo)簽類型

Snip20170727_31.png

8.經(jīng)常用到的屬性

Snip20170727_38.png

PS.塊級標(biāo)簽可以修改寬度和高度，但是行內(nèi)標(biāo)簽不能修改寬度和高度，其寬度和高度有其內(nèi)部的內(nèi)容決定。但是inline-block既可以顯示在同一行，也可以設(shè)置寬度和高度。

9.CSS屬性：

Snip20170727_40.png

Snip20170727_43.png

Snip20170727_45.png

10.盒子模型

Snip20170727_49.png

Snip20170727_50.png

Snip20170727_51.png

如果是塊級元素，可以通過 margin: auto;來設(shè)置其居中顯示，如果不是塊級元素而是行內(nèi)元素，可以通過設(shè)置其父元素的text-align: center;使其居中顯示。img是非塊級元素。

12.百度實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="CSS/index.css">
</head>
<body>

<div class="content">
    <div class="logo">
        ![](Images/logo.png)
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">新聞</a></li>
            <li><a href="#" class="active">貼吧</a></li>
            <li><a href="#">知道</a></li>
            <li><a href="#">音樂</a></li>
            <li><a href="#">視頻</a></li>
            <li><a href="#">百科</a></li>
            <li><a href="#">地圖</a></li>
            <li><a href="#">文庫</a></li>
            <li><a href="#">更多》》</a></li>

        </ul>
    </div>
    <div class="search">
        <input>

        <button>百度一下</button>
    </div>
</div>

</body>
</html>

index.css
body{
    background-image: url("../Images/bg.jpg");
    background-size: 100% 750px;
}
.content{
    background-color: cadetblue;
    width: 700px;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    margin: 0 auto 0;
}
.content .logo{
    text-align: center;

}
.content .logo img{
    width: 270px;
    height: 129px;
}
.content .nav ul{
    list-style: none;
    text-align: center;
}
.content .nav ul li{
    display: inline;
}

.content .nav ul li a{
    color: white;
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}
.content .nav ul li a.active{
    text-decoration: none;/*去除文字的下劃線*/
}
.content .search{
    text-align: center;
}
.content .search input{
    width: 521px;
    height: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 18px;
    border-left: 1px solid #add;
    border-bottom: 1px solid #add;
    border-top: 1px solid #add;
}
.content .search button{
    width: 120px;
    height: 40px;
    font-size: 18px;
    margin: 0px;
}

效果圖：