HTML, CSS學習筆記（完整版）

時間 2019-11-08

標籤 html css 學習筆記完整欄目 HTML 简体版

原文原文鏈接

第一章 div佈局

前幾課內容

.htm是早期的後綴。因爲那時僅僅能支持長度爲3的後綴。所以html與htm是同樣的。php

shtml是server先處理而後再交給瀏覽器處理css

#HTML小知識#之#XHTML與HTML的差異#XHTML是更嚴謹更純淨的 HTML 版本號。XHTML目標是代替HTML。更具體的介紹 XHTML 教程 http://t.cn/h94BVhtml

#HTML小知識#之#<!DOCTYPE>聲明#位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。前端

該標籤可聲明三種 DTD 類型，分別表示嚴格版本號、過渡版本號以及基於框架的 HTML 文檔。web

更具體的介紹http://t.cn/h59taG面試

作網頁先佈局。算法

先大處佈局。在細節點綴。chrome

container的高度可以不用設定height，子元素有高度會把父元素撐開的編程

1.ID命名可依據C語言變量命名規則後端

2.HTML文件自己charset採用的編碼必須與文件保存時的編碼方式同樣。不然出現亂碼顯現

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#bottom{

height:120px;

background-color: blue;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

第二章盒模型

margin 外邊框

border 邊框

padding 內邊框

第12課首頁佈局實戰之margin設置

外邊距

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 330px;

height: 280px;

background: black;

margin:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第13課盒模型之border設置

border的3要素：寬，形狀（實現虛線）。顏色

<!DOCTYPE html>

<html>

<head>

<title>study13.html</title>

div {

width: 300px;

height:300px;

background: blue;

border: 50px outset green;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

第14課用css控制border畫三角形

邊框透明

畫一棵聖誕樹

<!DOCTYPE html>

<html>

<head>

<title>study14.html</title>

#parent_div{

width: 600px;

height: 500px;

background: silver;

}

#tri1 {

width:0px;

height: 0px;

border-right: 100px solid transparent;

border-left: 100px solid transparent;

border-bottom: 100px solid green;

}

#tri2 {

width:0px;

height: 0px;

border-right: 120px solid transparent;

border-left: 120px solid transparent;

border-bottom: 120px solid green;

}

#tri3 {

width:0px;

height: 0px;

border-right: 150px solid transparent;

border-left: 150px solid transparent;

border-bottom: 150px solid green;

}

#tri4 {

width: 50px;

height: 130px;

background-color: saddlebrown;

}

</style>

</head>

<body>

</div>

</body>

</html>

改進版：

<!DOCTYPE html>

<html>

<head>

<title>study14.html</title>

#parent_div{

width: 400px;

height: 360px;

background: silver;

margin: 0px auto;

}

#tri1 {

width:0px;

height: 0px;

border-right: 100px solid transparent;

border-left: 100px solid transparent;

border-bottom: 100px solid green;

margin-bottom: -50px;

}

#tri2 {

width:0px;

height: 0px;

border-right: 120px solid transparent;

border-left: 120px solid transparent;

border-bottom: 120px solid green;

margin-bottom: -60px;

}

#tri3 {

width:0px;

height: 0px;

border-right: 150px solid transparent;

border-left: 150px solid transparent;

border-bottom: 150px solid green;

}

#tri4 {

width: 50px;

height: 100px;

background-color: saddlebrown;

}

</style>

</head>

<body>

</div>

</body>

</html>

第15課 padding具體解釋

內邊距

2.盒子的寬高各是100px。同一時候padding: 30px,背景爲灰色。請問灰色面積是多少？160px*160px，因此padding也是鋪的背景色，即背景色鋪到border，但文字輸入面積僅僅有100px*100px。

<!DOCTYPE html>

<html>

<head>

<title>study15.html</title>

#a{

width: 100px;

height:100px;

padding: 30px;

background-color: gray;

}

</style>

</head>

<body>

打一些亂七八糟的字測試一下

</div>

</body>

</html>

第16課 padding與背景

第17課 padding美化首頁

添加padding後要下降原來width和height的值

<!DOCTYPE html>

<html>

<head>

</head>

<body>

2014.09.09(星期二)

騰訊2015校園招聘就業中心一樓信息公佈廳 19:00- 21:00

2014.09.10(星期三)

中國艦船研究設計中心（武漢）就業中心一樓信息公佈廳 10:00- 12:00

陝西海泰電子有限責任公司教2-100（德育基地） 10:00- 12:00

核工業西南物理研究院主樓A-403 16:30- 18:30

</div>

2014.09.11(星期四)

中國航天科技集團公司第一研究院第十二研究所就業中心204室 10:00- 12:00

航天恆星科技有限公司就業中心一樓信息公佈廳 14:30- 16:30

北京數碼視訊科技股份有限公司就業中心一樓信息公佈廳 16:30- 18:30

百度就業中心一樓信息公佈廳 19:00- 21:00

香港理工大學碩士招生宣講會文治書院報告廳（西19舍1

</div>

2014.09.11(星期四)

中國航天科技集團公司第一研究院第十二研究所就業中心204室 10:00- 12:00

航天恆星科技有限公司就業中心一樓信息公佈廳 14:30- 16:30

北京數碼視訊科技股份有限公司就業中心一樓信息公佈廳 16:30- 18:30

百度就業中心一樓信息公佈廳 19:00- 21:00

香港理工大學碩士招生宣講會文治書院報告廳（西19舍1

</div>

2014.09.11(星期四)

中國航天科技集團公司第一研究院第十二研究所就業中心204室 10:00- 12:00

航天恆星科技有限公司就業中心一樓信息公佈廳 14:30- 16:30

北京數碼視訊科技股份有限公司就業中心一樓信息公佈廳 16:30- 18:30

百度就業中心一樓信息公佈廳 19:00- 21:00

香港理工大學碩士招生宣講會文治書院報告廳（西19舍1

</div>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 310px;

height: 260px;

background: white;

margin:10px;

padding:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第18課盒子模型的總結

一個盒子，有margin，border，padding，實佔多少空間？

<!DOCTYPE html>

<html>

<head>

<title>study15.html</title>

#a{

width: 300px;

height:300px;

border: 50px solid blue;

padding:50px;

margin:50px;

background-color: silver;

}

</style>

</head>

<body>

一個盒子，有margin。border，padding，實佔多少空間？<br/>

豎直方向：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom<br/>

水平方向：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right<br/>

</div>

</body>

</html>

第19課利用margin實現水平居中

<!DOCTYPE html>

<html>

<head>

<title>study19.html</title>

#a{

width: 300px;

height:200px;

background-color: silver;

margin: 0px auto;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

2014.09.09(星期二)

騰訊2015校園招聘就業中心一樓信息公佈廳 19:00- 21:00

2014.09.10(星期三)

中國艦船研究設計中心（武漢）就業中心一樓信息公佈廳 10:00- 12:00

陝西海泰電子有限責任公司教2-100（德育基地） 10:00- 12:00

核工業西南物理研究院主樓A-403 16:30- 18:30

</div>

2014.09.11(星期四)

中國航天科技集團公司第一研究院第十二研究所就業中心204室 10:00- 12:00

航天恆星科技有限公司就業中心一樓信息公佈廳 14:30- 16:30

北京數碼視訊科技股份有限公司就業中心一樓信息公佈廳 16:30- 18:30

百度就業中心一樓信息公佈廳 19:00- 21:00

