使用position减少div的嵌套

最新推荐文章于 2024-09-14 15:26:51 发布

xzweixing

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量534

点赞数 1

文章标签： div xhtml border blog html 编程

本文链接：https://blog.csdn.net/woallf/article/details/6180591

版权

以前对网页进行布局是总是使用大量的div嵌套
及时是很小的一块也嵌套div，今天看了腾讯CDC
的blog源代码，受到启发，一些小的部分的布局没有必要
嵌套div，使用position实现比较好。
以前使用的较少，现做一个例子练手，代码如下：

<!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>

<title>position-example</title>

<style type=”text/css”>

*

{

margin:0;

padding:0;

}

.title

{

width:900px;

height:100px;

margin:20px auto;

border:1px solid #ccc;

position:relative;

padding:10px;

}

.astar

{

width:43px;

height:43px;

padding:1px;

border:1px solid #ccc;

position:relative;

float:left;

}

.astar img

{

border:none;

}

.line

{

background:repeat 0 0 #D7D7D7;

width:1px;

height:41px;

margin:0 10px;

display:inline;

float:left;

margin-top:4px;

}

.title h1

{

font-size:14px;

line-height:26px;

height:26px;

}

.title p

{

font-size:12px;

line-height:15px;

height:15px;

position:relative;

}

.tag

{

margin-left:3px;

}

.commtent

{

position:absolute;

right:5px;

top:5px;

display:block;

width:60px;

height:26px;

background:red;

color:#FFF;

font-weight:bold;

padding:3px;

text-decoration:none;

}

</style>

</head>

<body>

<div>

<a href=”#”><img src=”images/1.jpg” /></a>

<i></i>

<h1>This is a title</h1>

<p>

<a href=”#” >tag1</a>

<a href=”#”>tag2</a>

2011-2-10

</p>

<a href=”#”>comtents</a>

<br />

<p>there are contents</p>

<p>there are contents</p>

</div>

<div>

<a href=”#”><img src=”images/1.jpg” /></a>

<i></i>

<h1>This is a title</h1>

<p>

<a href=”#” >tag1</a>

<a href=”#”>tag2</a>

2011-2-10

</p>

<a href=”#”>comtents</a>

</div>

<div>

<a href=”#”><img src=”images/1.jpg” /></a>

<i></i>

<h1>This is a title</h1>

<p>

<a href=”#” >tag1</a>

<a href=”#”>tag2</a>

2011-2-10

</p>

<a href=”#”>comtents</a>

</div>

</body>

</html>