HTML連載81-CSS書寫格式、一個手機頁面的基本結構

時間 2020-04-09

標籤 html 連載 css 書寫格式一個手機頁面基本結構欄目 HTML 简体版

原文原文鏈接

1、CSS書寫格式css

1.行內樣式html

能夠直接將CSS代碼直接寫到開始標籤中git

<div style="color:red">我是div</div>

2.內嵌樣式github

能夠在一對head標籤中寫上一堆style標籤，而後再style標籤中編寫CSS代碼微信

<head>

    <style>

        div{

            color:red;

        }

</style>

</head>

3.外鏈樣式學習

單獨寫一個css文件，把CSS代碼寫到這個文件裏面，而後html文件中經過link標籤把這個文件和html文件關聯起來。大數據

這是HTML文件網站

<head>

    <link rel="stylesheet" href="194_Css.css">

</head>

 這是CSS文件

 div{

            color:red;

}

4.導入樣式ui

與第三種方式相相似，可是導入的方式是不一樣的spa

 

<head>

    <style>

        @import "194_Css.css";

    </style>

</head>

注意點：企業開發中大多使用外鏈的樣式，這樣使得結構和樣式相互分離。那麼爲何不使用導入樣式呢？

外鏈樣式是經過link標籤關聯而導入樣式而導入樣式則是經過@import關聯，@import是CSS2.1以後推出的，所以可能會有兼容問題；外鏈樣式在顯示界面的時候，會先加載CSS樣式，在加載結構，因此用戶看不到界面的時候必定已經設置了樣式，而導入樣式在顯示界面的時候，會先加載結構，再加載樣式，因此用戶看到界面的時候不必定會看到完整的界面。

2、從0到1構建一個網站

1.編寫網站要作的第一件事情

建立站點文件夾，而且建立一些子文件夾和子文件，例如：CSS文件夾、js文件夾、image文件夾，index.html

注意點：建立站點文件夾可使用中文命名，可是站點文件夾裏面的子文件夾和子文件不能出現中文。

2.重置全部的默認樣式和設置一些全局樣式，而且將設置樣式的css文件和對應的界面相關聯起來

3.製做一個努比亞的網頁

（1）先來看看結構目錄

（2）主題內容代碼

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="CSS/base.css">

    <link rel="stylesheet" href="CSS/index.css">

</head>

<body>

<!--頂部區域-->

<div class="top"></div>

<!--廣告區域-->

<div class="banner"></div>

<!--內容區域-->

<div class="content"></div>

<!--底部區域-->

<div class="footer"></div>

</body>

</html>

（3）CSS樣式代碼

/*頂部區域*/

.top{

    height:60px;

    width:100%;/*也就是和父元素同樣寬，這裏使用百分比的形式，使得網頁擴大減少都不會變形*/

    background-color: red;



}

/*廣告區域*/

.banner{

    height: 800px;

    width: 100%;

    background-color: green;

}

/*內容區域*/

.content{

    height: 1883px;

    width: 100%;

    background-color: blue;

}

/*底部區域*/

.footer{



}