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

最新推荐文章于 2022-05-16 00:41:46 发布

Tanyacui

最新推荐文章于 2022-05-16 00:41:46 发布

阅读量385

点赞数 1

分类专栏： HTML CSS 文章标签： div css 布局

本文链接：https://blog.csdn.net/Tanyacui/article/details/52167141

版权

HTML 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

<!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;}
body{
background-color:orange;}
#container{
width:1000px;
height:660px;
border:1px solid black;
padding:5px 10px;
text-align:center;
font-family:arial;
font-size:20px;
position:relative;
list-style:none;
left:50%;
margin-left:-500px;}
#container h1{
text-decoration:none;
background-color:gray;
margin-bottom:2px;
border:1px dashed black;
}
#main{
width:780px;
height:600px;
background-color:gray;
padding-bottom:5px;
text-align:left;
font-size:0.8em;
line-height:1.5em;
float:left;
padding:0px 10px 0px 10px;
}
#rightbar{
width:200px;
height:600px;
float:right;
text-align:center;
}
#one{
padding-top:10px;;
}
#last{
padding-bottom:36px;;
}
ul{
list-style-type:none;
background-color:green;}
li{
padding-top:55px;}

</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>
<li id="last"><a href=#>seven</a></li>
</ul>
</div>
</div>
</body>
</html>