13.Web標準與CSS網(wǎng)頁布局實例

13.1Web標準與CSS布局

Web標準是網(wǎng)站開發(fā)中一系列標準的集合，包括XHTML，XML，CSS，DOM和ECMAScript等。制定標準是為了便于維護，代碼更加簡

13.1.1什么是Web標準

真正符合Web標準的網(wǎng)頁設(shè)計是指能夠靈活使用Web標準對Web內(nèi)容進行結(jié)構(gòu)，表現(xiàn)與行為的分離

1.結(jié)構(gòu)(Structure)：
結(jié)構(gòu)用于對網(wǎng)頁中用到的信息進行分類和整理，主要技術(shù)有：HTML，XML，XHTML

2.表現(xiàn)(Presentation)：
表現(xiàn)用于對信息進行板式，顏色，大小等形式的控制，主要技術(shù)有：CSS層疊樣式表

3.行為(Behavior)：
行為是指文檔內(nèi)部的模型定義及交互行為的編寫，用于編寫交互式的文檔，主要技術(shù)有：DOM，ECMAScript

13.1.2CSS布局的優(yōu)勢

縮減頁面代碼
結(jié)構(gòu)清晰
縮短改版事件
強大的字體控制和排版能力
易編寫
提高易用性
表現(xiàn)和內(nèi)容分離
方便搜索引擎搜索
比table布局的靈活性大
比table布局產(chǎn)生的垃圾代碼少
幾乎所有瀏覽器都可以使用
更快下載頁面
頁面字體漂亮，容易排版
可以輕松的控制頁面的布局
可以同時更新許多網(wǎng)頁的風格格式

13.2DIV+CSS布局網(wǎng)頁基礎(chǔ)

13.2.1一列固定寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列固定寬度</title>
    <style type="text/css">
        #Layer{
            background-color: #ffcc33;
            border: 3px solid #ff3399;
            width: 500px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div id="Layer">一列固定寬度</div>
</body>
</html>
一列固定寬度

13.2.2一列自適應(yīng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列自適應(yīng)</title>
    <style type="text/css">
        #Layer{
            background-color: #ffcc33;
            border: 3px solid #ff3399;
            width: 80%;
            height: 80%;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="Layer">一列自適應(yīng)</div>
</body>
</html>
一列自適應(yīng)

13.2.3兩列固定寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兩列固定寬度</title>
    <style type="text/css">
        #left{
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 250px;
            height: 250px;
            float: left;
        }
        #right {
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 250px;
            height: 250px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="left">左列</div>
    <div id="right">右列</div>
</body>
</html>
兩列固定寬度

13.2.4兩列寬度自適應(yīng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兩列寬度自適應(yīng)</title>
    <style type="text/css">
        #left{
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 65%;
            height: 250px;
            float: left;
        }
        #right {
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 25%;
            height: 250px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="left">左列</div>
    <div id="right">右列</div>
</body>
</html>
兩列寬度自適應(yīng)

13.2.5兩列右列寬度自適應(yīng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兩列右列寬度自適應(yīng)</title>
    <style type="text/css">
    #left{
            background-color: #ffcc33;
            border: 1px solid #ff3399;
            width: 200px;
            height: 250px;
            float: left;
        }
        #right {
            background-color: #ffcc33;
            border: 1px solid #ff3399; 
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="left">左列</div>
    <div id="right">右列</div>
</body>
</html>
兩列右列寬度自適應(yīng)

13.3使用CSS設(shè)計網(wǎng)站導航欄

13.3.1實現(xiàn)背景變換的導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>實現(xiàn)背景變換的導航欄</title>
    <style type="text/css">
        #button{
            width: 150px;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            padding: 0  0   1em 0;
            font-family: "宋體"
            font-size:13px;
            background-color: #ff9933;
        }
        #button ul{
            list-style: none;
            margin: 0;
            padding: 0;
            border:none;
        }
        #button li{
            margin: 0;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #ffff00;
        }
        #button li a{
            display: block;
            padding: 5px 5px 5px 0.5em;
            text-decoration: none;
            color: #fff;
            border-left-width: 10px;
            border-left-style: solid;
            border-left-color: #ffcc00;
            border-right-width: 10px;
            border-right-style: solid;
            border-right-color: #ffcc00;
        }
        #button li a:hover{
            background-color: #ffcc00;
            color: #000;
            border-left-width: 10px;
            border-left-style: solid;
            border-left-color: #ff00ff;
            border-right-width: 10px;
            border-right-style: solid;
            border-right-color: #ff00ff;
        }
    </style>
</head>
<body>
    <div id="button">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">公司頻道</a></li>
            <li><a href="#">最新動態(tài)</a></li>
            <li><a href="#">客房介紹</a></li>
            <li><a href="#">酒店服務(wù)</a></li>
            <li><a href="#">休閑娛樂</a></li>
            <li><a href="#">旅行社</a></li>
        </ul>
    </div>
</body>
</html>

