網頁佈局
1、行佈局
1.基礎的行佈局css
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: #fff;
text-align: center;
}
.container{
width: 800px;
height: 1000px;
background: #4c77f2;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">這是頁面內容</div>
</body>
</html>
複製代碼
二、行佈局自適應html
修改width爲百分比：瀏覽器
.container{
width: 100%;
height: 1000px;
background: #4c77f2;
margin: 0 auto;
}
複製代碼
三、行佈局自適應限制最大寬佈局
.container{
width: 100%;
max-width:1000px;
height: 1000px;
background: #4c77f2;
margin: 0 auto;
}
複製代碼
四、行佈局垂直水平居中網站
樣例：百度的搜索spa
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: #fff;
text-align: center;
}
.container{
width: 800px;
height: 200px;
background: #4c77f2;
position: absolute;
top: 50%;
left: 50%;
margin-top:-100px;
margin-left: -400px;
}
</style>
</head>
<body>
<div class="container">這是頁面內容</div>
</body>
</html>
複製代碼
五、經典的行佈局3d
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 16px;
}
.header{
width: 800px;
height: 50px;
background:#333;
margin: 0 auto;
line-height: 50px;
}
.banner{
/*width: 800px;*/
width: 100%; /*多行佈局某部分自適應*/
height: 300px;
background:#30a457;
margin: 0 auto;
line-height: 300px;
}
.container{
width: 800px;
height: 1000px;
background: #4c77f2;
margin: 0 auto;
}
.footer{
width: 800px;
height: 100px;
background: #333;
margin: 0 auto;
line-height: 100px;
}
</style>
</head>
<body>
<div class="header">這是頁面的頭部</div>
<div class="banner">這是頁面的banner圖</div>
<div class="container">這是頁面的內容</div>
<div class="footer">這是頁面的底部</div>
</body>
</html>
複製代碼
需求：要求導航欄隨着頁面滾動固定在頂部：code
.header{
width: 100%;
height: 50px;
background:#333;
margin: 0 auto;
line-height: 50px;
position: fixed;/*使其固定在頂端*/
}
.banner{
width: 800px;
/*width: 100%; */
height: 300px;
background:#30a457;
margin: 0 auto;
line-height: 300px;
padding-top: 50px;/* 防止header覆蓋banner*/
}
複製代碼
2、多列布局
1.兩列布局固定cdn
<!DOCTYPE html>
<html>
<head>
<title>會員列表</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: #fff;
}
.container{
width: 1000px;
height: 1000px;
margin: 0 auto;
}
.left{
width: 600px;
height: 1000px;
background: #1a5acd;
float: left;
}
.right{
width: 400px;
height: 1000px;
background: #5880f9;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left">這是頁面的左側</div>
<div class="right">這是頁面的右側</div>
</div>
</body>
</html>
複製代碼
2.兩列布局自適應htm
.container{
/*width: 1000px;*/
width: 90%;
height: 1000px;
margin: 0 auto;
}
.left{
/*width: 600px;*/
width: 60%;
height: 1000px;
background: #1a5acd;
float: left;
}
.right{
/*width: 400px;*/
width: 40%;
height: 1000px;
background: #5880f9;
float: right;
}
複製代碼
3.三列布局固定
<!DOCTYPE html>
<html>
<head>
<title>會員列表</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: #fff;
}
.container{
width: 1000px;
margin: 0 auto;
}
.left{
width: 300px;
height: 1000px;
background: #67b581;
float: left;
}
.right{
width: 200px;
height: 1000px;
background: #67b581;
float: right;
}
.middle{
width: 500px;
height: 1000px;
background: #174bd8;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left">這是頁面的左側</div>
<div class="middle">這是頁面的中間</div>
<div class="right">這是頁面的右側</div>
</div>
</body>
</html>
複製代碼
4.三列布局自適應
.container{
/*width: 1000px;*/
width: 100%;
margin: 0 auto;
}
.left{
/*width: 300px;*/
width: 30%;
height: 1000px;
background: #67b581;
float: left;
}
.right{
/*width: 200px;*/
width: 20%;
height: 1000px;
background: #67b581;
float: right;
}
.middle{
/*width: 500px;*/
width: 50%;
height: 1000px;
background: #174bd8;
float: left;
}
複製代碼
3、混合佈局
1.混合佈局固定
<!DOCTYPE html>
<html>
<head>
<title>會員列表</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-size: 16px;
color: #fff;
text-align: center;
}
.header{
width: 800px;
height: 50px;
background: #5880f9;
margin: 0 auto;
line-height: 50px;
}
.container{
width: 800px;
margin: 0 auto;
height: 1000px;
}
.container .left{
width: 200px;
height: 1000px;
background: #67b581;
float: left;
}
.container .right{
width: 600px;
height: 1000px;
background: #d0d0d0;
float: right;
}
.footer{
width: 800px;
height: 100px;
background: #ed817e;
margin: 0 auto;
line-height: 100px;
}
.banner{
width: 100%;
height: 200px;
background: #8b8d01;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">這是頁面的頭部</div>
<div class="banner">這是頁面的輪播圖</div>
<div class="container">
<div class="left">這是頁面的左側</div>
<div class="right">這是頁面的右側</div>
</div>
<div class="footer">這是頁面的底部</div>
</body>
</html>
複製代碼
1.混合佈局自適應
<style type="text/css">
body{
margin: 0;
padding: 0;
font-size: 16px;
color: #fff;
text-align: center;
}
.header{
/*width: 800px;*/
width: 100%;
height: 50px;
background: #5880f9;
margin: 0 auto;
line-height: 50px;
}
.container{
/*width: 800px;*/
width: 100%;
margin: 0 auto;
height: 1000px;
}
.container .left{
/*width: 200px;*/
width: 40%;
height: 1000px;
background: #67b581;
float: left;
}
.container .right{
/*width: 600px;*/
width: 60%;
height: 1000px;
background: #d0d0d0;
float: right;
}
.footer{
/*width: 800px;*/
width: 100%;
height: 100px;
background: #ed817e;
margin: 0 auto;
line-height: 100px;
}
.banner{
width: 100%;
height: 200px;
background: #8b8d01;
margin: 0 auto;
}
</style>
複製代碼
4、聖盃佈局
#####佈局要求：
- 三列布局，中間寬度自適應，兩邊定寬（比較適合網站的管理後臺）
- 中間欄要在瀏覽器中優先展現渲染
- 容許任意列的高度最高
- 用最簡單的CSS、最少的HACK語句
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.header,.footer{
float: left;
width: 100%;
background: #ddd;
height: 40px;
line-height: 40px;
text-align: center;
}
.container{
padding: 0 220px 0 200px;
}
.left, .middle, .right{
position: relative;
float: left;
min-height: 300px;
}
.middle{
width: 100%;
background: #1a5acd;
}
.left{
width: 200px;
background: #f00;
margin-left: -100%;
left: -200px;
}
.right{
width: 220px;
background: #30a457;
margin-left: -220px;
right: -220px;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容</p>
</div>
<div class="left">
<h4>left</h4>
<p>這是頁面的左側內容</p>
</div>
<div class="right">
<h4>right</h4>
<p>這是頁面的右側內容</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
複製代碼
5、雙飛翼佈局
去掉相對佈局，只須要浮動和負邊距
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.header, .footer{
width: 100%;
float: left;
height: 40px;
background: #ddd;
line-height: 40px;
text-align: center;
}
.sub, .main, .extra{
float: left;
min-height: 300px;
}
.main{
width: 100%;
min-height: 300px;
}
.main-inner{
margin-left: 200px;
margin-right: 220px;
background: #30a457;
min-height: 300px;
}
.sub{
width: 200px;
background: #f00;
margin-left: -100%;
}
.extra{
width: 220px;
background: #1a5acd;
margin-left: -220px;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="main">
<div class="main-inner">
<h4>middle</h4>
<p>這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容這是頁面的中間內容</p>
</div>
</div>
<div class="sub">
<h4>sub</h4>
<p>這是頁面的左側內容</p>
</div>
<div class="extra">
<h4>extra</h4>
<p>這是頁面的右側內容</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
複製代碼
相關文章
- 1. 網頁佈局——table佈局
- 2. 網頁佈局
- 3. css網頁佈局
- 4. IPhoneX網頁佈局
- 5. columns網頁佈局
- 6. 網頁佈局(div)
- 7. html5網頁佈局
- 8. HTML5網頁佈局
- 9. 網頁頁面佈局
- 10. 網頁佈局——響應式佈局
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • JDK13 GA發佈：5大特性解讀
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 網頁佈局——table佈局
- 2. 網頁佈局
- 3. css網頁佈局
- 4. IPhoneX網頁佈局
- 5. columns網頁佈局
- 6. 網頁佈局(div)
- 7. html5網頁佈局
- 8. HTML5網頁佈局
- 9. 網頁頁面佈局
- 10. 網頁佈局——響應式佈局