香港理工大學碩士招生宣講會文治書院報告廳（西19舍1

</div>

2014.09.11(星期四)

中國航天科技集團公司第一研究院第十二研究所就業中心204室 10:00- 12:00

航天恆星科技有限公司就業中心一樓信息公佈廳 14:30- 16:30

北京數碼視訊科技股份有限公司就業中心一樓信息公佈廳 16:30- 18:30

百度就業中心一樓信息公佈廳 19:00- 21:00

香港理工大學碩士招生宣講會文治書院報告廳（西19舍1

</div>

2014.09.11(星期四)

中國航天科技集團公司第一研究院第十二研究所就業中心204室 10:00- 12:00

航天恆星科技有限公司就業中心一樓信息公佈廳 14:30- 16:30

北京數碼視訊科技股份有限公司就業中心一樓信息公佈廳 16:30- 18:30

百度就業中心一樓信息公佈廳 19:00- 21:00

香港理工大學碩士招生宣講會文治書院報告廳（西19舍1

</div>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

margin: 0px auto;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 310px;

height: 260px;

background: white;

margin:10px;

padding:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第20課 margin重疊現象

上下相鄰普通元素margin重疊取大的值

float不一樣

<!DOCTYPE html>

<html>

<head>

<title>study20.html</title>

#test1 {

height: 200px;

background: silver;

margin-bottom: 100px;

}

#test2 {

height: 200px;

background: red;

margin-top: 100px;

}

</style>

</head>

<body>

相鄰的普通元素。上下邊距。並非簡單地的相加<br>

而是取當中較大的邊距值<br>

這樣的現象叫作margin重疊<br>

</div>

</body>

</html>

學過這課後又一次改動了聖誕樹。

第21課 inline內聯（行內元素）

<!DOCTYPE html>

<html>

<head>

<title>study21.html</title>

<style>

#kurong {

color: red;

}

</style>

</head>

<body>

<div>

離離原上草，一歲一<div id="kurong">枯榮</div>。

<br>

野火燒不盡，春風吹又生。<br>

遠芳侵古道。晴翠接荒城。

<br>

又送王孫去，萋萋滿別情。

<br>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>study21.html</title>

<style>

#kurong {

color: red;

}

</style>

</head>

<body>

<div>

離離原上草，一歲一<span id="kurong">枯榮</span>。

<br>

野火燒不盡，春風吹又生。

<br>

遠芳侵古道。晴翠接荒城。<br>

又送王孫去，萋萋滿別情。<br>

</div>

</body>

</html>

塊狀元素：獨佔一行

內聯元素：不能設置寬高，內外邊距，可以水平方向設置邊距

* 塊狀元素和內聯元素相互轉化

塊狀元素轉化爲內聯元素：css設置display:inline ;

內聯元素轉化爲塊狀元素：css設置display:block ;

塊狀元素

內聯元素

address - 地址
blockquote - 塊引用
center - 舉中對齊塊
dir - 文件夾列表
div - 常用塊級easy，也是CSS layout的主要標籤
dl - 定義列表
fieldset - form控制組
form - 交互表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
ol - 有序表單
p - 段落
pre - 格式化文本
table - 表格
ul - 無序列表

a - 錨點
abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
bdo - bidi override
big - 大字體
br - 換行
cite - 引用
code - 計算機代碼(在引用源代碼的時候需要)
dfn - 定義字段
em - 強調
font - 字體設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標籤
q - 短引用
s - 中劃線(不推薦)
samp - 定義範例計算機代碼
select - 項目選擇
small - 小字體文本
span - 常用內聯容器。定義文本內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 電傳文本
u - 下劃線
var - 定義變量

第22課內聯與塊狀的轉化

<!DOCTYPE html>

<html>

<head>

<title>study22.html</title>

div {

width:200px;

height:200px;

display:inline;

background: orange;

}

span {

width:200px;

height:200px;

display:none;

/* display:block; */

background: silver;

}

</style>

</head>

<body>

</body>

</html>

display可能的值

值描寫敘述

none 此元素不會被顯示。

block 此元素將顯示爲塊級元素。此元素先後會帶有換行符。

inline 默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。

inline-block 行內塊元素。（CSS2.1 新增的值）

list-item 此元素會做爲列表顯示。

run-in 此元素會依據上下文做爲塊級元素或內聯元素顯示。

compact CSS中有值 compact，只是由於缺少普遍支持，已經從CSS2.1 中刪除。

marker CSS中有值 marker，只是由於缺少普遍支持，已經從 CSS2.1 中刪除。

table 此元素會做爲塊級表格來顯示（相似 <table>）。表格先後帶有換行符。

inline-table 此元素會做爲內聯表格來顯示（相似<table>）。表格先後沒有換行符。

table-row-group 此元素會做爲一個或多個行的分組來顯示（相似<tbody>）。

table-header-group 此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。

table-footer-group 此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。

table-row 此元素會做爲一個表格行顯示（相似 <tr>）。

table-column-group 此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。

table-column 此元素會做爲一個單元格列顯示（相似 <col>）

table-cell 此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）

table-caption 此元素會做爲一個表格標題顯示（相似 <caption>）

inherit 規定應該從父元素繼承 display 屬性的值。

第三章 CSS

第23課 CSS控制段落文本

<!DOCTYPE html>

<html>

<head>

<title>study23.html</title>

#p1 {

background-color: silver;

text-align: center;

letter-spacing: 15px;

}

#p2 {

background-color: orange;

text-indent: 20px;

text-decoration: line-through;

}

</style>

</head>

<body>

<p id="p1">據有關數據顯示。</p>

<p id="p2">只是，正當國內電商巨頭們有條不紊的佈局海淘之時，亞馬遜，這家在中國早已被邊緣化的國際電商巨鱷也在窺視着這塊市場。

近日。亞馬遜中國方面放出風聲，最快在今年第四季度開通海外產品直郵服務，屆時，國內用戶就能經過亞馬遜中國買到從國外來的商品。</p>

</body>

</html>

text-decoration none 默認。定義標準的文本。的一條線。

text-decoration overline 定義文本上的一條線。

text-decoration line-through 定義穿過文本下的一條線。

text-decoration blink 定義閃爍的文本。 //IE不支持火狐下可以使用

text-decoration inherit 規定應該從父元素繼承text-decoration 屬性的值。

text-decoration underline 定義文本下的一條線。

background-color 文本背景顏色

color 文本字體的顏色

text-indent 首行文本的縮進

text-align 文本對齊方式 left centerright

letter-spacing 字體間的距離

text-transform none默認值不變

text-transform uppercase 文本全大寫

text-transform lowercase 文本全小寫

text-transform 每個單詞首字母大寫

word-spacing 屬性可以改變字（單詞）之間的標準間隔。

其默認值normal 與設置值爲 0 是同樣的。

word-spacing 屬性接受一個正長度值或負長度值。

假設提供一個正長度值。那麼字之間的間隔就會添加。

爲 word-spacing 設置一個負值，會把它拉近：

white-space 值爲normal時去除空白字符

white-space 屬性設置爲 pre 時，瀏覽器不會合並空白符，也不會忽略換行符，與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個br 元素。

在 CSS 中使用 nowrap 很相似於 HTML 4 中用 <td nowrap> 將一個表單元格設置爲不能換行，只是 white-space 值可以應用到不論什麼元素。

當 white-space 屬性設置爲pre-wrap 時，瀏覽器不只會保留空白符並保留換行符。還贊成本身主動換行。

