網頁設計與網站制作html_第1頁
網頁設計與網站制作html_第2頁
網頁設計與網站制作html_第3頁
網頁設計與網站制作html_第4頁
網頁設計與網站制作html_第5頁
已閱讀5頁，還剩97頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網頁設計與網站制作李于網頁設計這門課專業(yè)方向、就業(yè)前景、學習狀態(tài)等代碼之美/技術之美基礎——識記；中、高級——靈活運用敲代碼，賞析各種優(yōu)秀網頁，模仿制作，拓展理論（專業(yè)術語、書籍）。

賞析網頁地址：/課外閱讀書籍關鍵詞：用戶體驗、可用性設計、交互設計、網頁設計等評分在8以上一：網頁的構造一個html網頁包含什么一個html網頁主要包含三個部分

文本內容——純文字

對其他文件的引用——影、音、圖、樣式表、javascript

標簽（標記）

------------------------------------------------- Html——描述內容是什么，網頁內容主要的語義化容器 Css樣式表——控制內容的外觀

（每個瀏覽器自帶的樣式可以被css覆蓋） -------------------------------------------------其他部分：用于瀏覽器和搜索引擎的信息

網頁的頂部和頭部

Doctype——告訴瀏覽器

html——添加屬性，表明頁面語言

meta——字符集

title——瀏覽器書簽名、對搜索引擎有用標簽：元素、屬性、值及其他元素由開始標簽、內容和結束標簽組成。有的元素包含一個或者多個屬性來進一步描述元素。屬性和值

屬性包含元素的額外信息，推薦加引號，小寫字母。

有的屬性接受任意值，有的僅接受預定義值。

數字值默認單位是像素，可以不加單位。

值為布爾屬性時，只要這種屬性出現即可。Html（html5）開始標簽結束標簽

<p>……</p>

<header>……</header>單獨標簽

<meta/>

<link/>

<img/>Html的樹狀結構父元素和子元素

必須正確嵌套

父子，祖，后代

<body>

<header>

<h1>……</h1>

……

</header>

</body>網頁內容、命名、后綴名網頁的文本內容

瀏覽器處理空格與換行

字符編碼指定--<metacharset=“utf-8”/>鏈接、圖像其他文本內容文件夾、文件名——小寫，有意義名稱，便于組織擴展名/后綴名——.html名稱分割線用短橫線地址——url絕對地址相對地址

同目錄

子目錄

上層目錄根相對地址htmlHtml描述的是網頁內容的含義，即語義。語義化html指的是那些使用最恰當的html元素進行標記的內容，在標記過程中并不關心內容顯示。語義化html優(yōu)勢：

訪問性、操作性無障礙訪問

seo優(yōu)化

易于添加樣式

加載快

塊級元素、行內元素二：處理網頁文件規(guī)劃網站（賞析網址）創(chuàng)建、編輯網頁保存網頁指定默認主頁組織站點文件在瀏覽器中查看網頁及源代碼瀏覽器插件三：基本html結構<!Doctypehtml>不分大小寫，但推薦大寫首字母<htmllang=“zh-cn”>非必須，推薦加，搜索引擎根據lang屬性指定語言區(qū)分搜索結果<head><metacharset="utf-8"><title>頁面標題</title>……</head>頁面標題title、搜素引擎優(yōu)化、樣式、js（javascript）僅title可見<body>……</body></html>標題分級標題

h1—h6，依據層次關系選擇標題級數，避免跳級，不要標記副標題，標題對的搜索引擎重要性，尤其h1H1～h6是塊級元素頁面構成帶導航的頁頭顯示在主體內容區(qū)域的文章顯示次要信息的附注欄頁腳頁眉--header<header>標簽定義文檔的頁眉（介紹信息）。如果頁面中有一塊包含一組介紹性或導航性內容的區(qū)域，用header元素進行標記。一個頁面可以有任意數量的header元素，含義根據上下文有所不同。通常，頁眉包括網站標志，主導航，其他全站鏈接，搜索框。通常，header包括其自身的標題（h1-h6）。Header作為頁面級頁眉時，添加role=“banner”提高訪問性。如果h1-h6能滿足需求就沒有必要用header將它包起來。不能在header里嵌套footer或另一個header，也不能在footer或者address里嵌套headerHeader不必需包含nav，除非header包含導航性鏈接。

