1、這個(gè)是!DOCTYPE定義的問(wèn)題，其類(lèi)型也比較多！
在網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)過(guò)程中，需要針對(duì)客戶(hù)的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)還需要根據(jù)客戶(hù)的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶(hù)權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。
2、具體你可以參考：
3、重點(diǎn)了解下，你剛才寫(xiě)的：
----
XHTML 1.0 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來(lái)編寫(xiě)標(biāo)記。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
"
-------
希望可以幫助到你！
通過(guò)vertical-align:middle實(shí)現(xiàn)CSS垂直居中是最常使用的方法，但是有一點(diǎn)需要格外注意，vertical生效的前提是元素的display：inline-block。因?yàn)閕nline-block可以兼具行內(nèi)元素和塊級(jí)元素的特點(diǎn)，能夠使得元素有寬度和高度。從而在盒子內(nèi)能夠?qū)崿F(xiàn)居中
通過(guò)display:flex實(shí)現(xiàn)CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;
這個(gè)跟CSS水平居中的原理是一樣的，只是在flex-direction上有所差別，一個(gè)是row(默認(rèn)值)，另外一個(gè)是column。
給父元素display:table，子元素display：table-cell的方式實(shí)現(xiàn)CSS垂直居中，表格也是常用的居中模式，缺點(diǎn)就是會(huì)對(duì)下面的元素某些樣式造成一定的影響，不推薦經(jīng)常使用這個(gè)方式。
先給父元素position:relative，再給子元素position:absolute，通過(guò)translateY即可定位到垂直居中的位置。這個(gè)是縱軸居中，由CSS3的新特性translate，可以改變?cè)卦诳v軸上的偏移。
設(shè)置子元素的line-height值等于父元素的height，這種方法適用于子元素為單行文本的情況。同樣也是縱軸居中。
括展資料：
層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。?CSS百度百科CSS參考手冊(cè)
其實(shí)可以寫(xiě)個(gè)div，給div的下邊框加上線(xiàn)條，控制div的長(zhǎng)度就可以了
.token?{
width:?300px;
border-bottom:?1px?solid?black;
}
div?class="token"外婆家私房菜:賬戶(hù)管理/div
定義和用法
display 屬性規(guī)定元素應(yīng)該生成的框的類(lèi)型。
說(shuō)明
這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類(lèi)型。對(duì)于 HTML 等文檔類(lèi)型，如果使用 display 不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于 XML，由于 XML 沒(méi)有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對(duì)必要的。
注釋?zhuān)篊SS2 中有值 compact 和 marker，不過(guò)由于缺乏廣泛的支持，已經(jīng)從 CSS2.1 中去除了。
默認(rèn)值： inline
繼承性： no
版本： CSS1
JavaScript 語(yǔ)法： object.style.display="inline"
實(shí)例
使段落生出行內(nèi)框：
p.inline
{
display:inline;
}
TIY
瀏覽器支持
所有主流瀏覽器都支持 display 屬性。
注釋?zhuān)喝魏伟姹镜?Internet Explorer （包括 IE8）都不支持 "inherit"、"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、以及 "table-row-group" 屬性值。
可能的值
值 描述
none 此元素不會(huì)被顯示。
block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
inline-block 行內(nèi)塊元素。（CSS2.1 新增的值）
list-item 此元素會(huì)作為列表顯示。
run-in 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
compact CSS 中有值 compact，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
marker CSS 中有值 marker，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
table 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類(lèi)似 table），表格前后帶有換行符。
inline-table 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類(lèi)似 table），表格前后沒(méi)有換行符。
table-row-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 tbody）。
table-header-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 thead）。
table-footer-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 tfoot）。
table-row 此元素會(huì)作為一個(gè)表格行顯示（類(lèi)似 tr）。
table-column-group 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類(lèi)似 colgroup）。
table-column 此元素會(huì)作為一個(gè)單元格列顯示（類(lèi)似 col）
table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類(lèi)似 td 和 th）
table-caption 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類(lèi)似 caption）
基本
常識(shí)與實(shí)踐
鏈接方式
基本
最基本的方式就是直接在html文件中指定元素樣式，這種方式不推薦，因?yàn)閷⒈憩F(xiàn)層和結(jié)構(gòu)層混起來(lái)了
"style="background-image:url({{user.avatar}})"
內(nèi)部鏈接
要為html直接增加css樣式，需要在元素中增加開(kāi)始和結(jié)束style標(biāo)記，css規(guī)則放在里面
style
p {
color: gray;
}
/style
css文件外置
另一種方式將css文件外置，如style.css,作為樣式表(stylesheets),然后從html眾創(chuàng)建一個(gè)到這個(gè)文件的外部鏈接,用元素,用外部樣式表的好處是要修改整個(gè)網(wǎng)站的樣式，只要進(jìn)入這個(gè)樣式表，對(duì)css進(jìn)行幾處修改即可。如:
link type="text/css" rel="stylesheet" href="lounge.css"
多樣式表
使用多個(gè)樣式表,順序很重要，一個(gè)樣式表會(huì)覆蓋在它上面鏈接的樣式表中的樣式,有時(shí)會(huì)有一個(gè)樣式表作為頁(yè)面的基礎(chǔ)樣式，要修改樣式，鏈接這個(gè)樣式表，然后在下面提供自己的樣式表，指定要修改的樣式,如下所示:
link rel="stylesheet" href="corperate.css"http://總公司樣式
link rel="stylesheet" href="beverage-division.css"http://部門(mén)對(duì)總公司的樣式做了一些補(bǔ)充，甚至可以覆蓋公司的樣式
link rel="stylesheet" href="lounge-seattle.css"http://西雅圖休閑室對(duì)樣式表做了自己的調(diào)整
簡(jiǎn)寫(xiě)
css屬性太多，能不能不費(fèi)吹灰之力就指定這些屬性呢？可以把同一屬性的值結(jié)合起來(lái)寫(xiě)成一句,即簡(jiǎn)寫(xiě)。
簡(jiǎn)寫(xiě)格式
padding
padding: 0px 40px 30px 20px;,順序是上右下左,順時(shí)針有木有,如果都相同可以用padding: 20px;
padding-top: 0px;
padding-right: 40px;
padding-bottom:30px;
padding-left: 20px;
margin
上面的padding格式同樣對(duì)margin也適用,還有另一種方法,如果上下一樣，左右一致,可以這樣寫(xiě):margin: 0px 20px,前面指定上下，后面指定左右。
border
邊框?qū)傩院?jiǎn)寫(xiě) border: thin solid #007e73;,可以用你喜歡的任何順序。
background
背景簡(jiǎn)寫(xiě) background: white url(images/cocktail.gif) repeat-x;，同樣順序隨便
字體
字體簡(jiǎn)寫(xiě)的格式稍微復(fù)雜一些:
font : font-style font-variant font-weight font-size/line-height font-family
選擇
子孫選擇器
父元素和子孫元素名之間有一個(gè)空格,子孫選擇器會(huì)選擇所有子孫，包括這個(gè)元素中嵌套的所有,不管嵌套多深,例如
color: black;
}
直接孩子
如果要選擇直接的孩子,用
color: black;
}
復(fù)雜選擇
更復(fù)雜的選擇,方法還是一樣
color: blue;
}
規(guī)則添加
類(lèi)
當(dāng)我們用選擇器選擇元素使用一個(gè)規(guī)則時(shí),會(huì)對(duì)所有該元素應(yīng)用這個(gè)樣式，所以如何單獨(dú)地選擇這些元素呢?這里就需要類(lèi)class,class可以定義一類(lèi)元素，對(duì)屬于該類(lèi)的所有元素應(yīng)用樣式.要將一個(gè)元素加入一個(gè)類(lèi)，只需要增加屬性”class”,并提供類(lèi)名,如”greentea”:
p class="greentea"
...
/p
類(lèi)元素選擇器
先選擇這個(gè)類(lèi)中的元素,再用”.”指定一個(gè)類(lèi),最后是類(lèi)名,如:
p.greentea {
color: green;
}
添加類(lèi)元素
如果想對(duì)所有blockquote也做同樣的處理，可以:
blockquote.greentea,p.greentea {
color: green;
}
blockquote class = "greentea"
類(lèi)選擇器
如果想把h1,h2,h3,p和blockquote都增加到greentea呢？要對(duì)類(lèi)中的所有元素都用同一樣式可以用:
.greentea{
color: green;
}
/ 省略所有元素名,只有一個(gè)點(diǎn),則會(huì)應(yīng)用到所有成員 /
多類(lèi)元素
元素可以有多個(gè)類(lèi),例如:
p class="greentea raspberry blueberry"
特定元素選擇器
如果多個(gè)選擇器都選擇了一個(gè)元素呢？例如上面的3個(gè)類(lèi)都與p元素匹配，并且都定義了color屬性，那么那個(gè)會(huì)勝出?
id
id的作用
id屬性用來(lái)唯一地命名元素,通常你想對(duì)多個(gè)元素重用某些樣式，才能真正發(fā)揮類(lèi)的作用。但是如果只有一個(gè)元素需要樣式，或者頁(yè)面上只有一個(gè)元素，那就應(yīng)該使用id,每個(gè)元素只能有一個(gè)id，頁(yè)面中只能有一個(gè)元素?fù)碛刑囟╥d,一個(gè)元素有一個(gè)id，同時(shí)可以屬于一個(gè)或多個(gè)類(lèi),id中不允許出現(xiàn)空格或其他特殊字符,如
p id="footer".../p
選擇元素
用id選擇一個(gè)元素,需要在id前面使用一個(gè)#字符(類(lèi)是[.]),id選擇器只與頁(yè)面中的一個(gè)元素匹配
color: red;
}//選擇id為footer的任意元素
p#footer{
color: red;
}//選擇id為footer的p元素
實(shí)踐建議
繼承
樣式繼承
層疊
媒體查詢(xún)
link媒體查詢(xún)
你可能想針對(duì)將要顯示頁(yè)面的設(shè)備調(diào)整頁(yè)面的樣式，可以用media屬性,在link元素中增加這個(gè)屬性.如
link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)"
link rel="stylesheet" href="lounge-print.css" media="print"
css媒體查詢(xún)
可以直接在css中增加媒體查詢(xún),使用@media規(guī)則,把對(duì)所有媒體類(lèi)型都通用的規(guī)則放在@media規(guī)則下面,例如
@media screen and (min-device-width: 481px){//當(dāng)設(shè)備屏幕寬度大于480px時(shí)使用
margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//當(dāng)設(shè)備屏幕小于等于480px時(shí)使用
margin-right: 30px;
}
}
@media print { // 如果要打印頁(yè)面，使用該規(guī)則
body {
font-family: Times, "Times New Roman", serif;
}
}
實(shí)踐建議
屬性
盒模型
盒模型是css看待元素的一種方式，css將每個(gè)元素看作由一個(gè)盒子表示,每個(gè)盒子由一個(gè)內(nèi)容區(qū)以及可選的內(nèi)邊距，邊框和外邊距組成。由內(nèi)而外分別是:
border 邊框
color 顏色
文本元素的字體顏色
body{
background-color: rgb(80%, 40% , 0%)//橙色
}
還可以指定0-255之間的一個(gè)數(shù)值,例如:
body{
background-color: rgb(204, 102, 0)//和上面顏色一致,255*80% = 204...
}
font-family 字體
大多數(shù)計(jì)算機(jī)上通常只安裝了部分字體,所以選擇字體時(shí)要當(dāng)心,通常指定的font-family包含一個(gè)候選字體列表,他們都來(lái)自同一個(gè)字體系列,候選字體用逗號(hào)分隔,大小寫(xiě)字母必須一致,最后總是放一個(gè)通用的字體系列名,如果一個(gè)字體名中包含多個(gè)單詞,比如Courier New，如何指定？用引號(hào),”Courier New”,如:
body{
font-family: Verdana, Geneva, Arial, sans-serif; 一一首選字體呈降序
}
字體系列
每個(gè)font-family包含一組有共同特征的字體。共有5個(gè)字體系列:
body { font-size : small; }
h1 { font-size : 150%; }
h2 { font-size : 120%; }
注意老版IE不支持用像素指定的文本縮放
瀏覽器默認(rèn)字體大小
其他屬性
left 指定一個(gè)元素的左邊所在位置
top 控制一個(gè)元素頂部的位置
background-image 在元素后面放置一個(gè)圖像,如
background-image: url(images/background.gif);
//用url括起來(lái),注意沒(méi)有引號(hào)
background-repeat 背景圖像是否重復(fù)
line-height: 1;//代表elixirs中的所有元素的行間距為其自己字體大小的1倍
}
width: 200px;
float: right;
}
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: right;
}
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
}
那么頁(yè)面的寬度將被限制為800px，無(wú)論瀏覽器寬度如何變化都不會(huì)移動(dòng),但這會(huì)導(dǎo)致瀏覽器很寬時(shí)，右邊有很多空白空間
凝膠布局 Jello
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}
絕對(duì)定位
position: absolute;
top: 100px;
right: 200px;
width: 280px;
}
display: table;
border-spacing: 10px;//于是不再需要div中的外邊距
}
display: table-row;
}
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
/ margin: 0px 10px 10px 10px; /
vertical-align: top;//確保表格兩個(gè)單元格中的所有內(nèi)容相對(duì)于單元格上邊對(duì)齊，默認(rèn)為中間對(duì)齊,可以設(shè)置為top,middle,bottom
}
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
/ margin: 0px 10px 10px 10px; /
vertical-align: top;
}
CSS中顯示和隱藏有多種方法，比較常見(jiàn)的是有display:none|block;visibility: hidden|visible;他們的區(qū)別在于，對(duì)文檔流影響的區(qū)別。一般大家顯示隱藏元素，比較傾向于用display。
你如果想隱藏表格，可以用table{display:none;}來(lái)操作。想顯示的話(huà)把display:block即可。
重慶分公司
重慶分公司
