HTML頁面布局
時間：2023-09-09 01:54:02 | 來源：網(wǎng)站運營
時間：2023-09-09 01:54:02 來源：網(wǎng)站運營
HTML頁面布局：案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ空間</title>
<style type="text/css">
body,ul,li {
margin: 0;
padding: 0;
}
body{
background-image: url(img/bg.png);
background-repeat: no-repeat;
background-color: #e9e9e9;
background-position: 0 42px;
}
.top{
width: 100%;
height: 42px;
background-color:cadetblue;
position: fixed;
}
.container{
width: 1100px;
height: 100px;
position: absolute;
top: 42px;
left: 0;
right: 0;
margin: auto;/*內(nèi)部區(qū)塊水平居中*/
z-index: -1;
}
.container .header{
height: 200px;
background-color: azure;
}
.container .main{
position: relative;/*定位父級*/
}
.container .main .left{
position: absolute;
left: 0;
top: 0;
width: 170px;
height: 520px;
background-color: antiquewhite;
}
.container .main .right{
position: absolute;
right: 0;
top: 0;
width: 300px;
height: 520px;
background-color: #FAEBD7;
}
.container .main .content{
margin-left: 180px;
margin-right: 310px;
height: 520px;
background-color: #EEEEEE;
}
.container .footer{
height: 50px;
background-color: #00AAAA;
}
</style>
</head>
<body>
<!--頂部固定導(dǎo)航區(qū)-->
<div class="top">
頂部固定導(dǎo)航區(qū)
</div>
<!--主體內(nèi)容部分-->
<div class="container">
<!--主體的頭部-->
<div class="header">
主體的頭部
</div>
<!--主體的部分-->
<div class="main">
<div class="left">
主體左側(cè)
</div>
<div class="content">
主體中間
</div>
<div class="right">
主體右側(cè)
</div>
</div>
<!--主體的底部-->
<div class="footer">
主體的底部
</div>
</div>
</body>
</html>
三列布局采用絕對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局絕對定位</title>
<style type="text/css">
.container{
position: absolute;
left: 0;
right: 0;
}
.left{
width: 200px;
height: 600px;
position: absolute;
left: 0;
top: 0;
background-color: aqua;
}
.right{
width: 200px;
height: 600px;
position: absolute;
right: 0;
top: 0;
background-color: cyan;
}
.main{
height: 600px;
background-color: skyblue;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<h4>基本思路：</h4>
<p>
1.左右兩側(cè)采用絕對定位來布局<br>
2.中間區(qū)域使用margin擠出來的
</p>
<div class="container">
<div class="left">
左側(cè)
</div>
<div class="right">
右側(cè)
</div>
<div class="main">
主體
</div>
</div>
</body>
</html>
三列布局左右固定中間自適應(yīng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局左右固定中間自適應(yīng)flost+margin</title>
<style type="text/css">
.left{
width: 200px;
height: 600px;
background-color: aqua;
float: left;
}
.right{
height: 600px;
width: 200px;
background-color: cyan;
float: right;
}
.main{
height: 600px;
margin-left: 200px;
margin-right:200px ;
background-color: bisque;
}
</style>
</head>
<body>
<h4>基本思路：</h4>
<p>
1.左右兩列采用浮動+寬度<br>
2.中間區(qū)塊使用margin擠出來的<br>
3.DOM順序不能亂，必須先寫左右兩側(cè)，再寫中間
</p>
<div class="left">
左側(cè)
</div>
<div class="right">
右側(cè)
</div>
<div class="main">
主體
</div>
</body>
</html>
兩列左右布局采用絕對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兩列左右布局絕對定位</title>
<style type="text/css">
.container{
position: absolute;
left: 0;/*左邊定位起始點*/
right: 0;/*右邊定位起始點*/
margin: auto;/*左右邊距自動擠壓，即自動居中*/
max-width: 960px;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 600px;
background-color: aqua;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 750px;
height: 600px;
background-color: cyan;
}
</style>
</head>
<body>
<h4>基本思路：</h4>
<p>
1.給左右兩側(cè)添加一個定位的父級區(qū)塊，并設(shè)置定位屬性，一般設(shè)置為相對定位<br>
2.給左右兩個區(qū)塊分別使用絕對定位<br>
3.定位父級必須設(shè)置寬度
</p>
<div class="container clear">
<div class="left">
左側(cè)
</div>
<div class="right">
右側(cè)
</div>
</body>
</html>
兩列左右布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兩列左右布局</title>
<style type="text/css">
.container{
width: 960px;
margin: 0 auto;
background-color: yellow;
overflow: hidden;
}
.clear{
-ms-zoom: 1;
}
.clear::after{
content: '';
display: block;
clear: both;
}
.left{
width: 200px;
height: 600px;
background-color: cyan;
float: left;
}
.right{
width: 750px;
height: 600px;
background-color: skyblue;
float: right;
}
</style>
</head>
<body>
<h4>基本思路：</h4>
<p>
1.要給左右兩側(cè)添加一個父級區(qū)塊<br>
2.給左右二個區(qū)塊設(shè)置浮動<br>
3.給父級區(qū)塊添加一個after偽類讓子塊撐開父級區(qū)塊
</p>
<div class="container clear">
<div class="left">
左側(cè)
</div>
<div class="right">
右側(cè)
</div>
</div>
</body>
</html>
兩列布局右側(cè)固定左側(cè)自適應(yīng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兩列布局右側(cè)固定左側(cè)自適應(yīng)</title>
<style type="text/css">
.right{
width: 200px;
height: 600px;
background-color: skyblue;
float: right;
}
.main{
height: 600px;
background-color: cyan;
margin-right: 200px;
}
</style>
</head>
<body>
<h4>基本思路：</h4>
<p>1.右側(cè)固定，并設(shè)置為右浮動<br>
2.左側(cè)主體部分設(shè)置一個margin-right，它的寬度只要大于等于右側(cè)寬度即可</p>
<div class="right">
右側(cè)
</div>
<div class="main">
主體
</div>
</body>
</html>
兩列布局左側(cè)固定右側(cè)自適應(yīng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兩列布局左側(cè)固定右側(cè)自適應(yīng)</title>
<style type="text/css">
.left{
width: 200px;
height: 600px;
background-color: skyblue;
float: left;
}
.main{
height: 600px;
background-color: cyan;
margin-left: 200px;
}
</style>
</head>
<body>
<h4>基本思路：</h4>
<p>1.左側(cè)固定，并設(shè)置為左浮動<br>
2.右側(cè)主體部分設(shè)置一個右邊距，它的寬度只要大于等于左側(cè)寬度即可</p>
<div class="left">
左側(cè)
</div>
<div class="main">
主體
</div>
</body>
</html>
單列_寬度自適應(yīng)_內(nèi)容居中布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>單列_寬度自適應(yīng)_內(nèi)容居中布局</title>
<style type="text/css">
.container{
max-width: 960px;/*設(shè)置最大寬度為960px*/
margin: 0 auto;/*設(shè)置內(nèi)部的塊元素水平居中*/
}
.header{
height: 50px;
background-color: aqua;
}
.main{
height: 600px;
background-color: firebrick;
}
.footer{
height: 50px;
background-color: #abcdef;
}
</style>
</head>
<body>
<h4>基本思路</h4>
<p>1.頭部、底部單獨放在一個獨立的容器中，僅設(shè)置一下高度即可<br>
2.頭部和底部的內(nèi)容區(qū)與主體等寬<br>
3.主體單獨放在一個容器中，并設(shè)置水平居中
</p>
<!--DOM-->
<div class="header">頭部
<div class="container"> </div>
</div>
<div class="main">主體
<div class="container"> </div>
</div>
<div class="footer">底部
<div class="container"> </div>
</div>
</body>
</html>
單列布局1等寬
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>單列布局1:等寬</title>
<style type="text/css">
.container{
max-width: 960px;/*設(shè)置最大寬度為960px*/
margin: 0 auto;/*設(shè)置內(nèi)部的塊元素水平居中*/
}
.header{
height: 50px;
background-color: aqua;
}
.main{
height: 600px;
background-color: firebrick;
}
.footer{
height: 50px;
background-color: #abcdef;
}
</style>
</head>
<body>
<h4>基本思路</h4>
<p>1.首先頁面的頭部，主體和底部全部放在一個容器中統(tǒng)一設(shè)置<br>
2.容器中的子塊只需要設(shè)置一下高度即可</p>
<!--DOM-->
<div class="container">
<div class="header">頭部
</div>
<div class="main">主體
</div>
<div class="footer">底部
</div>
</div>
</body>
</html>
導(dǎo)航欄制作
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導(dǎo)航欄制作</title>
<style type="text/css">
/*消除默認樣式*/
ul{
list-style: none;
padding: 0px;
margin: 0px;
}
a{
text-decoration: none;
}
/* 導(dǎo)航容器樣式*/
#nav{
width: 100%;
height: 46px;
}
#nav>ul{
width: 90%;
padding-left: 10%;
height: 46px;
background-color: #285a8c;
}
#nav>ul>li{
float: left;
height: 46px;
line-height: 46px;
padding: 0 25px;
}
#nav>ul>li:hover{
background-color: darkorange;
}
#nav>ul>li>a{
color: white;
}
/*hover第二個子菜單出現(xiàn)時*/
#li:hover .ul{
/*background-color: #AAAAEE;*/
display: block;
}
/*子菜單的樣式*/
.ul{
display: none;
width: 114px;
/*子菜單占位問題用絕對定位解決*/
position: absolute;
margin-left: -26px;
padding-top: 2px;
}
.ul>li{
background-color: #285a8c;
text-align: center;
border-bottom: 1px solid ghostwhite;
}
.ul>li:hover{
background-color: darkorange;
}
.ul>li>a{
color: white;
}
.ul>li>a:hover{
color: aqua;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">關(guān)于我們</a></li>
<li id="li">
<a href="#">關(guān)于我們</a>
<ul class="ul">
<li><a href="#">公司新聞</a></li>
<li><a href="#">公司新聞</a></li>
<li><a href="#">公司新聞</a></li>
<li><a href="#">公司新聞</a></li>
</ul>
</li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>
</body>
</html>
在線咨詢