H5網頁布局+css代碼美化，零基礎參考

TML5的結構化標簽，對搜索引擎更友好

li 標簽對不利于搜索引擎的收錄，盡量少用

banner圖片一般擁有版權，不需要搜索引擎收錄，因此可以使用ul + li

<samp></samp>可用于淺色副標題

display:inline-block; 每個導航塊存在水平間隙，解決方法是在父元素上添加font-size:0;

sublime安裝csscomb插件

選中css代碼，ctrl+shift+c 自動整理好代碼

排序前：

排序后：

此時存在多余的空行

解決方法：

安裝cssformat插件，對代碼執行edit->cssformat->expanded 即可刪除空行

選中單句樣式前面的空白部分（即tab空位）

然后alt+f3 會統一選中所有tab留白

按一次刪除，再按一次刪除，再空一格

此時這個效果：

然后按向下箭頭，按向左箭頭，按刪除一次，再加個空格

此時效果

再向下箭頭，再刪除

此時效果

css樣式代碼美化完畢。

新標簽元素的瀏覽器兼容解決：

header,nav,section,aside,article,footer{display: block;}

最后曬出所有代碼

index.html

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <a href="#"><img src="cat-little.jpg"></a>
            <nav>
                <a href="#" class="active">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
            </nav>
        </div>
    </header>

    <section class="banner">
        <ul>
            <li class="left"><img src="banner1.jpg"></li>
            <li class="active"><img src="banner3.jpg"></li>
            <li class="right"><img src="banner2.jpg"></li>
        </ul>
    </section>

    <section class="main">
        <aside>
            <h1>左邊<samp>標題</samp></h1>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p1.jpg"></dd>
            </dl>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p2.jpg"></dd>
            </dl>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p3.jpg"></dd>
            </dl>
        </aside>
        <article>
            <h1>右邊<samp>標題</samp></h1>
            <p>這是右邊文章內容哦~</p>
            <img src="qrt.jpg">
            <p>這是右邊文章內容哦~</p>
        </article>
    </section>

    <footer>
        <div class="container">
            <p>版權信息</p>
            <span>
                <img src="b1.jpg">
                <img src="b2.jpg">
                <img src="b3.jpg">
            </span>
        </div>        
    </footer>
</body>
</html>

style.css

* { font-size: 14px; margin: 0; padding: 0; border: none;}
a { text-decoration: none;}
ul { list-style: none;}

/*瀏覽器兼容解決*/
header,nav,section,aside,article,footer{display: block;}

