CSS自學筆記（8）:CSS拓展（一）

時間 2019-12-10

標籤 css 自學筆記拓展欄目 CSS 简体版

原文原文鏈接

CSS元素對齊

可使用margin屬性類進行元素的水平對齊css

水平對齊塊元素時，能夠將塊元素的margin屬性定義爲"auto"，這裏須要注意的是，應該要聲明!DOCTYPE，不然在IE8以及如下版本的瀏覽器中是無效的。html

div{

width:70%;
background-color:#F90;
}margin-left:auto; margin-right:auto;

這裏是將div元素的左右邊距都定義成了auto，平均分配可用外邊距，結果就是將div元素居中顯示。瀏覽器

咱們也能夠爲左右外邊距定義不一樣的值(長度值、百分比等)，能夠在水平方向調整元素的位置。ssh

使用position屬性來進行左和右的對齊佈局

這裏使用絕對定位來對齊元素網站

div{

right:0px;
width:300px;
background-color:#F90;
}position:absolute;

咱們也可使用float屬性進行左和右的對齊spa

.right
{

width:300px;
background-color:#F90;
}float:right;

注：當進行元素對齊時，可能會由於瀏覽器的關係致使顯示的BUG，在IE8以及如下版本的瀏覽器中使用元素對齊時，應該要聲明!DOCTYPE設計

CSS元素尺寸

咱們能夠經過定義CSS的尺寸屬性來控制元素的高寬。同時也能夠控制元素之間的距離3d

CSS 尺寸屬性

屬性	描述
height	設置元素的高度。
line-height	設置行高。
max-height	設置元素的最大高度。
max-width	設置元素的最大寬度。
min-height	設置元素的最小高度。
min-width	設置元素的最小寬度。
width	設置元素的寬度。

img.normal 
{
height: auto
}

img.big 
{
height: 160px
}

img.small 
{
height: 30px
}

這裏咱們也能夠用長度值/百分比來定義尺寸屬性。指針

同時也能夠用尺寸屬性空值行間距

p.small {line-height: 80%}
p.big {line-height: 200%}

CSS元素分類

咱們能夠經過CSS分類屬性控制元素的顯示方式以及顯示位置。

CSS 分類屬性 (Classification)

屬性	描述
clear	設置一個元素的側面是否容許其餘的浮動元素。
cursor	規定當指向某元素之上時顯示的指針類型。
display	設置是否及如何顯示元素。
float	定義元素在哪一個方向浮動。
position	把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
visibility	設置元素是否可見或不可見。

利用CSS的分類屬性，咱們能夠定義不少元素的類型，顯示方式，顯示位置等。

咱們能夠指定光標的類型

在這裏我們可以改變光標的狀態！！

例如，實現一個簡單的頁面佈局

 1 <html>
 2 <head>
 3 <meta charset="utf-8" />
 4 <style type="text/css">
 5 div.container {
 6     width:100%;
 7     margin:0px;
 8     border:1px solid;
 9     line-height:150%;
10 }
11 div.top, div.bottom {
12     padding:0.5em;
13     color:white;
14     background-color:gray;
15     clear:left;
16 }
17 h1.top {
18     padding:0;
19     margin:0;
20 }
21 div.left {
22     float:left;
23     width:160px;
24     margin:0;
25     padding:1em;
26 }
27 div.content {
28     margin-left:190px;
29     border-left:1px solid gray;
30     padding:1em;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="container">
36     <div class="top">
37         <h1 class="top">頁眉部分</h1>
38     </div>
39     <div class="left">
40         <p>正文左側部分，能夠定義菜單</p>
41     </div>
42     <div class="content">
43         <h2>正文部分</h2>
44         <p>正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分</p>
45         <p>正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分</p>
46     </div>
47     <div class="bottom">頁腳部分</div>
48 </div>
49 </body>
50 </html>

CSS 導航條

一個網站額導航欄是很是重要的，一個簡單易用的導航欄那就更重要了。經過CSS，能夠將你的導航欄設計的更漂亮。

網站的導航欄就是能跳轉到其它地方的列表，因此它是以html爲基礎的列表，能夠經過<ul>和<li>元素來實現多樣化的導航欄。

ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link, a:visited {
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#085;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover, a:active {
	background-color:#DDD;
}

定義以上的CSS屬性，能夠實現一個很簡單的垂直的導航欄(其實就是帶有超連接的列表)。

一樣也能夠實現一個水平方向的導航欄