HTML從基礎(chǔ)到精通-css布局

天小編為大家介紹五種css樣式布局以及內(nèi)服源代碼作為介紹，采用的方式是行內(nèi)級(jí)樣式（就是將css樣式代碼與html寫(xiě)在一起）

已知布局元素的高度，寫(xiě)出三欄布局，要求左欄、右欄寬度各為300px，中間自適應(yīng)。

一、浮動(dòng)布局

<!DOCTYPE html>

<html>

<head>

.wrap1 div{

min-height: 200px;

}

.wrap1 .left{

float: left;

width: 300px;

background: red;

}

.wrap1 .right{

float: right;

width: 300px;

background: blue;

}

.wrap1 .center{

background: pink;

}

</style>

</head>

<body>

浮動(dòng)布局

</div>

</body>

</html>

浮動(dòng)布局的兼容性比較好，但是浮動(dòng)帶來(lái)的影響比較多，頁(yè)面寬度不夠的時(shí)候會(huì)影響布局。

二、絕對(duì)定位布局

<!DOCTYPE html>

<html>

<head>

.wrap2 div{

position: absolute;

min-height: 200px;

}

.wrap2 .left{

left: 0;

width: 300px;

background: red;

}

.wrap2 .right{

right: 0;

width: 300px;

background: blue;

}

.wrap2 .center{

left: 300px;

right: 300px;

background: pink;

}

</style>

</head>

<body>

絕對(duì)定位布局

</div>

</div>

</body>

</html>

絕對(duì)定位布局快捷，但是有效性比較差，因?yàn)槊撾x了文檔流。

三、flex布局

<!DOCTYPE html>

<html>

<head>

<title>flex布局</title>

.wrap3{

display: flex;

min-height: 200px;

}

.wrap3 .left{

flex-basis: 300px;

background: red;

}

.wrap3 .right{

flex-basis: 300px;

background: blue;

}

.wrap3 .center{

flex: 1;

background: pink;

}

</style>

</head>

<body>

flex布局

</div>

</div>

</body>

</html>

自適應(yīng)好，高度能夠自動(dòng)撐開(kāi)

四、table-cell表格布局

<!DOCTYPE html>

<html>

<head>

<title>table-cell表格布局</title>

.wrap4{

display: table;

width: 100%;

height: 200px;

}

.wrap4>div{

display: table-cell;

}

.wrap4 .left{

width: 300px;

background: red;

}

.wrap4 .right{

width: 300px;

background: blue;

}

.wrap4 .center{

background: pink;

}

</style>

</head>

<body>

表格布局

</div>

</div>

</body>

</html>

兼容性好，但是有時(shí)候不能固定高度，因?yàn)闀?huì)被內(nèi)容撐高。

五、網(wǎng)格布局

<!DOCTYPE html>

<html>

<head>

.wrap5{

display: grid;

width: 100%;

grid-template-rows: 200px;

grid-template-columns: 300px auto 300px;

}

.wrap5 .left{

background: red;

}

.wrap5 .right{

background: blue;

}

.wrap5 .center{

background: pink;

}

</style>

</head>

<body>

網(wǎng)格布局

</div>

</div>

</body>

</html>

希望大家可以一直關(guān)注我，支持我！感謝！！！

航欄效果圖：

導(dǎo)航欄

導(dǎo)航欄功能模塊圖

圖書(shū)管理功能模塊圖

圖書(shū)管理功能包4括大模塊，16個(gè)子模塊。

導(dǎo)航欄布局結(jié)構(gòu)分析

1. 制作方式：列表<ul><li>制作。

四大模塊：用一個(gè)<ul><li></li></ul>列表制作出來(lái)，每個(gè)模塊下面的四個(gè)子模塊用同樣的<ul><li></li></ul>列表嵌套出來(lái)。

具體格式如下：

<ul>
 <li>模塊1
 <ul>
 <li>模塊1.1</li>
 <li>模塊1.2</li>
 <li>模塊1.3</li>
 <li>模塊1.4</li>
 </ul>
 </li>
 <li>模塊2
 <ul>
 <li>模塊2.1</li>
 <li>模塊2.2</li>
 <li>模塊2.3</li>
 <li>模塊2.4</li>
 </ul>
 </li>
..........
</ul>

2.導(dǎo)航標(biāo)簽<a>：都是一個(gè)超鏈接，通過(guò)點(diǎn)擊鏈接到相應(yīng)的導(dǎo)航頁(yè)面。

所以在每個(gè)列表選項(xiàng)中，都應(yīng)該加入超鏈接<a>標(biāo)簽。