----------------------------------

Properties

屬性 CSS Version

版本號 Inherit From Parent

繼承性 Description

簡單介紹

text-indent CSS1 有檢索或設置對象中的文本的縮進

text-overflow CSS3 無設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出

text-align CSS1/CSS3有設置或檢索對象中文本的對齊方式

text-transform CSS1/CSS3 有檢索或設置對象中的文本的大寫和小寫

text-decoration CSS1/CSS3 無複合屬性。檢索或設置對象中的文本的裝飾，例如如下劃線、閃爍等

text-decoration-line CSS3 無檢索或設置對象中的文本裝飾線條的位置。

text-decoration-color CSS3 無檢索或設置對象中的文本裝飾線條的顏色。

text-decoration-style CSS3 無檢索或設置對象中的文本裝飾線條的形狀。

text-shadow CSS3 有設置或檢索對象中文本的文字是否有陰影及模糊效果

text-fill-color CSS3 有設置或檢索對象中的文字填充顏色

text-stroke CSS3 有複合屬性。設置或檢索對象中的文字的描邊

text-stroke-width CSS3 有設置或檢索對象中的文字的描邊厚度

text-stroke-color CSS3 有設置或檢索對象中的文字的描邊顏色

letter-spacing CSS1 有檢索或設置對象中的文字之間的間隔

word-spacing CSS1 有檢索或設置對象中的單詞之間插入的空格數。

vertical-align CSS1/CSS2 無設置或檢索對象內容的垂直對其方式

word-wrap CSS3有設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行

white-space CSS1 有設置或檢索對象內空格的處理方式

direction CSS2有檢索或設置文本流的方向

unicode-bidi CSS2 無用於同一個頁面裏存在從不一樣方向讀進的文本顯示。與direction屬性一塊兒使用

line-height CSS1 有檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離

tab-size CSS3有檢索或設置對象中的製表符的長度

第24課文字控制

<!DOCTYPE html>

<html>

<head>

<title>study24.html</title>

#text1 {

color: blue;

font-style: italic;

font-weight: bold;

font-size: x-large;

line-height: 50px;

}

#text2 {

font: 23px/46px Microsoft YaHei;

}

</style>

</head>

<body>

離離原上草，一歲一枯榮。<br>

野火燒不盡，春風吹又生。<br>

</div>

遠芳侵古道，晴翠接荒城。<br>

又送王孫去。萋萋滿別情。<br>

</div>

</body>

</html>

字體的英文名

宋體 SimSun

黑體 SimHei

微軟雅黑 Microsoft YaHei

微軟正黑體 Microsoft JhengHei

新宋體 NSimSun

新細明體 PMingLiU

細明體 MingLiU

標楷體 DFKai-SB

仿宋 FangSong

楷體 KaiTi

仿宋_GB2312 FangSong_GB2312

楷體_GB2312 KaiTi_GB2312

宋體：SimSuncss中中文字體（font-family）的英文名稱

Mac OS的一些：

華文細黑：STHeiti Light [STXihei]

華文黑體：STHeiti

華文楷體：STKaiti

華文宋體：STSong

華文仿宋：STFangsong

儷黑 Pro：LiHei Pro Medium

儷宋 Pro：LiSong Pro Light

標楷體：BiauKai

蘋果儷中黑：Apple LiGothic Medium

蘋果儷細宋：Apple LiSung Light

Windows的一些：

新細明體：PMingLiU

細明體：MingLiU

標楷體：DFKai-SB

黑體：SimHei

新宋體：NSimSun

仿宋：FangSong

楷體：KaiTi

仿宋_GB2312：FangSong_GB2312

楷體_GB2312：KaiTi_GB2312

微軟正黑體：Microsoft JhengHei

微軟雅黑體：Microsoft YaHei

裝Office會生出來的一些：

隸書：LiSu

幼圓：YouYuan

華文細黑：STXihei

華文楷體：STKaiti

華文宋體：STSong

華文中宋：STZhongsong

華文仿宋：STFangsong

方正舒體：FZShuTi

方正姚體：FZYaoti

華文彩雲：STCaiyun

華文琥珀：STHupo

華文隸書：STLiti

華文行楷：STXingkai

華文新魏：STXinwei

Windows 中的中文字體。

在默認狀況下，也就是未自行安裝新字體或者 Office 等文字處理軟件的狀況下。Windows 默認提供下列字體：

Windows 95/98/98SE 宋體、黑體、楷體_GB23十二、仿宋_GB2312

Windows XP/2000/2003/ME/NT 宋體/新宋體、黑體、楷體_GB23十二、仿宋_GB2312 (Windows XP SP3 宋體-PUA)

Windows Vista/7/2008 宋體/新宋體、黑體、楷體、仿宋、微軟雅黑、SimSun-ExtB

那麼每種字體能顯示那些漢字呢？

Vista 以前的 Windows 中宋體/新宋體、黑體支持 GBK 1.0 字符集，

楷體_GB23十二、仿宋_GB2312 支持 GB2312-80 字符集。

（注：Windows 3.X 僅僅能支持 GB2312-80 字符集）

Vista 及以後的 Windows 中宋體/新宋體、黑體、楷體、仿宋、微軟雅黑支持 GB18030-2000 字符集，

SimSun-ExtB 僅僅支持 GB18030-2005 字符集擴展 B 部分。

如下對字符集進行簡單的介紹：

GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005

GB2312-80 中的字符數量最少，GB18030-2005 字符數量最多。

GB2312-80 是最先的版本號，字符數比較少；

GBK 1.0 中的漢字大體與 Unicode 1.1 中的漢字數量一樣；

GB18030-2000 中的漢字大體與 Unicode 3.0 中的漢字數量一樣。主要添加了擴展 A 部分。

GB18030-2005 中的漢字大體與 Unicode 4.1 中的漢字數量一樣。主要添加了擴展 B 部分；

由於 Unicode 5.2 的公佈。預計 GB18030 會在最近公佈新版本號，添加擴展 C 部分。

需要說明的是在 GB18030 中擴展 B 部分並不是強制標準。

假設想查看 GB18030 的標準文本，請訪問 http://www.gb168.cn 中的強標閱讀。

假設想了解 Unicode 的內容，請訪問 http://www.unicode.org。

現在糾正網上廣泛的一個錯誤：

GB18030-2000 和 GB18030-2005 都不支持單字節的歐元符號

與中文簡體有關的代嗎頁例如如下：

936 gb2312 中文簡體(GB2312)————事實上是GBK

10008 x-mac-chinesesimp 中文簡體(Mac)

20936 x-cp20936 中文簡體(GB2312-80)

50227 x-cp50227 中文簡體(ISO-2022)

51936 EUC-CN 中文簡體(EUC)

52936 hz-gb-2312 中文簡體(HZ)

54936 GB18030 中文簡體(GB18030)

補充：

使用楷體_GB23十二、仿宋_GB2312後。在 Windows 7/Vista/2008 中可能再也不顯示爲相應的字體。

這是因爲 Windows 7/Vista/2008 中有楷體、仿宋，默認狀況下沒有楷體_GB23十二、仿宋_GB2312，字體名稱相差「_GB2312」。

第25課字體控制精講

新聞標題：用黑體或無襯線（sans-serif）

新聞正文：宋體或有襯線（serif）

注意，你設置的字體。你客戶機器上未必有。要沒有。這是顯示的就是默認字體。

因此，要注意，你選的一些好看的字體，別人沒有。

