亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

CSS 基礎(chǔ)教程

CSS 盒子模型

CSS3基礎(chǔ)教程

CSS 參考手冊

CSS @規(guī)則(RULES)

css Layout(網(wǎng)頁布局)

CSS布局易于設(shè)計。我們可以使用CSS布局來設(shè)計我們的網(wǎng)頁，例如主頁，與我們聯(lián)系，關(guān)于我們等。

有三種設(shè)計網(wǎng)頁布局的方法：

  1. HTML Div+CSS布局：現(xiàn)在已廣泛使用。

  2. HTML表格：速度較慢，較不受歡迎。

  3. HTML框架集：現(xiàn)已棄用。

CSS布局可以包含頁眉，頁腳，左窗格，右窗格和正文部分。讓我們看一個簡單的CSS布局示例。

CSS布局示例

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.header{margin:-8px -8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}  
.container{width:100%}  
.left{width:15%;float:left;}  
.body{width:65%;float:left;background-color:pink;padding:5px;}  
.right{width:15%;float:left;}  
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}  
</style>  
</head>  
<body>  
<div class="header"><h2>基礎(chǔ)教程 (cainiaoplus.com)</h2></div>  
  
<div class="container">  
<div class="left">  
<p>左邊欄</p>  
</div>  
<div class="body">  
<h1>正文</h1>  
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>  
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>  
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>  
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>  
<p>頁面內(nèi)容在這里</p>  
</div>  
<div class="right">  
<p>右邊欄</p>  
</div>  
</div>  
  
<div class="footer">  
<p>Footer</p>  
</div> 
</body>  
</html>
測試看看?/?

輸出效果:

基礎(chǔ)教程 (cainiaoplus.com)

左邊欄

正文

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

頁面內(nèi)容在這里

右邊欄

底部