Header是塊級元素標記導航--nav<nav>標簽定義導航鏈接的部分。Nav中的鏈接可以指向頁面中的內容也可以指向其他頁面或資源，或者兩者兼而有之。僅對文檔中重要的鏈接群使用nav添加role=“navigation”屬性可以提高訪問性不推薦對輔助性的頁腳鏈接使用nav，除非再次顯示頂級全局導航或其他重要鏈接。不允許將nav嵌套在address中nav是塊級元素標記頁面的主要區(qū)域--main<main>標簽規(guī)定文檔的主要內容。一個頁面只有一個部分代表其主要內容，該元素在一個頁面僅使用一次，就可以將這樣的內容包在main元素里。在一個文檔中，不能出現一個以上的<main>元素。<main>元素中的內容對于文檔來說應當是唯一的。它不應包含在文檔中重復出現的內容，比如側欄、導航欄、版權信息、站點標志或搜索表單。在main開始標簽中添加role=“main”屬性可以幫助屏幕閱讀器定位頁面的主要區(qū)域。不能將main放在article、aside、footer、header、nav中，即：<main>元素不能是以上元素的后代。main是塊級元素創(chuàng)建文章--articlearticle表示文檔、頁面、應用或網站中一個獨立的容器，是可以獨立分配或可再用的部分，可以是一篇帖子、一篇文章、一篇博文、一條評論、一篇影評、一個案例、一個產品描述、一個交互式的小部件或小工具，或者任何其他獨立的內容項。可以將article嵌套在另一個article中，只要里面的article與外面article是整體與部分關系。一個頁面可以有多個article一個article可以包含一個或多個section在article里包含獨立的h1~h6是很好的做法article是塊級元素定義區(qū)塊--sectionSection元素代表文檔或應用的一個一般的區(qū)塊、文檔中的區(qū)段，比如章節(jié)、頁眉、頁腳或文檔中的其他部分。section是具有相似主題的一組內容，通常包含一個標題。Section是頁面中的特定區(qū)域，是有語義的，與div不同。Section在本質上組織性和結構性更強，而article代表的是自包含的容器。section是塊級元素指定附注欄--aside頁面中一個與主題內容、或者附近的內容有相關性且可以獨立存在的部分用aside標簽定義。重要的引述、文章的側欄、指向相關文章的一組鏈接（如新聞網站）、廣告、nav元素組（如博客的友情鏈接）、相關產品列表（如電子商務網站）如果aside嵌套在頁面主要內容內（而不是作為側欄位于主要內容之外）則其中的內容應與其所在的內容密切相關，而不是僅與頁面整體內容相關。給aside添加role=“complementary”提高可訪問性。在html中應該將aside放在main內容之后對于與內容有關的圖片，使用figure不允許將aside嵌套在address元素內aside是塊級元素創(chuàng)建頁腳--footer<footer>標簽定義頁面或節(jié)的頁腳，頁腳通常包含文檔的作者、版權聲明、指向隱私政策的鏈接、使用條款鏈接、聯系信息等等，與header一樣，也可以用在其他地方。<footer>元素內的聯系信息應該位于<address>標簽中。footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素的頁腳，只有當它最近的祖元素是body時，它才是整個頁面的頁腳。如果一個footer包著它所在區(qū)塊（如一個article）的所有內容，它代表的是像附錄、索引、版權頁、許可協(xié)議這樣的內容。通常，頁腳位于所在元素的末尾?？梢栽谝粋€文檔中使用多個<footer>元素。不能在footer里嵌套header或另一個footer，也不能將footer嵌套在header或address元素里。僅對頁面級footer使用role=“contentinfo”footer是塊級元素創(chuàng)建通用容器--div<div>可定義文檔中的分區(qū)或節(jié)（division/section）。<div>標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。當需要在一段內容外包圍一個容器，從而可以為其應用css樣式或javascript效果，又不需要考慮語義時，可以添加一個完全沒有任何語義的容器—divdiv應該作為最后一個備用容器，適合所有頁面容器而無需使用新的html5元素div是塊級元素，也就是說，瀏覽器通常會在div元素前后放置一個換行符。這意味著它的內容自動地開始一個新行。實際上，換行是<div>固有的唯一格式表現?？梢酝ㄟ^<div>的class或id應用額外的樣式。