因此。用設置字體，可以將選用字體，和備選字體依次在後面排列。

eg：

font-family：‘xx1’,'xx2','xd3',sans-serif;

上面這句的意思就是，客戶的瀏覽器先去調用’xx1'字體，假設客戶沒有。便調用'xx2'，尚未。再調用'xx3',假設仍是沒有，就讓瀏覽器隨便調用一個sans-serif的字體便可。

第26課背景圖片

background-attachment : scroll默認值滾動 fiixed背景固定

background-color : transparent 默認值背景透明

background-color：顏色背景顏色

background-image： none默認值無背景url（背景路徑）背景圖片

background-position： left top center right 可以選擇背景所在的位置

background-repeat： repeat-x X軸平鋪 repeat-y Y軸平鋪 no-repeat 背景圖片不反覆

1.背景圖與背景色。都設置，顯示背景圖。

2.爲何有的站點既設背景圖又設背景色？

1）由於網速或代碼冗餘而致使站點打開速度慢的時候，圖片載入不出來就能夠先顯示背景色。

2）另外一種狀況。考慮到大屏下（如1920*1080或者更大）站點背景圖不足以撐滿整個顯示區域，因此背景圖之外的部分要顯示背景色。並且背景圖邊緣部分必須處理穩當保證平滑過渡到背景色，不會有突兀的感受。

<!DOCTYPE html>

<html>

<head>

<title>study26.html</title>

body {

background-color:black;

background-repeat: repeat-x;

background-attachment: fixed;

}

</style>

</head>

<body>

</body>

</html>

第27課大圖片背景

<!DOCTYPE html>

<html>

<head>

<title>study27.html</title>

#text1 {

border: 1px solid orange;

width: 500px;

height: 500px;

background-repeat: no-repeat;

background-position: center center;

}

#text2 {

width: 80px;

height: 20px;

border: 1px solid blue;

background-position: -5px -120px;

}

#text3 {

width: 30px;

height: 30px;

border: 1px solid black;

background-position: -160px -523px;

}

</style>

</head>

<body>

</body>

</html>

1.CSS控制頁面時，頁面以左上角爲原點，向下爲正Y軸。向右爲正X軸

第28課 CSS選擇器

<!DOCTYPE html>

<html>

<head>

<title>study28.html</title>

#test1 {

width: 100px;

height: 50px;

border: 1px solid blue;

}

.test2 {

width: 100px;

height: 50px;

border: 1px solid red;

}

div {

width: 200px;

height: 200px;

background-color: orange;

margin-bottom: 10px;

}

div p {

color: red;

}

</style>

</head>

<body>

<div>

普通div

<p>

div中的p

</p>

</div>

<p>

獨立的p

</p>

<div>

css選擇器：id選擇器(#)。class選擇器(.),標籤選擇器（div{}），派生選擇器(div p{})

</div>

</body>

</html>

1.css選擇器：id選擇器(#)，class選擇器(.),標籤選擇器（div{}），派生選擇器(div p{})

2.還有沒有其它選擇器及其使用方法？

第一 id #xxx

第二 class .xxx

第三標籤 div p body 等

第四後代 div p{} .a .b{} 等表示所有空格後面的選擇器生效

第五子代 div > p 僅僅有大於號後面的選擇器生效不繼承下去了

第六羣組選擇 div,p,a{} 記住是逗號不是小數點。表示div p a標籤都生效

第七僞選擇器比方 a:link 讓鼠標放上去的時候生效

第八通用選擇器比方 p *{} 表示p標籤後面的所有標籤都生效

第九相鄰選擇器比方 p+div{} 表示 p後面的第一個div生效後面的都無效

第十屬性選擇器比方 p[title='aa'] {} 表示 p標籤裏面是否有title等於aa的屬性有的話就生效

第29課 CSS優先級

控制的越精細，優先級越高

<!DOCTYPE html>

<html>

<head>

<title>study29.html</title>

p {

color: red;

}

.test2 {

color: green;

}

#test1 {

color: blue;

}

div #test1{

color: pink;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

第30課 CSS引入方式

<!DOCTYPE html>

<html>

<head>

<title>study30.html</title>

body {

background-color: silver;

}

</style>

</head>

<body>

</body>

</html>

@CHARSET "UTF-8";

@import url(study301.css);

#test1 {

width: 100px;

height: 100px;

background-color: orange;

}

@CHARSET "UTF-8";

@import url(study301.css);

#test1 {

width: 100px;

height: 100px;

background-color: orange;

}

CSS的四種引入方式

要說出CSS的引入方式，沒有什麼難度，但要說到爲何使用不一樣的引入方式，就有些學問在裏面了。

CSS的引入方式最常用的有三種。

第一：在head部分增長<link rel="stylesheet"type="text/css" href="my.css"/>,引入外部的CSS文件。

這樣的方法可以說是現在佔統治地位的引入方法。

如同IE與瀏覽器。這也是最能體現CSS特色的方法；最能體現DIV+CSS中的內容與顯示分離的思想，也最易改版維護，代碼看起來也是最美觀的一種。

第二：在head部分增長

div{margin: 0;padding: 0;border:1px redsolid;}

</style>

這樣的方法的使用狀況要少的多。最長見得就是訪問量大的門戶站點。或者訪問量較大的企業站點的首頁。

與第一種方法比起來。長處突出，弊端也明顯。長處：速度快，所有的CSS控制都是針對本頁面標籤的，沒有多餘的ＣＳＳ命令。再者不用外鏈ＣＳＳ文件。直接在ＨＴＭＬ文檔中讀取樣式。缺點就是改版麻煩些，單個頁面顯得臃腫，ＣＳＳ不能被其它ＨＴＭＬ引用形成代碼量相對較多。維護也麻煩些。　但是採用這樣的方法的公司大多有錢，對他們來講用戶量是關鍵，他們不缺人進行復雜的維護工做。

第三：直接在頁面的標籤里加　<divstyle="border:1px red solid;">測試信息</div>

這樣的方法現在用的很是少，很是多公司不瞭解前端技術的領導還對這樣的寫法很是痛恨。

以爲ＨＴＭＬ裏不能出現ＣＳＳ命令。事實上有時候使用下也沒有什麼大不了。

比方通用性差，效果特殊，使用ＣＳＳ命令較少，並且不常修改的地方，使用這樣的方法反而是很是好的選擇。

除了這三種常用的ＣＳＳ引入方式。還有種很是多人都沒有見過的引入方式

@import url(my.css);

</style>

這就是第四種引入方式。在ＩＢＭ工做的時候，僅僅能使用一種Ajax框架，就是ＤＯＪＯ。而ＤＯＪＯ的CSS引用。就是採用了@import的方式。這樣的狀況很是少，主要用在CSS文件數量龐大的負責的系統中。另外@important自己是一個CSS命令，是放在CSS文件中的，這個跟LINK標籤有很是大的差異。

第31課 CSS初始化

<!DOCTYPE html>

<html>

<head>

<title>study31.html</title>

ul {

border: 1px solid blue;

}

li {

border: qpx solid red;

}

</style>

</head>

<body>

<div>

一樣的元素，如li。在不一樣的瀏覽器下。顯示的效果稍有不一樣。<br>

是因爲，瀏覽器對各類元素的margin，border，font-size等略有不一樣<br>

爲了杜絕這樣的狀況，咱們經過CSS強制讓所有的元素的屬性值都同樣<br>