/*頭部*/
header { width: 100%; height: 60px; background-color: #000;}
.container { width: 1200px; margin: 0 auto;}
.container > a { display: block; float: left; width: 150px; height: 60px; padding-left: 10px;}
.container > a img { height: 40px; padding-top: 10px;}
nav { font-size: 0; float: right; padding-right: 10px;}
nav > a { font-size: 16px; line-height: 60px; display: inline-block; width: 100px; height: 60px; cursor: pointer; text-align: center; color: #fff;}
nav > a:first-child { background: rgb(212, 1, 18);}
nav > a:nth-child(2) { background: rgb(254, 184, 0);}
nav > a:nth-child(3) { background: rgb(120, 185, 23);}
nav > a:nth-child(4) { background: rgb(242, 124, 1);}
nav > a:last-child { background: rgb(1, 127, 203);}
nav > a:hover, nav > a.active { padding-bottom: 5px;}

/*banner*/
.banner { background: #ccc;}
.banner ul { position: relative; width: 1200px; height: 400px; margin: 0 auto; padding-top: 100px;}
.banner ul li { position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; width: 500px; height: 250px; margin: auto;}
.banner ul li img { overflow: hidden; width: 100%;}
.banner ul li.active { z-index: 2; right: 0;    /*設置水平居中*/ left: 0; width: 600px; height: 300px;}
.banner ul li.left { /*設置在左邊*/ left: 0;}
.banner ul li.right { /*設置在右邊*/ right: 0;}

/*主體部分*/
.main { width: 1200px; height: 350px; margin: 0 auto;}
aside { float: left; width: 600px;}
article { float: right; width: 600px;}
.main h1 { font-size: 24px; font-weight: lighter; margin: 20px 0;}
.main h1 samp { color: #7d7d7d;}
aside img { height: 70px;}
aside dl { position: relative; margin-bottom: 10px;}
aside dl dt { position: absolute; top: 0; left: 90px;}
aside dd.pic { overflow: hidden; width: 70px; height: 70px;}
aside dd.text { position: absolute; top: 20px; left: 90px;}
article > img { overflow: hidden; height: 130px;}
article > p { margin-bottom: 10px;}

/*底部*/
footer { background-color: #000;}
footer > .container { width: 1200px; height: 60px; margin: 0 auto;}
footer > .container > p { line-height: 60px; float: left; color: #fff;}
footer > .container > span { float: right;}
footer > .container > span > img { width: 25px; height: 25px; margin-left: 10px; padding-top: 17px; cursor: pointer; opacity: .7;}
footer > .container > span > img:hover { opacity: 1;}
/*# sourceMappingURL=style.css.map */

效果圖

原文鏈接：https://www.cnblogs.com/chenyingying0/p/12250255.html

喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

如果你也想學習前端，可以觀看【置頂】文章。也可以私信【1】領取最新前端練手實戰項目

、頁面使用CSS的好處：

有效的傳遞頁面信息。

使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶。

可以很好的突出頁面的主題內容，使用戶第一眼可以看到頁面主要內容。

具有良好的用戶體驗。

2、美化網頁的一些基本樣式

A:字體樣式：

font-family設置字體類型font-family:"隸書";

font-size設置字體大小font-size:12px;

font-style設置字體風格font-style:italic;

font-weight設置字體的粗細font-weight:bold;

font在一個聲明中設置所有字體屬性font:italic bold 36px "宋體";

舉例：

body{font-family: Times,"Times New Roman", "楷體";}

h1{font-size:24px;} 單位->px：像素

h2{font-style:oblique;}

p{font-weight:bold;}

p span{font:oblique bold 12px "楷體";}

B:文本屬性：

color設置文本顏色color:#00C;

text-align設置元素水平對齊方式text-align:right;

text-indent設置首行文本的縮進text-indent:20px;

line-height設置文本的行高line-height:25px;

text-decoration設置文本的裝飾text-decoration:underline;

C:排版文本段落：

水平對齊方式：text-align：left|right|center|justify;

left把文本排列到左邊。默認值：由瀏覽器決定

right把文本排列到右邊

center把文本排列到中間

justify實現兩端對齊文本效果

首行縮進：text-indent：em或px

行高：line-height：px

文本修飾：text-decoration:none|underline|overline|line_through

值說明

none默認值，定義的標準文本

underline設置文本的下劃線

overline設置文本的上劃線

line-through設置文本的刪除線

垂直對齊方式：vertical-align屬性：middle、top、bottom

文本陰影：text-shadow : color x-offset y-offset blur-radius;

D:背景顏色和背景圖片：

background-color:"red";

background-image:url(圖片路徑);

background-repeat:

沿水平和垂直兩個方向平鋪

no-repeat：不平鋪，即只顯示一次

repeat-x：只沿水平方向平鋪

repeat-y：只沿垂直方向平鋪

background-position:X、Y方向關鍵詞水平方向的關鍵詞：left、center、right

垂直方向的關鍵詞：top、center、bottom

舉例：

.title {

font-size:18px;

font-weight:bold;

color:#FFF;

text-indent:1em;

line-height:35px;

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

}

線性漸變：linear-gradient ( position, color1, color2,…)

3、舉例：

<head>

</head>

<body>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</body>

</html>

li{

/* 去圓點 */

list-style: none;

}

/* 分類頁面總寬度 */

.container{

width: 500px;

}

/* 去超鏈接下劃線 */

text-decoration: none;

}

/* 大標題字體 */

.container>h2{

font-size: 18px;

color: white;

font-weight: bolder;

line-height: 50px;

text-indent: 2px;

/*從上到下，0%開始顏色。50%顏色。70%顏色 */

background: linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5);

}

css代碼：

/* 所有電器分類內容 */

.type{

/* 首行縮進 */

text-indent: 4.5em;

/* 左外邊距40px */

margin-left: 40px;

}

/* 電器分類 */

.type>h6{

font-size: 14px;

font-weight: bolder;

line-height: 30px;

background: linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa);

}

/* 電器分類中的A標簽 */

.type>h6>a{

color:#0467ac;

}

/* 電器分類中的A標簽鼠標懸浮效果 */

.type>h6>a:hover{

text-decoration: underline;

}

/* 分類內容字體 */

.type>ul>li{

font-size: 12px;

line-height: 26px;

}

/* 分類內容字體里面的A標簽 */

.type>ul>li>a{

color: #969696;

}

/* 分類內容字體里面的A標簽懸浮效果 */

.type>ul>li>a:hover{

color: #804000;

text-decoration: underline;

}

4、效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html

、美化網頁元素

本章目標：

會使用CSS設置字體樣式和文本樣式
會使用CSS設置超鏈接樣式
會使用CSS設置列表樣式
會使用CSS設置背景樣式
會使用CSS設置漸變效果

2.1、為什么使用CSS

【查看淘寶頁面，讓學員觀察，重點記住了什么東西】因此使用CSS樣式美化網頁文本具有如下意義。

有效的傳遞頁面信息
使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶
可以很好的突出頁面的主題內容，使用戶第一眼可以看到頁面主要內容
具有良好的用戶體驗

< span>標簽 < span>標簽的作用：能讓某幾個文字或者某個詞語凸顯出來，從而添加對應的樣式！

<p>好好學習，<span>天天向上</span></p>

2.2、字體樣式

在這里插入圖片描述

在線咨詢

上一篇：Servlet 編寫過濾器
下一篇：在 ASP.NET CORE 中使用 SESSION

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

H5網頁布局+css代碼美化，零基礎參考

2.1、為什么使用CSS

2.2、字體樣式

您的項目需求