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布局的优势和弊端

DIV+CSS的优势 1、符合W3C标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、对浏览者和浏览器更具亲和力。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到...
  • wy_Blog
  • wy_Blog
  • 2017年02月25日 17:44
  • 982

DIV+CSS布局和TABLE布局的优缺点讲解

TABLE布局是WEB早期CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。现在绝大多数的网站都是用...
  • qq_32609883
  • qq_32609883
  • 2015年12月18日 14:19
  • 4286

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

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

DIV+CSS布局和Table布局对比

转自:http://www.toutiao.com/i6429288122151862786/ 虽然目前大多数网页都是采用的DIV+CSS布局的方式,但是也有少数的老式Web网页采用的是Ta...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017年06月14日 19:42
  • 623

一个好例子:DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用...
  • u014801801
  • u014801801
  • 2016年12月11日 22:20
  • 5481

网站开发之DIV+CSS简单布局网站入门篇(五)

这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo、导航条)、中部(页面主要内容、左右栏目)、底部(制作方介绍、超链接)。这是非常基础的一篇引入性文章,采用案...
  • Eastmount
  • Eastmount
  • 2016年11月08日 12:05
  • 4485

DIV+CSS标准化布局的优势

"DIV+CSS"标准化布局符合W3C的标准,
  • u012745215
  • u012745215
  • 2014年07月24日 19:22
  • 1287

DIV+CSS首页布局练习

新建外部样式, html中设置表示文件格式,在加入 引入外部css链接 最先布局一个最外面的层,设置宽度960像素,临时高度800像素和背景颜色 布局整个body体 ,所有外边距和内填充变成...
  • Abenazhan
  • Abenazhan
  • 2017年05月31日 10:53
  • 420

PHP.5-DIV+CSS布局网站首页实例

DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html【页头、页脚、侧边栏和内容区域】 #避免各浏览器对...
  • ZiXuanFY
  • ZiXuanFY
  • 2016年10月13日 01:28
  • 1052

DIV + CSS 实现最经典的布局

我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对...
  • u011340807
  • u011340807
  • 2014年02月14日 16:39
  • 2537
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Div+Css布局相关的属性
举报原因:
原因补充:

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