利用CSS和DIV的几种布局方法(3)

最新推荐文章于 2018-05-31 09:56:32 发布

快乐的程序媛

最新推荐文章于 2018-05-31 09:56:32 发布

阅读量432

点赞数

分类专栏： CSS HTML 文章标签： HTML CSS

CSS 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

5 篇文章

订阅专栏

本文通过一个实际案例详细介绍了如何使用HTML和CSS实现网页的左右布局。主要内容包括设置页面的高度、背景颜色、边框样式等，同时对左侧主要内容区域及右侧导航栏的浮动、定位进行了详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>My third test about layout of 1</title>
<style>
*{
padding:0px;
margin:0px;}
#Container{
height:660px;
background-color:orange;
border:1px solid black;
padding:10px;
text-align:center;
font-family:arial;
font-size:20px;
position:relative;
list-style:none;}
#container h1{
text-decoration:none;
background-color:gray;
margin-bottom:2px;
width:100%;
border:1px solid black;
}
#main{
height:600px;
background-color:gray;
border:1px dashed red;
text-align:left;
font-size:0.8em;
line-height:1.5em;
padding:10px 260px 0px 10px;
float:left;
}
#rightbar{
width:260px;
height:600px;
background-color:olive;
float:right;
margin-left:-260px;
text-align:center;}
ul{
list-style-type:none;
border-bottom:1px solid black;
background-color:lightgray;}
li{
padding-top:69px;}
</style>
</head>
<body>
<div id="container">
<h1>This is my third test about 左右布局</h1>
<div id="main">
This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.<br />
This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.This is first test.<br />
</div>
<div id="rightbar">
<ul>
<h3>导航部分<h3>
<li id="one"><a href=#>one</a></li>
<li><a href=#>two</a></li>
<li><a href=#>three</a></li>
<li><a href=#>four</a></li>
<li><a href=#>five</a></li>
<li><a href=#>six</a></li>
</ul>
</div>
</div>
</body>
</html>