這樣瀏覽器顯示效果就一致了。下降了不兼容狀況的發生<br>

<ul>

</ul>

</div>

</body>

</html>

騰訊的初始化代碼

/*update 20140616*/

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body{font:12px "宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}

a{color:#172c45;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:0;vertical-align:middle}

table{border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}

第四章 HTML語義標籤

第32課HTML學習思惟導圖

1、html結構：

主要包含3部分：doctype、head、body

1）doctype:文檔類型,XHTML1.0提供了3中DTD供可供選擇

* 過渡的(Transitional)：要求很寬鬆的DTD，它贊成你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)，完整代碼例如如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 嚴格的(Strict)：要求嚴格的DTD。你不能使用不論什麼表現層的標識和屬性，好比<br>，完整代碼例如如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 框架的(Frameset)：專門針對框架頁面設計使用的DTD，假設你的頁面中包括有框架，需要採用這樣的DTD，完整代碼例如如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2）head:包含meta charser和title,也能包含css。

3）body:各類div及html標籤。

2、div佈局

一、佈局原則：從上到下、從左到右、從大到小

二、盒模型：塊狀元素div當作盒子。

1）盒子有本身的寬width和高height;

2)盒子與盒子之間的距離稱爲外邊距margin：

margin後面可以跟1~4個值。依照上、右、下、左的順序爲四個方向分配值。沒有分配到的取對邊的值。

普通元素及父子元素在豎直方向上存在margin重疊現象，即相鄰的兩個普通元素，上下邊距，不是簡單的相加，而是取邊距較大者的元素的邊距值；關係爲父子的兩個div元素，豎直方向上假設兩個元素都設有margin值，則會取margin值較大的元素的邊距值。

3）盒子的厚度稱爲邊框border。border的3要素：寬形狀顏色。

border的3要素可單獨定義，也可以和4個方向按需要結合。

4）盒子與內部內容的距離稱爲padding：定義方式同margin。

三、普通div無論寬度是多少都獨佔一行。要實現2個div並排顯示。就要用浮動float，如float:left/right;

浮動元素後面再來一個普通元素，那這個元素會跑到浮動元素的如下，因此要使它正常顯示。要清除浮動clear，如clear:left/right/both;

3、css效果

一、選擇器

常用的有id選擇器、類選擇器、標籤選擇器、派生選擇器

第一 id選擇器 #xxx

第二 class選擇器 .xxx

第三標籤選擇器 div p body 等

第四派生選擇器 div p{} .a .b{} 等表示所有空格後面的選擇器生效

第五子代選擇器 div > p 僅僅有大於號後面的選擇器生效不繼承下去了

第六羣組選擇 div,p,a{} 記住是逗號不是小數點，表示div p a標籤都生效

第七僞類選擇器比方 a:link 讓鼠標放上去的時候生效

第八通用選擇器比方 p *{} 表示p標籤後面的所有標籤都生效

第九相鄰選擇器比方 p+div{} 表示 p後面的第一個div生效後面的都無效

第十屬性選擇器比方 p[title='aa'] {} 表示 p標籤裏面是否有title等於aa的屬性有的話就生效

二、控制效果

1）段落控制：text-indent:首行縮進

text-align:水平文字方向

text-decoration:文本裝飾線

letter-spacing:字符間距

text-transform:字母大寫和小寫轉換

2）文本控制：color:顏色

font-style:字體樣式

font-weight:字體粗細

font-size:字體大小

line-height:行高

font-family:字體

3）背景控制：background-color:背景色

background-image:背景圖片

background-repeat:背景圖反覆

background-attachment:背景圖粘貼方式

background-position:背景圖位置

背景色和背景圖同一時候設置時，優先顯示背景圖，同一時候設置爲了當背景圖被刪除或緩衝慢時，設置一個與背景圖色調相近的背景色。使站點的視覺效果不會反差太大。

當背景圖比元素還大時。就需要調background-positin來實現。

4）css引入方式

①頁內style標籤即在head部分增長style標籤：

div{margin: 0;padding: 0;border:1px red solid;}

</style>

②外部css文件,在head部分增長link：

③行內style標籤,直接在頁面的標籤里加style屬性：

④import導入即在head部分增長@import：

@import url(xxx.css);

</style>

5）初始化

因爲各瀏覽器對於元素有默認css參數，而且可能不一致。那麼相同一段代碼在不一樣瀏覽器之間顯示效果就不同。

那麼就需要統一對常用元素常用css參數手動設定統一效果。

4、html標籤

分爲2大類：無語義標籤和有語義標籤。

以前學過的div和span都是無語義標籤，div是佈局分塊的塊狀元素，span是選擇文字用的內聯元素。

有語義標籤，每個標籤的名字就能看出它的做用，有標題h1~h6，段落p,圖片img，視頻embed，超連接和錨點a，無序列表ul,有序列表ol，表格table。

http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg

第33課 h標籤與p標籤

第34課 img標籤

src 這裏是路徑問題。

./ 是一樣文件夾下

../ 是返回上一級文件夾

<!DOCTYPE html>

<html>

<head>

<title>study34.html</title>

</head>

<body>

<img alt="吃驚" src="http://www.zixue.it/uc_server/avatar.php?

uid=5410&size=middle" title="別的站點的圖片">

</body>

</html>

單閉合標籤

凝視標籤：

嚴格來說不算HTML標籤的：<!DOCTYPE>文檔聲明標籤

設置頁面元信息的：<meta>標籤

設置網頁所有連接的相對文件夾(如根文件夾)的：<base>標籤

換行：<br>

水平線：<hr>

圖像：<img>

表單元素<input>

在表格table中定義一個或多個列的屬性的：<col>標籤

定義框架的一個窗體的：<frame>標籤

定義文檔與外部資源的關係的：<link>連接標籤

第35課圖片是內聯仍是塊狀

圖片不能設置margin值

可以轉化爲塊狀再取消margin值

<!DOCTYPE html>

<html>

<head>

<title>study35.html</title>

img {

width: 300px;

height: 180px;

border: 1px solid blue;

display: block;

}

#test1 {

width: 500px;

height: 300px;

border: 1px solid blue;

}

</style>

</head>

<body>

<div id="test1">圖片是內聯元素，同一時候是內聯替換元素，替換元素是能設置寬高的</div>

</body>

</html>

搜索除了img還有那些替換元素 w3creplaced element

替換元素：

替換元素是瀏覽器依據其標籤的元素與屬性來推斷顯示詳細的內容。

比方：<input /> type="text" 的是，這是一個文本輸入框，換一個其它的時候。瀏覽器顯示就不同

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素都沒有實際的內容。

第36課有序列表和無序列表

爲了最大程度的兼容不一樣瀏覽器，一般把 li 標籤設置爲list-syle-type：none ，而後經過載入本身定義圖片來實現。

<!DOCTYPE html>

<html>

<head>

<title>study36.html</title>

ul li {

list-style-type: square;

}

