Div+Css布局相关的属性

原创 2016年08月28日 22:39:54

接着上一篇。

说说div + span 的属性以及浮动框的使用。

<!doctype html>
<html>
	<head>
		<title>Div+Css布局(布局相关的属性)</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{
			padding:0;
			margin:0;
			}
			/*
			.div{
				width:300px;
				height:300px;
				background-color:green;
				position:relative;
				left:10px;
				top:10px;
				z-index:0;   z-index:层覆盖先后顺序
			}
			span{
				position:absolute;
				background-color:#ff6600;
				color:#fff;
				top:10px;
				right:0;
				
			}
			.fixed{
				position:fixed; 相对浏览器窗口进行定位
				background-color:#ff6600;
				color:#fff;
				top:100px;
				z-index:1;
			}
			*/
			div{
			background:green;
			display:inline;
			width:200px;
			}
			span{
			background-color:red;
			display:block; /*将span转换为div(块级元素)*/
			width:200px;
			}
		</style>
	</head>
	<body>
		<!--div class="fixed">
			<p>电话:021-78997669</p>
			<p>QQ:78259149</p>
			<p>地址:上海市</p>
		</div>
		<div class="div">
			<span>浏览次数:9876</span>
		</div>
		
		</div-->
		<div>今天天气真好!</div>
		<div>今天天气真好!</div>
		<div>今天天气真好!</div>
		<span>今天天气真好!</span>
		<span>今天天气真好!</span>
		<span>今天天气真好!</span>
		
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
	</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Div+CSS布局相关属性(2)

Div+CSS布局相关属性 1.div和span div和span在整个HTML标记中没有任何意义,他们存在就是为了应该CSS样式 div和span区别就是在于,span是内联元素,div是块级元素...

DIV+CSS布局相关

div和spanDIV和SPAN在整个HTML标签中没有任何意义,他们的存在就是为了应用CSS样式 DIV和SPAN的区别在于SPAN是内联元素,DIV是块级元素 盒模型margin 盒子外边距pad...

CSS3多列布局columns相关属性

CSS3中增加了可以实现多列布局的属性 在此之前的实现很麻烦可能需要各种定位 现在我们只需要一个属性就可以实现 多列布局类似于我们的报纸布局 这样可以方便读者观看多列数量与多列宽度如果一行文字...

CSS学习笔记(三)布局 背景 字体 文本 边框 列表 复杂样式一一相关属性

CSS 背影相关属性效果:                            background-color              设置背景颜色                      ...

CSS盒模型属性、CSS浮动属性、使用CSS+div布局

1. 盒子模型 找个网站,按f12后,对照右下脚显示的图片讲解 实线外部为margin空间,不属于元素占用的空间。 实线内部为该元素本身占用的空间:向内部伸展, 依次是b...

Div+Css常用属性

  • 2011年11月23日 12:46
  • 166KB
  • 下载

DIV布局属性中position属性的四大用法

正确的使用DIV布局属性之position属性 Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Posit...

html+css和div布局

  • 2014年05月21日 15:09
  • 137KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Div+Css布局相关的属性
举报原因:
原因补充:

(最多只允许输入30个字)