免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網站div+css系統做法

2021-06-04    分類： 網站建設

如果您僅僅知識想做一個簡單的css樣式，是這樣子的
一個簡單的CSS網頁
一個簡單網頁


完整的div+css代碼制作方式

一、 善用css縮寫規則
/*注意上、右、下、左的書寫順序*/
1. 關于邊距（4邊）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四邊都相同）

2. 簡化所有：
*/ body{margin:0}------------表示網頁內所有元素的margin為0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0

3. 縮寫（border）特定樣式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;

4. 關于文字的縮寫規則：
Font-style:italic; 斜體形式
Font-variant:small-caps/normal; 變體樣式：小型大寫字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
縮寫成：
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意：Font-size和Line-height用斜杠組合在一起不能分開寫。

5. 關于背景圖片的：
Background:#FFF url(log.gif) no-repeat fixed top left;

6. 關于列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
縮寫成：
List-style:none inside url(filename.gif);

二、 運用4種方法來引入CSS樣式
1.link
rel 關系
type 數據類型,有多種
href 路徑
部分瀏覽器支持候選樣式,關鍵字:alternate:
2.內部樣式塊
3.@import
@import url{a.css}
注意:此指令必須放在中的設定

--外部引用css文件

（2）優先級不是按訪問順序來設定的，而是又css中的聲明順序來設的。

如上例中

此處顯示為黃色

也顯示為黃色，因為在css定義中.yellow在.blue的后面。

八、 書寫正確的鏈接樣式
當用css定義鏈接的各種狀態時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。
:link --------鏈接的顏色
:visited -----鼠標點擊后的顏色
:hover -------鼠標放上去未點的顏色（懸停）
:active-------鼠標點擊瞬間的顏色

九、 :hover的靈活運用
IE6不支持除a標簽以外的:hover屬性，我們了解:hover屬性是鼠標懸停效果。在IE7和FF中，對幾乎任意元素都可以設置:hover屬性效果。這對我們做不同的訪問效果很好。
如：
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
----------------此效果針對IE7和FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
-----------------此效果針對IE6

十、 定義A標簽要注意的小問題
當我們定義a{color:red;}時，它代表了A的四種狀態的樣式，如果此時要定義一個鼠標放上的狀態只要定義a:hover就可以了，其它三種狀態就是A中所定義的樣式。
只定義了一個a:link時，一定要記得把其它三種狀態定義出來！

十一、 禁止內容換行與強制內容換行
在表格或層中我們可能希望內容不換行或強制換行，我們可以通過一些css屬性來達到這些要求。
禁止換行：white-space:nowrap
強制換行：word-break: break-all; white-space: normal;

十二、 區別relative和absolute
Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
Relative---CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。

十三、 區別塊級元素block和內聯元素inline
塊級---可定義寬高，另起獨占一行 （如：div ul）
內聯---不可定義寬高，如文本元素 （如a span）

十四、 區別display和visibility
display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內容，但其使用的位置空間仍然被保留。而display:none則相當把元素從頁面中去除，其占用位置也將被刪除。

2. 首字下沉：
P:first-letter{padding:10px,fontsize:32pt;float:left}
3. 拼音漢字：
布魯斯狼bu lu si lang

二十九、 Min-height多瀏覽器兼容問題
Div{
min-height:450px;
height:auto!important;
height:450px;
overflow:visible;????
}
三十、 CSS布局口訣 - CSS BUG順口溜
· IE邊框若顯若無，須注意，定是高度設置已忘記；
· 浮動產生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；
· 三像素文本慢移不必慌，高度設置幫你忙；
· 兼容各個瀏覽須注意，默認設置行高可能是殺手；
· 獨立清除浮動須銘記，行高設無，高設零，設計效果兼瀏覽；
· 學布局須思路，路隨布局原理自然直，輕松駕馭html，流水布局少hack，代碼清爽，兼容好，友好引擎喜歡迎。
· 所有標簽皆有源，只是默認各不同，span是無極，無極生兩儀內聯和塊級，img較特殊，但也遵法理，其他只是改造各不同，一個*號全歸原，層疊樣式理須多練習，萬物皆規律。
· 圖片鏈接排版須小心，圖片鏈接文字鏈接若對齊，padding和vertical-align:middle要設定，雖差微細倒無妨。
· IE浮動雙邊距，請用display：inline拘。
· 列表橫向排版，列表代碼須緊靠，空隙自消須銘記。

標題名稱：網站div+css系統做法
URL網址：http://m.newbst.com/news/116306.html

成都網站建設公司_創新互聯，為您提供做網站、網站收錄、全網營銷推廣、網頁設計公司、云服務器、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

微信小程序開發