ol li {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<li>aaasda</li>

<li>aadfa</li>

<li>aaadsfa</li>

<li>aafda</li>

</ol>

</body>

</html>

-----

小熊列表

<!DOCTYPE html>

<html>

<head>

<title>study36.html</title>

ul li {

/* list-style-type: square; */

list-style-type: none;

background-repeat: no-repeat;

background-size:20px;

background-position: left center;

padding-left: 20px;

}

ol li {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<li>aaasda</li>

<li>aadfa</li>

<li>aaadsfa</li>

<li>aafda</li>

</ol>

</body>

</html>

第37課整齊的表格

<!DOCTYPE html>

<html>

<head>

<title>study37.html</title>

table {

border-collapse: collapse;/* 表格邊框融合 */

}

td {

border: 1px solid blue;

}

</style>

</head>

<body>

<table>

<tr>

<td colspan="3">sdfsdf</td>

</tr>

<tr>

<td>sdfsdf</td>

</tr>

<tr>

<td>sdfsdf</td>

</tr>

</table>

</body>

</html>

第38課超連接

a標籤，內聯元素

<!DOCTYPE html>

<html>

<head>

<title>study38.html</title>

</head>

<body>

<a href="webTest.html" target="_blank" title="鼠標放上來">點擊(在空白新窗體顯示)</a>

</body>

</html>

使用# 來實現標籤。轉到特定內容下

第39課錨點

<!DOCTYPE html>

<html>

<head>

<title>study39.html</title>

</head>

<body>

<p>1asdfasdf</p>

<br>

<p>2asdfasdf</p>

<br>

<p>3asdfasdf</p>

</body>

</html>

第40課 css僞類

<!DOCTYPE html>

<html>

<head>

<title>study40.html</title>

a:LINK {/* 默認顏色 */

color: gray;

}

a:VISITED { /* 訪問過的顏色 */

color: purple;

}

a:HOVER { /* 鼠標放上去的顏色 */

color: orange;

}

a:ACTIVE { /* 鼠標按住不放的顏色 */

color: black;

}

</style>

</head>

<body>

<div>

css贊成咱們針對a標籤的4中狀態設置各自的css特性，叫作css的僞類<br>

1：active通常不寫

2: 必定要注意，順序是LVHA

3: a:link可以簡寫爲a

</div>

<div>

</div>

</body>

</html>

第41課字符實體

<!DOCTYPE html>

<html>

<head>

<title>study41.html</title>

</head>

<body>

<div>

在html開發中，有一些字符，不適於直接寫出，如><<br>

通常的格式：& + 實體名 + ;<br>

實體有很是多，記住常用的<br>

><"¥©<br>

</div>

</body>

</html>

第五章公司網頁開發實戰

第42課公司站點開發之首頁佈局

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

第43課首頁實戰導航製做

css初始化：

@CHARSET "UTF-8";

/*css reset code */

/**** 文字大小初始化,使1em=10px *****/

body {

font-size:62.5%;

} /* for IE/Win */

html>body {

font-size:10px;

} /* for everything else */

/*字體邊框等初始化*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset,img {

border: 0;

}

img {

display:block;

}

address,caption,cite,code,dfn,th,var {

font-weight: normal;

font-style: normal;

}

ol,ul {

list-style: none;

}

caption,th {

text-align: left;

}

h1,h2,h3,h4,h5,h6 {

font-weight: normal;

font-size: 100%;

}

q:before,q:after {

content:'';

}

abbr,acronym { border: 0;

}

a {

text-decoration:none;

}

<!DOCTYPE html>

<html>

<head>

#container {

width: 1002px;

}

#header {

height:128px;

background: gray url("./indexPics/top_bg.jpg");

}

#navi li {

width:90px;

margin-right:1px;

float: left;

}

#navi a {

font-size:16px;

font-family:Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

</style>

</head>

<body>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

第44課首頁實戰之main區開發

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid gray;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

height: 600px;

width: 294px;

background-color: green;

float: right;

}

#footer {

height: 120px;

background-color: black;

}

index.html

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

第45課首頁實戰之main區(2)

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid gray;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

display: block;

height: 29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

height: 120px;

background-color: black;

}

html

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

</div>

</body>

</html>

第46課首頁實戰之footer區域開發

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

display: block;

height: 29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP備123456789號</address>

</div>

</body>

</html>

第47課首頁實戰之色彩微調

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: #888;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

color:#a0a0a0;

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: #888;

}

.four a:VISITED{

color: #808080;

}

.four a:HOVER {

color:#ff832c;

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

color:#888;

display: block;

height: 29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

color:#ff832c;

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer a {

color: #888;

}

#footer a:HOVER {

color:#ff832c;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP備123456789號</address>

</div>

</body>

</html>

第48課利用行高實現文字居中

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

line-height:37px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

line-height:37px;

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

display:block;

line-height:37px;

font-family:SimSun, serif;

font-size:12px;

color: #888;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

color:#a0a0a0;

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: #888;

}

.four a:VISITED{

color: #808080;

}

.four a:HOVER {

color:#ff832c;

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

color:#888;

display: block;

height: 29px;

line-height:29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

color:#ff832c;

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer a {

color: #888;

}

#footer a:HOVER {

color:#ff832c;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP備123456789號</address>

</div>

</body>

</html>

第49課 IE瀏覽器兼容

主要是字體大小的問題

bug的幾種常見緣由：

1 沒有正確使用doctype。解決方式正確聲明就能夠

2 個瀏覽器對不一樣標籤的初始值不一樣，解決方式 css初始化

3 自身書寫不規範。寫規範就能夠

4 瀏覽器bug

IE下真正的bug

1 盒模型bug，解決方式使用嚴格doctype聲明

2 雙倍margin bug，解決方式： _display:inline此時僅僅影響IE瀏覽器。左浮元素。左margin是定義的2倍

3 不認識a:link。解決方式僅僅定義a

4 3像素margin bug。解決方式規範浮動與清楚浮動

終於代碼：

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

<h2>電子商務類站點建設</h2>

<ul>

<li><a href="#">方便的訂單管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP備123456789號</address>

</div>

</body>

</html>

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

line-height:37px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

color:#151515;

line-height:37px;

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

display:block;

line-height:37px;

font-family:SimSun, serif;

font-size:12px;

color: #888;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

color:#a0a0a0;

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

font-size:12px;

color: #888;

}

.four a:VISITED{

color: #808080;

}

.four a:HOVER {

color:#ff832c;

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

color:#888;

display: block;

height: 29px;

line-height:29px;

font-size:12px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

color:#ff832c;

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

font-size:12px;

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer a {

color: #888;

}

#footer a:HOVER {

color:#ff832c;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

第六章附錄

第50課色彩的表示

第51課尺寸的表示

像素表示

百分比表示：佔父元素的百分比

<!DOCTYPE html>

<html>

<head>

<title>study51.html</title>

#parent {

font-size: 10px;

}

#p1 {

font-size: 20px;

}

#p2 {

font-size: 1.5em;

}

</style>

</head>

<body>

父div

<p id="p1">我用px表示文字大小</p>

<p id="p2">我用em表示文字大小。em是相對大小。是指其父元素中的1個"M"的大小，簡單理解爲父元素的font-size就是一個emd單位</p>

</div>

</body>

</html>

ex (x-height，字母 "x" 的高度)
cm (釐米，1釐米=10毫米)
mm (米)
pt (點，1點=1/72英寸)

pc(12點活字，1pc=12點)

CSS中的單位有9種。他們是百分比（%）、英寸（in）、釐米（cm）、毫米（mm）、磅數（pt）、12點活字（pc）、字母高度一半（ex）、字體高度（em）和像素（px）。網頁製做時最經常使用的四個尺寸單位是：px、%、em、pt。但在使用時也需要依據不一樣的狀況進行選擇。

比方字體的大小經常使用px、em和pt，元素的寬度經常使用%、px、em。

第52課 CSS畫圓角

<!DOCTYPE html>

<html>

<head>

<title>study52.html</title>

#test1 {

width:300px;

height:300px;

border:1px solid blue;

border-radius:15px;

}

#test2 {

width:300px;

height:300px;

border:1px solid red;

border-radius:150px;

}

</style>

</head>

<body>

<div id="test1">CSS畫圓角。眼下的主流瀏覽器都已經支持</div>

<div id="test2">CSS畫一個圓</div>

</body>

</html>

第53課相對定位與絕對定位

<!DOCTYPE html>

<html>

<head>

<title>study53.html</title>

#test1 {

width: 300px;

height: 300px;

background-color: green;

}

p {

margin: 0;

padding: 0;

}

#p1 {

width: 100px;

height: 100px;

background-color: gray;

position: relative;

/* top: 20px;

left: 20px; */

right: 20px;

bottom: 20px;

}

#p2 {

width: 100px;

height: 100px;

background-color: orange;

}