在代碼中首先為div定義了一個id為button，然后用ul創(chuàng)建列表數(shù)據(jù)。ul主要用來描述表型內(nèi)容，每一個<ul></ul>中的內(nèi)容為一個列表塊，快中的每一條數(shù)據(jù)用<li></li>描述

點擊前
點擊后

13.3.2利用CSS制作橫向?qū)Ш綑?/h4> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用CSS制作橫向?qū)Ш?lt;/title>
    <style type="text/css">
        #n li{
            float: left;
        }
        #n ul{
            list-style: none;
        }
        #n li a{
            display: block;
            color: #000;
            text-decoration: none;
            text-align: center;
            background-color: #6600cc;
            margin-left: 2px;
            padding-top: 4px;
            width: 65px;
            height: 20px;
        }
        #n li a:hover{
            background-color: #9999ff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="n">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">公司頻道</a></li>
            <li><a href="#">最新動態(tài)</a></li>
            <li><a href="#">客房介紹</a></li>
            <li><a href="#">酒店服務(wù)</a></li>
            <li><a href="#">休閑娛樂</a></li>
            <li><a href="#">旅行社</a></li>
        </ul>
    </div>  
</body>
</html>
  • 首先定義了ul的li對象，給#你 li指定了float: left屬性，所有的li對象都向左浮動，從而形成橫向的排列方式
  • 導航的關(guān)鍵在于a鏈接對象的樣式控制，在這里使用#n li a{}給li下的每一個a鏈接對象編寫了樣式
  • display:block使得a鏈接對象的顯示方式由一段文本變成一個塊狀對象，這就可以使用CSS的外邊距，內(nèi)邊距，邊框等屬性給a鏈接加上一系列的樣式
  • 通過display:block的應(yīng)用，對a標簽元素設(shè)置寬度width:65px，高度height:20px，并在每一個a標簽對象之間使用margin-left:2px形成左側(cè)的外邊距為2像素
  • 利用#n li a:hover定義鏈接文字激活后的狀態(tài)，利用background-color: #9999ff設(shè)置激活后的背景顏色，利用color: #fff設(shè)置文字的顏色
點擊前
點擊后

13.4使用CSS設(shè)計表單樣式

13.4.1改變按鈕的背景顏色和文字顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改變按鈕的背景顏色和文字顏色</title>
    <style type="text/css">
        input.ann{
            border:1 solid #99cc00;
            color: #6600ff;
            font-size: 20pt;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: normal;
            background-color: #999999;
        }
    </style>
</head>
<body>
    <input type="submit" name="Submit" value="登錄" class="ann" />
    <input type="reset" name="Close" value="取消" class="ann" />
</body>
</html>

定義一個名為ann的按鈕樣式，設(shè)置邊框為1 ，顏色#6600ff，字號，20pt，字體風格和加粗正常，行高正常，以及背景顏色

按鈕的設(shè)置結(jié)果

13.4.2設(shè)計文本框的樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框的樣式</title>
</head>
<body>
    <input type="password" size="10" name="pwd" style="border:2px solid red;background:yellow;" />
</body>
</html>
文本框的樣式

13.4.3設(shè)計文本框中的文字樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框中的文字樣式</title>
</head>
<body>
    <input type="password" name="pwd" style="font-family: 宋體;font-size:12px" />
</body>
</html>
文本框中文字顏色

13.5文字及段落樣式設(shè)計

13.5.1利用CSS控制字體大小和行距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體大小和行距</title>
    <style type="text/css">
        .dx{
            font-family: "宋體";
            font-size: 20px;
            color: #ff0000;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <span class="dx">歡迎來到這里</span>
</body>
</html>
字體大小和行距

13.5.2制作光暈文字效果

filter的glow失效

13.6使用CSS設(shè)計圖片樣式

13.6.1鼠標指針移上時圖片漸變的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片漸變</title>
    <style type="text/css">
        .highlightit img{
            -webkit-filter: opacity(90%);
        }
        .highlightit:hover img{
            -webkit-filter: opacity(10%);
        }
    </style>
</head>
<body>
    <a href="#" class="highlightit"><img src="img/2.jpg" width="800" height="400"></a>
</body>
</html>
鼠標移動到圖片上之前
鼠標移動到圖片上

13.6.2設(shè)計不重復出現(xiàn)的背景

background-repeat:no-repeat

13.7使用CSS控制鏈接樣式

13.7.1使用CSS實現(xiàn)鼠標指針形狀改變

<style type="text/css">
        .shb{
            cursor: e-resize;
        }
    </style>

參考之前的光標屬性cursor

13.7.2鼠標指針移到鏈接文字上時改變文字大小或顏色

  • 利用a:link定義鏈接文字樣式

  • 利用a:visited已訪問鏈接樣式

  • 利用a:hover定義變化圖像鏈接樣式

  • 利用a:link定義活動鏈接樣式

示例
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,809評論 1贊 45
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,140評論 1贊 92
  • 本文主要是起筆記的作用，內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,750評論 0贊 30
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,948評論 0贊 0
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,371評論 0贊 8

友情鏈接更多精彩內(nèi)容