（

class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識單獨的唯一的元素。）作為內容區(qū)塊的主要語義化容器header，footer,aritcle、section、aside、nav可以用在任何地方。Div適合所有頁面容器，而無需使用新的html5元素，但是要把它作為最后一個備用容器。使用ARIA（無障礙網頁訪問倡議）改善訪問性ARIA的地標角色——role屬性

role=“banner”

橫幅，添加到頁面級的header元素，一個頁面只用一次

role=“navigation”

導航，可以每個頁面使用多次，但是同nav一樣，不要過度使用該屬性

role=“main”主體

在每個頁面僅使用一次

role=“complementary”補充性內容

可以在一個頁面里包含多個complementary，不要過度使用該屬性

role=“contentinfo”內容信息

在每個頁面僅使用一次ARIA的地標角色用于提升用戶體驗，對頁面外觀沒有影響。

為元素指定類別或者ID名稱給html元素指定id或類別，或同時指定id和類別，推薦以指定類別為主。

Id=“name”

class=“nameanothername”

一個頁面不能出現兩個具有相同id的元素，且每個元素只能有一個id。一個頁面可以有一個以上的class。元素可以同時擁有id和任意數量的class盡量避免使用描述表現樣式的名稱為元素添加title屬性可以為任何元素添加title提升無障礙訪問功能，不過用的最多的是鏈接添加注釋<!–開始

……注釋內容-->結束第四章<p>

段落<small>細則<p>

標簽定義段落，是塊級元素，p元素會自動在其前后創(chuàng)建一些空白(這個空白也可以用css樣式調整)。<small>標簽表示細則一類的旁注，包括免責聲明、注意事項、法律限制、版權信息、署名、滿足許可等。small元素通常是行內文本中的一小塊，small元素呈現小號字體效果。<small>標簽也可以嵌套，從而連續(xù)地把文字縮小，每個<small>標簽都把文本的字體變小一號。

small只適用于短語,內容較多時應該采用p元素。<br/>創(chuàng)建換行<br/>可插入一個簡單的換行符。<br/>標簽是空標簽（意味著它沒有結束標簽）。使用<br/>來輸入空行，而不是分割段落。<span><span>標簽被用來組合文檔中的行內元素。<span>標簽沒有固定的格式表現，沒有語義，只適合包圍字詞或短語內容?？梢?lt;span>應用id或class屬性，這樣既可以增加適當的語義，又便于對<span>應用樣式。<em>強調<strong>重要HTML的<em><strong><dfn><code><cite>等標簽都是短語元素。雖然這些標簽定義的文本大多會呈現出特殊的樣式，但實際上，這些標簽都擁有確切的語義。如果您只是為了達到某種視覺效果而使用這些標簽的話，需要使用樣式表<em>標簽把文本定義為強調的內容。文字用斜體來顯示,除強調之外，當引入新的術語或在引用特定類型的術語或概念時作為固定樣式的時候，也可以考慮使用<em>標簽。<strong>標簽把文本定義為語氣更強的強調的內容。

<strong>標簽和<em>標簽一樣，用于強調文本，但<strong>標簽強調的程度更強一些。<em>和<strong>是行內元素<mark>突出顯示文本

在需要突出顯示文本時使用<mark>標簽，用于提醒讀者對特定文本片段的注意。<time>指定時間<time>標簽定義公歷的時間（24小時制）、日期或時間。使用datetime屬性規(guī)定日期或時間。

不能在<time>里嵌套另一個<time>也不能在沒有datetime屬性的time元素中包含其他元素，只能包含文本。<time>是行內元素

語法：<timedatetime="YYYY-MM-DDThh:mm:ss">……</time>

日期或時間。下面解釋了其中的成分： YYYY-年(例如2011) MM-月(例如01表示January) DD-天(例如08)

T-必需的分隔符，若規(guī)定時間的話 hh-時(例如22表示10.00pm) mm-分(例如55) ss-秒(例如03)<address>作者聯系信息<address>標簽定義文檔或文章的作者/擁有者的聯系信息。大多數時候聯系信息的形式是作者的電子郵件地址或指向聯系信息頁的鏈接，或者是作者的通訊地址。

<address>元素中的文本通常呈現為斜體。大多數瀏覽器會在address元素前后添加折行。如果<address>元素位于<body>元素內，則它表示文檔聯系信息。