<ul>
<li><a href="javascript：;" >用戶管理</a></li>
...
</ul>

3.導(dǎo)航框的修飾：CSS樣式表

3.1 樣式表接入方式：

行內(nèi)樣式
內(nèi)嵌樣式
鏈接式
導(dǎo)入式

一般用鏈接式<link >，運(yùn)用高內(nèi)聚，低耦合的思想。

<link rel="stylesheet" type="text/css" href="CSS/demo.css">

3.2標(biāo)簽選擇器

行內(nèi)選擇器>id選擇器>class選擇器>標(biāo)簽選擇器

常用到的為 id選擇器、class選擇器、標(biāo)簽選擇器。

例如：

<ul>
 <li class="litems"><a href="javascript：;">用戶管理</a>
 <ul class="uitems">
 <li><a href="javascript：;">添加用戶</a></li>
 </ul>
 </li>
</ul>

具體用法見(jiàn)：HTML/CSS中可直接輸數(shù)據(jù)的表格

4.導(dǎo)航欄的框框

模塊標(biāo)簽特點(diǎn)：

背景色background-color ：暗紅色；
形狀：長(zhǎng)方塊block 、寬width、高h(yuǎn)eight,左邊有突出小方塊樣式，分析為內(nèi)邊距padding。
內(nèi)容：字體font-family、字體顏色color、字體大小font-size, 垂直居中l(wèi)ine-height=height
邊框：border：solid 1px #ff0；

litems類標(biāo)簽 中 <a>標(biāo)簽的樣式如下：

 .litems>a
{
	background-color:#990020; /*背景色*/
	height:30px; 
	display:block; /*塊顯示*/
	line-height:30px; /*垂直居中*/
	border-left: solid 12px #711515; /*邊框*/
	padding-left:5px; /*左邊距*/
}

5.鼠標(biāo)懸浮變化--- a:hover 屬性

鼠標(biāo)未懸浮狀態(tài)

鼠標(biāo)懸浮狀態(tài)

特點(diǎn)：鼠標(biāo)懸浮時(shí)，字體變?yōu)辄S色。

a:hover
{
	color:#FF0;
}

制作一個(gè)簡(jiǎn)單的導(dǎo)航欄，常用的就是列表格式。通過(guò)列表的嵌套和樣式的修改，即可建立一個(gè)簡(jiǎn)約得體的導(dǎo)航列表。

以下附帶部分樣式源碼：

HTML列表內(nèi)容

CSS樣式表源碼：

下是一些常用的HTML網(wǎng)頁(yè)源代碼示例，這些示例可用作HTML文檔的基礎(chǔ)：

1、創(chuàng)建一個(gè)簡(jiǎn)單的HTML文檔結(jié)構(gòu)：

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello,World!</h1>

<p>This is a simple HTML webpage.</p>

</body>

</html>

2、插入圖片：

3、創(chuàng)建超鏈接：

<a href="https://www.example.com">Visit Example.com</a>

4、創(chuàng)建無(wú)序列表：

<ul>

</ul>

5、創(chuàng)建有序列表：

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

6、創(chuàng)建表格：

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

7、插入段落：

<p>This is a paragraph of text.</p>

8、插入換行符：

9、創(chuàng)建一個(gè)文本輸入框：

10、插入按鈕：

<button type="button">Click me</button>

這些示例代碼只是HTML的基礎(chǔ)，HTML具有更豐富的功能和標(biāo)記選項(xiàng)，可以根據(jù)需要進(jìn)行擴(kuò)展和定制。請(qǐng)根據(jù)您的具體需求，使用這些示例作為起點(diǎn)，構(gòu)建您自己的網(wǎng)頁(yè)。

【名揚(yáng)銀河企業(yè)網(wǎng)站系統(tǒng)】

【免費(fèi)】提供企業(yè)【網(wǎng)站源碼】，簡(jiǎn)單易用，無(wú)須擁有代碼基礎(chǔ)。

歡迎留言或私信我們咨詢。

以上內(nèi)容由【名揚(yáng)銀河】企業(yè)網(wǎng)站系統(tǒng)原創(chuàng)發(fā)布，轉(zhuǎn)載請(qǐng)注明出處。

在線咨詢

上一篇：技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計(jì)
下一篇：WEB頁(yè)面頁(yè)面播放實(shí)時(shí)視頻流

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML從基礎(chǔ)到精通-css布局

航欄效果圖：

導(dǎo)航欄功能模塊圖

導(dǎo)航欄布局結(jié)構(gòu)分析

您的項(xiàng)目需求