HTML页面布局
时间：2023-09-09 01:54:02 | 来源：网站运营
时间：2023-09-09 01:54:02 来源：网站运营
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;/*内部区块水平居中*/
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>
<!--顶部固定导航区-->
<div class="top">
顶部固定导航区
</div>
<!--主体内容部分-->
<div class="container">
<!--主体的头部-->
<div class="header">
主体的头部
</div>
<!--主体的部分-->
<div class="main">
<div class="left">
主体左侧
</div>
<div class="content">
主体中间
</div>
<div class="right">
主体右侧
</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.左右两侧采用绝对定位来布局<br>
2.中间区域使用margin挤出来的
</p>
<div class="container">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
<div class="main">
主体
</div>
</div>
</body>
</html>
三列布局左右固定中间自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局左右固定中间自适应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.中间区块使用margin挤出来的<br>
3.DOM顺序不能乱，必须先写左右两侧，再写中间
</p>
<div class="left">
左侧
</div>
<div class="right">
右侧
</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.给左右两侧添加一个定位的父级区块，并设置定位属性，一般设置为相对定位<br>
2.给左右两个区块分别使用绝对定位<br>
3.定位父级必须设置宽度
</p>
<div class="container clear">
<div class="left">
左侧
</div>
<div class="right">
右侧
</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.要给左右两侧添加一个父级区块<br>
2.给左右二个区块设置浮动<br>
3.给父级区块添加一个after伪类让子块撑开父级区块
</p>
<div class="container clear">
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
</div>
</body>
</html>
两列布局右侧固定左侧自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局右侧固定左侧自适应</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.右侧固定，并设置为右浮动<br>
2.左侧主体部分设置一个margin-right，它的宽度只要大于等于右侧宽度即可</p>
<div class="right">
右侧
</div>
<div class="main">
主体
</div>
</body>
</html>
两列布局左侧固定右侧自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局左侧固定右侧自适应</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.左侧固定，并设置为左浮动<br>
2.右侧主体部分设置一个右边距，它的宽度只要大于等于左侧宽度即可</p>
<div class="left">
左侧
</div>
<div class="main">
主体
</div>
</body>
</html>
单列_宽度自适应_内容居中布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单列_宽度自适应_内容居中布局</title>
<style type="text/css">
.container{
max-width: 960px;/*设置最大宽度为960px*/
margin: 0 auto;/*设置内部的块元素水平居中*/
}
.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.头部、底部单独放在一个独立的容器中，仅设置一下高度即可<br>
2.头部和底部的内容区与主体等宽<br>
3.主体单独放在一个容器中，并设置水平居中
</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;/*设置最大宽度为960px*/
margin: 0 auto;/*设置内部的块元素水平居中*/
}
.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.首先页面的头部，主体和底部全部放在一个容器中统一设置<br>
2.容器中的子块只需要设置一下高度即可</p>
<!--DOM-->
<div class="container">
<div class="header">头部
</div>
<div class="main">主体
</div>
<div class="footer">底部
</div>
</div>
</body>
</html>
导航栏制作
<!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>导航栏制作</title>
<style type="text/css">
/*消除默认样式*/
ul{
list-style: none;
padding: 0px;
margin: 0px;
}
a{
text-decoration: none;
}
/* 导航容器样式*/
#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第二个子菜单出现时*/
#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="#">关于我们</a></li>
<li id="li">
<a href="#">关于我们</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="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
在线咨询