如果<address>元素位于<article>元素內，則它表示文章的聯系信息。<cite>引用標題、名稱<q>引用短語

<blockquote>引用文本塊<cite>標簽通常表示它所包含的文本是對某內容源的引用，比如某參考文獻、書籍或者雜志的標題。引用的文本默認將以斜體顯示。如果引用的這些文檔有聯機版本，還應該在這個標簽內部把引用包括在一個<a>標簽中，從而把一個超鏈接指向該聯機版本。屬于行內元素。<q>標簽定義簡短的引用。瀏覽器經常在引用的內容周圍添加引號。

<q>標簽在本質上與<blockquote>是一樣的。不同之處在于它們的顯示和應用。<q>標簽用于簡短的行內引用，并且引用內容不能跨越不同的段落。如果需要從周圍內容分離出來比較長的部分（通常顯示為縮進的塊），請使用<blockquote>標簽。<blockquote>標簽定義塊引用。<blockquote>元素包圍的所有文本都會從常規(guī)文本中分離出來，顯示在新一行，在左、右兩邊進行縮進（即增加外邊距）。<code>標記代碼<code>標簽用于表示計算機源代碼或者其他機器可以閱讀的文本內容。軟件代碼的編寫者已經習慣了編寫源代碼時文本表示的特殊樣式。<code>標簽就是為他們設計的。只應該在表示計算機程序源代碼或者其他機器可以閱讀的文本內容上使用<code>標簽。<pre>預定義格式pre元素可定義預格式化的文本。被包圍在pre元素中的文本通常會保留空格和換行符，文本也會呈現為等寬字體，它是計算機代碼示例的理想元素。<pre>標簽的一個常見應用就是用來表示計算機的源代碼。如果你的代碼需要顯示<和>，應該分別使用<和>

如果你的代碼需要顯示引號，應該使用"

/不變。<abbr>縮寫詞<abbr>標簽指示簡稱或縮寫，比如"WWW"或"NATO"。通過對縮寫進行標記，您能夠為瀏覽器、拼寫檢查和搜索引擎提供有用的信息。可以在<abbr>標簽中使用全局的title屬性，這樣就能夠在鼠標指針移動到<abbr>元素上時顯示出簡稱/縮寫的完整版本。也可以同時將全稱放在縮寫詞后面的括號里。當含有title屬性是firefox瀏覽器會添加下劃虛線以引起注意。例：

The<abbrtitle="People'sRepublicofChina">PRC</abbr>wasfoundedin1949.<dfn>定于術語<dfn>標簽可標記首次定義的術語（不是包圍定義），后續(xù)使用術語時不再需要使用dfn對其進行標記?，F在流行的瀏覽器通常用斜體來顯示<dfn>中的文本。<sup>上標<sub>下標<sup>標簽可定義上標文本。

包含在<sup>標簽和其結束標簽</sup>中的內容將會以當前文本流中字符高度的一半來顯示，但是與當前文本流中文字的字體和字號都是一樣的。<sub>標簽可定義下標文本。

包含在<sub>標簽和其結束標簽</sub>中的內容將會以當前文本流中字符高度的一半來顯示，但是與當前文本流中文字的字體和字號都是一樣的。如果和<a>標簽結合起來使用，就可以創(chuàng)建出很好的超鏈接腳注。

<ins>

添加的內容<del>刪除的內容<ins>標簽定義已經被插入文檔中的文本。

<del>標簽定義已經被刪除的內容。兩個元素一同使用，來描述文檔中的更新和修正。屬性 值

描述CiteURL

指向另外一個文檔的URL，此文檔可解釋文本被插入的原因。DatetimeYYYYMMDD定義文本被插入的日期和時間。<figure>獨立流內容<figure>標簽規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。請使用<figcaption>標簽為figure添加標題。<figcaption>定義figure元素的標題<figcaption>標簽定義figure元素的標題。用作文檔中插圖的圖像，帶有一個標題。figcaption元素應該被置于figure元素的第一個或最后一個子元素的位置。<img/>img元素向網頁中嵌入一幅圖像。請注意，從技術上講，<img>標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img/>標簽有兩個必需的屬性：src屬性和alt屬性。圖像尺寸：屬性 值 描述height pixels/%定義圖像的高度。width pixels/%設置圖像的寬度。<imgsrc="/i/eg_tulip.jpg"alt="上海鮮花港-郁金香"/>圖像格式JpgGifPngWebpSvgIcon網站圖標Retina顯示屏的圖像及網站圖標Retina顯示屏在相同的空間里，它擁有的像素數量是普通顯示屏的像素數量的四倍。其他元素<progress>標簽標示任務的進度（進程）。結合<progress>標簽與JavaScript一同使用，來顯示任務的進度。屬性 值

