css+div頁面佈局

時間 2019-11-13

標籤 css+div css div 頁面佈局欄目 CSS 简体版

原文原文鏈接

div標籤是html頁面中用於分組的塊元素，是專門用於元素佈局的標籤。html

　　標籤的級別：佈局

　　　　一、行級標籤：可設置大小，但一行只能容下一個行級標籤（默認寬度==頁面寬度，默認高度==填充高度）spa

　　　　二、塊級標籤：可設置大小，多個塊級標籤佔據一行（默認寬度==填充寬度，默認高度==填充高度）code

CSS中與佈局有關的經常使用屬性：htm

CSS屬性	含義	可用值	含義
position	元素位置	absolute	相對屏幕位置
		relative	相對父元素的位置
		static	固定位置
direction	元素內容靠哪側	ltr	左
		rtl	右
float	元素自己靠哪側	left	左
		right	右
height	高度	pt\|px\|%\|em	像素、百分比
width	寬度	pt\|px\|%\|em	像素、百分比
margin	邊框外部填充	pt\|px\|%\|em	像素、百分比
padding	邊框內部填充	pt\|px\|%\|em	像素、百分比
border	邊框	pt\|px\|%\|em	像素、百分比

一、咱們先一段代碼blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div.container{background-color: gray;}
        div.leftframe{background-color: #00ff99;}
        div.rightframe{background-color: #88bb99;}
    </style>
</head>
<body>
    <div class="container">
        <div class="leftframe">
            <ul>
                <li>班級列表</li>
                <li>學生查詢</li>
                <li>成績統計</li>
                <li>學校信息</li>
            </ul>
        </div>
        <div class="rightframe">頁面主體內容</div>
    </div>
</body>
</html>