#test2 {

width: 300px;

height: 300px;

background-color: pink;

position: relative;

}

#p3 {

width: 100px;

height: 100px;

background-color: yellow;

position: absolute;

right:20px;

bottom: 30px;

z-index: 1000;

}

#p4 {

width: 100px;

height: 100px;

background-color: gray;

position: absolute;

right:30px;

bottom: 40px;

}

</style>

</head>

<body>

<p id="p1">我是p1。相對定位是指元素在其正常的位置，偏移某些像素</p>

<p id="p2">我是p2，相對定位是指元素在其正常的位置，偏移某些像素</p>

</div>

用絕對定位時，父元素要求有position屬性才行，不然將根據父的父，父的父的父……body,<br>

哪一個祖先有position就相對哪一個。不然相對body

<p id="p3">我是p3，絕對定位是指相對於父元素的top,right,bottom,left來定位</p>

</div>

</body>

</html>

第54課 overflow溢出處理

overflow 屬性規定當內容溢出元素框時發生的事情。

visible 默認值。內容不會被修剪，會呈現在元素框以外。

hidden 內容會被修剪。並且其他內容是不可見的。

scroll 內容會被修剪，但是瀏覽器會顯示滾動欄以便查看其他的內容。

auto 假設內容被修剪，則瀏覽器會顯示滾動欄以便查看其他的內容。

inherit 規定應該從父元素繼承overflow 屬性的值。

清楚浮動的方法：1. 使用空div。這僅僅其div

css{clear:both;}。

2.經過:after僞類來清理浮動，淘寶、騰訊使用的清除浮動的代碼：

.allCon {}.allCon:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}

<!DOCTYPE html>

<html>

<head>

<title>study54.html</title>

div {

width: 200px;

height: 200px;

border: 1px solid blue;

overflow: auto;

}

p {

border: 1px solid red;

}

</style>

</head>

<body>

<p>內容很是多，會不會溢出越過山和大海前端是近幾年發展起來的職業，很是多人對前端的認識比較模糊，所以開篇我有必要介紹一番，前端（這裏的前端是大衆口中的前端）偏美工是視覺設計，前端偏用戶是用戶體驗，前端偏目標導向是交互設計，前端偏技術纔是你們口中的前端。和前端有關係的幾樣技術：PS，DW。FL，HTML+CSS+JS，看過很是多人給前端的建議也差點兒相同是學習這幾種軟件和HTML+CSS+JS等等了。只是我卻認爲你們在把前端往一個誤區引導。

爲何呢？聽我慢慢解釋。

先來講說和前端有聯繫的幾個職位：前端project師、視覺設計師、用戶研究project師、交互設計師。我用一個簡單的樣例來分析：咱們都經常在一些社區評論留言，留言的表面過程：打開留言頁面——輸入留言內容——點擊提交button——留言顯示在留言列表上。

我這裏不解釋這個過程的實現原理。

---2012年10月12日改動--- 前端project師：留言框代碼怎麼寫？留言框的顯示、一些JS動態效果的顯示（可能涉及異步請求）。

視覺設計師：什麼樣的留言框最美麗？怎麼佈局？用什麼色彩仍是需要作一些紋理？

用戶研究project師：用戶怎麼留言最舒服？很是多人可能會和用戶體驗師混淆在一塊兒，事實上這兩種人有着本質的差異，用戶研究更側重的是方法論。注重問卷調查訪談等等行爲來了解用戶的潛在行爲習慣，而用戶體驗是一種行爲，更側重的是體驗以後的實際感覺。

交互設計師：留言過程當中的反饋？輸入錯誤後的提示。留言成功後的反饋等等。交互設計可以理解爲人機對話。交互設計側重和用戶交流以後，引導用戶有效操做。比方鼠標放在超連接上字體變顏色。有title提示，用戶點擊超連接，咱們就可以稱此次交互是成功的，所以交互設計的重點在於目標嚮導。

---改動結束---

這些分工十分細微，假設留言本是一個項目的話，需要從幾個不一樣的角度來分析留言框。一個大型的項目比方社交站點、門戶站點、行業站點這些職位都必須明白分工才幹把整個項目作好，但是實際上即便條理清晰在項目開展過程當中還會出現諸多意想不到的問題，什麼問題呢？不在本文討論範疇。回到話題。現在你還以爲你理解意義上的前端是前端嗎？我曾經覺得前端是美工。但是後來我發現很是多前端博客都在研究一個技術JS的各大框架，我更加肯定前端並不是我理解意義上的前端，我更喜歡視覺設計，但是我依然也是一個前端，所曾經端是模糊的，甚至包含了一切。

前端沒什麼很差

假設你認爲前端沒有前（錢）途。那我勸你幹別的行業吧。假設你肯定你喜歡前端，那就聽聽個人一些見解，固然也純屬主觀臆斷，你可以拍磚。逛過一些前端博客，大部分文章都是在分享JS的幾大框架技術，Jquery佔很是多數，那其它框架呢？因此我也有個疑問。前端難道就是JS嗎？最後個人答案：是的，假設你想成爲純粹意義上的前端，JS很是大部分上表明瞭前端。

程序猿眼中的前端（後端程序猿和前端project師的不一樣）

真正意義上學習編程是在大學的時候，那時候個人一個師長。他現在是Javaproject師，他給個人建議是HTML+CSS隨便玩玩就行了，我不太認同他的觀點仍是玩了很是久，我並無停留在HTML上。而是瞭解了不少其它技術，HTML是很是多技術人都不恥的語言，甚至在一些人看來HTML連編程語言都不是，這個我在大學招新時候很是有感觸，他們認爲HTML不值錢又是小兒科的東西，連PHP他們都認爲2個小時就能上手，那HTML他們不用看就懂了，甚至在一些無知的人看來站點開發不算真正意義上的程序，所以也就不是程序猿了。因爲他們的眼中僅僅有C/C++，很是多前人的建議也是學編程從C開始學起，我現在再來看這樣的回答，真可笑，無知的人在騙無知的人罷了。

尤爲再看看那些人在作着二級、三級試卷，我當時就想說哥們兒你醒醒吧，但是我仍是忍住了，因爲他跟我無關。因此不要以程序猿的思惟來看待前端，前端是快樂的。不是挑戰各類技術。前端的出發點也是用戶（體驗等等），程序猿是以電腦爲核心（算法等等）。千萬要記住前端是以用戶爲出發點的。而在很是多公司面試前端project師時，僅僅考察了前端project師的編程技巧。

假設你肯定你想作一個優秀的前端，個人我的建議：首先。瞭解HTTP協議（HTTP