描述max number

規(guī)定任務一共需要多少工作。valuenumber

規(guī)定已經完成多少任務。<progressvalue="22"max="100">20%</progress><metervalue=“0.8”>80%</meter>鏈接指向另一個網頁的鏈接<ahref=“url”title=“”>……</a>

url會顯示在狀態(tài)欄，title文字會顯示在鏈接旁邊。塊鏈接

包含塊級元素錨鏈接

創(chuàng)建錨——id=“name”

href=“#name”，href=“a.html#name”其他類型鏈接

指向萬維網任何文件（圖片、壓縮包、程序、pdf、docx等）

mailto:name@

tel:國家代碼和電話號碼7css構造塊css構造塊一條css樣式規(guī)則由兩部分組成：選擇器+聲明塊選擇器：告訴瀏覽器網頁上哪個元素或哪些元素定義了要進行樣式設置；聲明塊：以左”{”開始，以右”}”結束；聲明：一個屬性+一個值，并以一個分號結束；放在{}之間屬性：css提供的格式化選項——屬性，表示一種特定的樣式效果；值：給屬性賦值，類型有顏色、長度、url、關鍵字等。聲明的順序不重要樣式規(guī)則的注釋

/*……*/可以包含多行描述，通常加在每組規(guī)則前關于“繼承”1.應用在一個標簽上的css屬性被傳遞到嵌套標簽上的過程稱為繼承。（繼承也在多代間進行）2.繼承不是萬能的，許多css屬性不傳遞給派生標簽，如border,padding等屬性。

3.可以利用繼承的優(yōu)勢簡化樣式表并使之更有效。

影響網頁上的元素位置的屬性、頁邊距和元素的邊框不被繼承；

當樣式發(fā)生沖突時，更具體的樣式勝出。關于“層疊”：當規(guī)則發(fā)生沖突時

指定瀏覽器應該如何處理應用給同一個標簽的多個樣式的問題，以及當css屬性相沖突時該做什么。當一個標簽繼承多個祖先的樣式時以什么方式進行格式設置？ *.直接應用于元素的樣式擊敗所有繼承來的樣式； *.順序：最近的樣式勝出（最后定義的樣式勝出）

*.特殊性：哪種樣式勝出（見下圖）

*.重要性：在某條規(guī)則的末尾加上!important.如：p{color:red!important;}但不推薦使用。

!important>行內>ID>類>元素屬性的值任何值預定義值長度和百分數純數字urlCss顏色Rgb十六進制

rgba

hsl和hsla8操作樣式表Css樣式結構Css樣式（單獨）聲明(塊)聲明1聲明2聲明3屬性值css3手冊.chm顏色、長度、url、關鍵字Css樣式一個網頁需要多個css樣式——css樣式表；一個樣式表可能是兩種存在形式——嵌入樣式表、外部樣式表（樣式放置的位置）嵌入樣式表（又叫內部樣式表）

<style>

h1{

color:#ff6600;

}

</style>外部樣式表<linkrel="stylesheet"href="main.css“/>內聯樣式表（又叫行內樣式）<pstyle=“color:#f60”>受影響的文字</p>Css樣式——外部樣式表外部樣式表

<linkrel=“stylesheet”href=“css/global.css”/>

rel:表示鏈接類型——這里表示鏈接到樣式表的一個鏈接；

href:指向網站中那個外部css文件的位置，該屬性值是一個url。Css樣式——內聯樣式創(chuàng)建一個內聯樣式表

如果你必須改變單張網頁的單個元素的樣式時使用。

不省時間，不節(jié)省寬帶，只有緊要關頭用。<pstyle="color:#003300;font-size:20px;">……<p>

Css樣式表結構Css樣式表（集合）Css樣式（單獨）選擇器聲明(塊)聲明1聲明2聲明3屬性值css3手冊.chm顏色、長度、url、關鍵字嵌入樣式表外部樣式表內聯樣式表使用與媒體相關的樣式表可以指定用于特定輸出的樣式表，如打印、或瀏覽器查看,如：

<linkrel=“stylesheet”href=“style.css”media=“screen”/>

<linkrel=“stylesheet”href=“print.css”media=“print”/>也可以在樣式表中用@media規(guī)則指定其他媒體類型，把樣式規(guī)則放在@mediaprint{}中，如：p{ color:rgba(7,118,251,1.00); }@mediaprint{ p{ color:#f60;} }9定義選擇器按元素名稱選擇元素

元素{屬性:值；}按類或ID選擇元素

.classname{屬性:值；}

#id{屬性:值；}

.classname1.classname2{屬性:值；}類選擇器和ID選擇器區(qū)別

盡可能使用類

ID在一個頁面只出現一次

可以組合一個或多個類

ID可以在頁面定義錨按上下文選擇元素

1.按祖元素選擇格式化的元素

ancestordescendant{屬性:值;}

2.按父元素選擇要格式化的元素

parent>child{屬性:值;}/*直接后代*/

3.按相鄰

同胞元素選擇要格式化的元素

sibling+element{屬性:值;}

/*相鄰且同胞*/

指定元素組

selector1,selector2{屬性:值;}組合使用選擇器

h1,h2,.class,#id{屬性:值;}}通配符選擇器

*按狀態(tài)選擇鏈接元素

a:link{屬性:值;}

a:visited{屬性:值;}

a:focus{屬性:值;}

a:hover{屬性:值;}

a:active{屬性:值;}按屬性選擇元素E:目標元素,可以根據具體情況省略。

att：屬性名稱

val：值選擇第一或最后一個子元素

元素:first-child{屬性:值;}

元素:last-child{屬性:值;}

選擇元素的第一個字母或第一行

元素:first-letter{屬性:值;}

元素:first-line{屬性:值;}10為文本添加樣式字體，文字樣式，字號，行距，顏色font-family:Constantia,“LucidaBright”;/*字體系列*/

列出一種以上的字體或者系統(tǒng)默認字體；逗號和空格分隔每個字體。font-style:italic;

/*文字樣式--斜體*/font-weight:bold;

/*文字加粗*/font-size:14px;

/*字號*/

1em=100%=16px；

根據父級元素設定字號；line-height:1.5;/*行高*/color:#CD0F12;/*文字顏色*/

顏色名稱、十六進制、rgb、hsl、rbga、hsla同時設定字體值，至少要包含字體大小和字體系列屬性

如果設置行高，必須出現在大小和斜杠后面

font屬性是繼承的字/詞間距，文本縮進、對齊、大小寫，文字修飾線，邊框letter-spacing:10px;/*中文單個字距，英文字母間距*/Word-spacing：15px;/*英文單詞間距*/text-indent:40px;/*縮進*/text-align:left;/*文本對齊*/text-decoration:underline;/*裝飾文本—下劃線*/text-transform:uppercase;/*大寫*/text-transform:small-caps;

/*小型大寫*/border:1pxsolid#f60;/*邊框*/背景色，背景圖background-color:#DBE0E3;/*背景色*/background-image:url(3.jpg);/*背景圖*/background-repeat:no-repeat;/*背景圖不重復*/background-position:lefttop;/*背景圖定位*/

可以用負值background-attachment:fixed;/*背景圖固定*/Background屬性

顏色、圖片……設置空白White-space:nowrap;/*設置空白屬性*/

pre/nowrap/normalcss常用屬性、值列舉 font-family:Constantia,“LucidaBright”;/*字體*/ font-style:italic;

/*文字樣式--斜體*/ font-weight:bold;

/*文字加粗*/ font-size:14px;

/*字號*/ line-height:1.5;

/*行間距*/ color:#CD0F12;/*中文單個字距*/ background-color:#DBE0E3;

/*背景色*/ background-image:url(3.jpg);

/*背景圖*/ background-repeat:no-repeat;

/*背景圖不重復*/ background-position:lefttop;

/*背景圖定位*/ letter-spacing:10px;/*中文單個字距，英文字母間距*/ text-indent:40px;

/*縮進*/ text-align:left;

/*文本對齊*/ text-decoration:underline;

/*裝飾文本—下劃線*/

display:inline-block;

/*行內、塊級顯示*/ width:120px;

/*寬度*/ border:1pxsolid#f60;

/*邊框*/11用css進行布局網頁布局注意事項內容（語義化標簽包圍的內容）與表現（css美化/外觀）分離布局方法

固定寬度布局

響應式布局兼容不同瀏覽器構建頁面恰當使用article、aside、nav、section、header、footer、div等元素，將頁面劃分成不同的邏輯分區(qū)并制定地標角色；同時使用合適的語義標記內容，如段落、圖和列表。按照一定順序放置內容，保證合理性。正確使用h1~h6，按照優(yōu)先級排序。使用必要的注釋來標識頁面不同區(qū)域和內容。兼容舊版本瀏覽器在網站主樣式表中添加兼容舊版本瀏覽器的css樣式：

article,aside,figcaption,figure,footer,header,main,nav,section{display:block;}在</head>之前添加兼容舊版本瀏覽器的js：

<!--[ifltIE9]>

<scriptsrc="js/html5shiv.js"></script>

<![endif]-->盒模型Css處理網頁時，它認為每個元素都包含在一個不可見的盒子里，這就是盒模型盒子由內容區(qū)域、內容區(qū)域周圍的空間（內邊距、padding）、內邊距的外緣（邊框，border）和邊框外面將元素與相鄰元素隔開的不可見區(qū)域（外邊距，margin）構成。移除所有html標簽默認邊距、填充區(qū)域：

*{margin:0;padding:0;}

作為書寫習慣書寫。Css中的width、height指的是內容的寬度盒模型外邊距：Margin兩個值分別代表上下左右；四個值分別代表上右下左；三個值代表上、左右、下。內邊距：Padding兩個值分別代表上下左右；四個值分別代表上右下左；三個值代表上、左右、下。邊框：Border粗細樣式顏色背景：Background-color/Background-image應用于內容和填充組成的區(qū)域Margin可以為負值padding一般不可以(非標準做法)控制顯示類型display:inline;設置元素顯示為塊級元素display:block;設置元素顯示為行內元素display:inline-block;設置元素混合顯示行內元素和塊級元素(例：p、h1、divulli屬塊級元素；strongspanemimga屬行內元素)行內元素和塊級元素之間轉化的方法：display：inline/block混合顯示方式:display:inline-block;讓元素與其他內容出現在同一行，同時具有塊級元素的屬性。對于行內元素可以使用水平內邊距、邊框、外邊距調整他們的水平間距。但是垂直內邊距、邊框、外邊距不影響元素顯示的高度，而是添加line-height?？刂瓶梢娦云胀ㄎ臋n流

元素在html中默認顯示為自上而下的次序，并且在塊級元素開頭和結尾處換行。display:none;/*隱藏后不占據文檔流空間*/visibility:hidden;

/*隱藏后仍占據文檔流空間*/使元素浮動浮動框旁邊的行框被縮短，從而在浮動框側面留出了空間，行框圍繞浮動框。使元素浮動

浮動的框可以左右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊緣。

浮動框不在文檔流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

如果包含塊太窄無法容納水平排列的浮動元素，那么其他浮動塊向下移動，直到有足夠的地方。如果浮動元素的高度不同，那么他們向下移動時可能會被其他浮動元素“卡住”。

除非你正浮動一張帶有預設寬度的圖片，否則你應該始終給浮動設定一個寬度

浮動要阻止行框圍繞在浮動框的外邊，需要對這個行框應用clear。Clear屬性的值可以是left、right、both、none，表示行框的哪些邊不應該挨著浮動框。添加了清理的元素的頂邊緣垂直下降到浮動框下面。也可以讓浮動元素的父元素“自清除”

在樣式表中引用.clearfix規(guī)則，然后為浮動元素的父元素添加clearfix類

Css樣式——浮動的兩列布局1.*{margin:0;padding:0;}

（去除瀏覽器默認內外邊距）2.元素居中

(左右外邊距auto)3.給浮動設定一個寬度

（可以是px、em、%）4.對容器應用溢出方法或清除浮動

（容器在視覺上包含浮動元素）Css樣式——相對定位Css中的三種基本定位機制：普通流（相對定位）、浮動、絕對定位（固定定位）。

普通文檔

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論