1.1）。玩弄各大瀏覽器於鼓掌之中。你是前端project師不要跟我說你僅僅知道IE核心的瀏覽器。IE系列。Firefox。Chrome，Opera。Safari都應該是你平時常用的瀏覽器，我常用chrome，當中elements，Resources。Network。Script，....這些你瞭解多少？仍是你歷來都不知道？那趕忙去了解吧。

其次。很熟悉HTML+CSS+JS。我把學習技術放到了第二位。因爲你必須首先了解整個網絡，你纔會更快捷和全面的瞭解前端技術。

以前說過很是多技術人都不恥學HTML，那我來解釋爲何要先學HTML？

先和你們一塊兒梳理各種編程語言。大體分爲了六大類：網頁語言、解析型語言、混合型語言、編譯型語言、彙編語言和機器語言，依次愈來愈苦逼，無論從用戶仍是開發人員角度看待。越深刻越不能讓人理解，用戶體驗越差，固然開發人員也是用戶。因此也就能理解爲何會有PHP、Python，Ruby之類的解釋型語言了。

假設你僅僅想學習好前端技術的話。僅僅需要了解前兩層的東西。也就是網頁語言和解析型語言，網頁語言HTML。解析型語言PHP，Python。Ruby至少要學會一種。假設你有不少其它的精力，你可以跳到更高層次，學習混合型語言C#或者Java。對於編譯型語言C和C++假設你想作好前端工做，你可以不用懂得的。

爲何前端project師需要了解這些編程語言呢？

一個WEB項目需要三種人：項目經理、前端project師和後端程序猿，他們之間需要溝通，不懂得怎樣溝通？怎樣說服？懂得能讓項目進展的更順利一些。咱們回到剛纔的樣例——留言本，過程可以參照PHP的CGI（請求和響應等等）。假設你不懂或者仍是很是模糊的話。我以爲你還不是一個合格的前端project師。固然你可以說你更偏向於視覺設計、用戶體驗之類的了。個人這樣的說法並不絕對，甚至假設你以爲你需要鼓舞才幹進步？那很差意思了，我僅僅知道這是殘酷的招聘法則，你可以去看看各公司對招聘前端的要求。

最後HTML5很是重要，就宛如空氣。看似不存在，好似不重要，但是缺乏了空氣。人類就沒法生存。因此HTML是根本。

再次，藝術品的讚揚能力。

PS、切圖等等這些僅僅是工具。工具僅僅要經常用就會的，但是讚揚能力，或者僅僅能說是天生的了，但是也要多培養本身的藝術讚揚能力，或者說讓本身時髦起來。學會讚揚學會鑑別，其它的很少說了。

最後。關注前端們都在作什麼？國外的我不推薦。我認爲國外的天空沒那麼蔚藍。騰訊、新浪、淘寶、網易、百度……很是多公司都有前端體驗中心，他們的前端博客你知道不？他們在幹什麼？這些你瞭解嗎。去了解他們在幹什麼吧，慢慢你就能培養出你的前端嗅覺了。

學會思考，本身去辨別真僞，每個人都有本身的體驗，本篇文章純屬一家之言。主觀臆斷的說法，你可以參考並本身去驗證，這也是前端project師需要學會的東西。

</p>

</div>

</body>

</html>

第55課表單

<!DOCTYPE html>

<html>

<head>

<title>study55.html</title>

</head>

<body>

<div>

在用戶註冊，在線報名等場合時<br>

需要把用戶的信息。填寫並提交，這時要用到表單來收集用戶的信息

</div>

<p>

username：<input type="text" name="username" value="lisi">

</p>

<p>

password：<input type="password" name="password">

</p>

<p>

性別：男<input type="radio" name="gender" value="male" checked="checked">

女<input type="radio" name="gender" value="female">

</p>

<p>

愛好：籃球<input type="checkbox" name="hobby" value="basketball">

足球<input type="checkbox" name="hobby" value="football">

乒乓球<input type="checkbox" name="hobby" value="pingpang">

游泳<input type="checkbox" name="hobby" value="swimming" checked="checked">

</p>

<p>

</select>

</p>

<p>

<textarea rows="" cols="" name="intro">nimanaoiabkjgslfdghfdlskjghsld</textarea>

</p>

<p>

上傳頭像：<input type="file" name="pic">

</p>

<p>

隱藏域：<input type="hidden" name="IP" value="192.168.1.100">

</p>

<p>

</p>

</form>

</body>

</html>

第56課框架集

Element (frameset) is obsolete. Its use isdiscouraged in HTML5 documents.

第57課結課做業

<!DOCTYPE html>

<html>

<head>

<title>study57.html</title>

</head>

<body>

<pre>

做業提交：論壇

有疑問：論壇

結課實習做業--作一個仿照京東商城主頁。

作出首頁，欄目頁，商品頁

</pre>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML, CSS學習筆記（完整版）

第一章 div佈局

前幾課內容

第二章 盒模型

第12課 首頁佈局實戰之margin設置

第13課 盒模型之border設置

第14課 用css控制border畫三角形

第15課 padding具體解釋

第16課 padding與背景

第17課 padding美化首頁

第18課 盒子模型的總結

第19課 利用margin實現水平居中

第20課 margin重疊現象

第21課 inline內聯（行內元素）

第22課 內聯與塊狀的轉化

第三章 CSS

第23課 CSS控制段落文本

第24課 文字控制

第25課 字體控制精講

第26課 背景圖片

第27課 大圖片背景

第28課 CSS選擇器

第29課 CSS優先級

第30課 CSS引入方式

第31課 CSS初始化

第四章 HTML語義標籤

第32課HTML學習思惟導圖

第33課 h標籤與p標籤

第34課 img標籤

第35課 圖片是內聯仍是塊狀

第36課 有序列表和無序列表

第37課 整齊的表格

第38課 超連接

第39課 錨點

第40課 css僞類

第41課 字符實體

第五章 公司網頁開發實戰

第42課 公司站點開發之首頁佈局

第43課 首頁實戰導航製做

第44課 首頁實戰之main區開發

第45課 首頁實戰之main區(2)

第46課 首頁實戰之footer區域開發

第47課 首頁實戰之色彩微調

第48課 利用行高實現文字居中

第49課 IE瀏覽器兼容

第六章 附錄

第50課 色彩的表示

第51課 尺寸的表示

第52課 CSS畫圓角

第53課 相對定位與絕對定位

第54課 overflow溢出處理

第55課 表單

第56課 框架集

第57課 結課做業

第二章盒模型

第12課首頁佈局實戰之margin設置

第13課盒模型之border設置

第14課用css控制border畫三角形

第18課盒子模型的總結

第19課利用margin實現水平居中

第22課內聯與塊狀的轉化

第24課文字控制

第25課字體控制精講

第26課背景圖片

第27課大圖片背景

第35課圖片是內聯仍是塊狀

第36課有序列表和無序列表

第37課整齊的表格

第38課超連接

第39課錨點

第41課字符實體

第五章公司網頁開發實戰

第42課公司站點開發之首頁佈局

第43課首頁實戰導航製做

第44課首頁實戰之main區開發

第45課首頁實戰之main區(2)

第46課首頁實戰之footer區域開發

第47課首頁實戰之色彩微調

第48課利用行高實現文字居中

第六章附錄

第50課色彩的表示

第51課尺寸的表示

第53課相對定位與絕對定位

第55課表單

第56課框架集

第57課結課做業