css布局(一)

最新推荐文章于 2024-05-14 18:25:49 发布
最新推荐文章于 2024-05-14 18:25:49 发布
阅读量188 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42872297
版权

 

 

<!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>CSS布局</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			body
			{
				margin:10px;
				background:#fff;
			}
			
			
			#header
			{
				border:1px solid black;
				height:60px;
				
				background:#ccc;
				line-height:60px;
				
				margin-bottom:10px;
			}
			
			#header h1
			{
				font-size:16px;
				text-align:center;
				
				height:100%;
				
			}
			
			#nav
			{
				border:1px solid black;
				width:30%;
				height:300px;
				
				float:left;
				/*火狐有用，将区域透明化*/
				/*-moz-opacity:0.2;*/
				margin-bottom:10px;
				
			}
			
			#nav ul
			{
				
				/*第一种方法居中*/
				text-align:center;
				
				/*第二种方法居中*/
				/*width:50px;*/
				/*margin:0 auto;*/
				line-height:150%;

			}
			
			#main
			{
				border:1px solid black;
				width:65%;
				height:300px;
				
				float:right;
				margin-bottom:10px;
			}
			
			#main p
			{
				padding:10px;
				/*首行缩进*/
				text-indent:34px;
				/*每个字之间的间距*/
				letter-spacing:2px;
				line-height:150%;
			}
			
			#footer
			{
				border:1px solid black;
				height:60px;
				line-height:60px;
				/* 清除浮动 */
				clear:both;
				
			}
			
			#footer p
			{
				text-align:center;
				
			}
		</style>
	</head>
	
	<body>
		
		<!-- 流体浮动布局 -->
		<!-- 规格：当视窗发生变化时跟着变化 -->
		<!-- 采用：浮动布局 -->
		<!-- 兼容: 兼容当前主流浏览器 -->
		
		<!-- 流体浮动两列布局 -->
		<div id = "header">
			<h1>这里是标题</h1>
		</div>
		
		<div id = "nav">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		
		<div id = "main">
			<p>Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。 </p>
			<p>要理解WEB2.0，先得看WEB的历史。 World Wide Web，简称WWW，是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB，互联网上的资源，可以在一个网页里比较直观的表示出来；而且资源之间，在网页上可以链来链去。在WEB1.0上做出巨大贡献的公司有Netscape，Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器，Yahoo的杨致远提出了互联网黄页， 而Google后来居上，推出了大受欢迎的搜索服务。 </p>
		</div>
		
		<div id = "footer">
			<p>版权所有 翻版必究</p>
		</div>
		
	</body>
</html>


 

<!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>CSS布局</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			body
			{
				margin:10px;
				background:#fff;
			}
			
			
			#header
			{
				border:1px solid black;
				height:60px;
				
				background:#ccc;
				line-height:60px;
				
				
			}
			
			#header h1
			{
				font-size:16px;
				text-align:center;
				
				height:100%;
				
			}
			
			#nav
			{
				border:1px solid black;
				width:20%;
				height:300px;
				
				
				/*火狐有用，将区域透明化*/
				/*-moz-opacity:0.2;*/
				
				float:left;
				
				margin-bottom:10px;
				
			}
			
			#nav ul
			{
				
				/*第一种方法居中*/
				text-align:center;
				
				/*第二种方法居中*/
				/*width:50px;*/
				/*margin:0 auto;*/
				line-height:150%;

			}
			
			#main
			{
				border:1px solid black;
				width:55%;
				height:300px;
				float:left;
				margin-left:2%;
				margin-bottom:10px;
				
			}
			
			#navr
			{
				border:1px solid black;
				width:20%;
				height:300px;
				float:right;
				margin-bottom:10px;
			}
			
			#navr ul
			{
				text-align:center;
			}
			
			#main p
			{
				padding:10px;
				/*首行缩进*/
				text-indent:34px;
				/*每个字之间的间距*/
				letter-spacing:2px;
				line-height:150%;
			}
			
			#footer
			{
				border:1px solid black;
				height:60px;
				line-height:60px;
				/* 清除浮动 */
				clear:both;
				
			}
			
			#footer p
			{
				text-align:center;
				
			}
		</style>
	</head>
	
	<body>
		
		<!-- 流体浮动布局 -->
		<!-- 规格：当视窗发生变化时跟着变化 -->
		<!-- 采用：浮动布局 -->
		<!-- 兼容: 兼容当前主流浏览器 -->
		
		<!-- 流体浮动三列布局 -->
		<div id = "header">
			<h1>这里是标题</h1>
		</div>
		
		<div id = "nav">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		
		<div id = "main">
			<p>Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。 </p>
			<p>要理解WEB2.0，先得看WEB的历史。 World Wide Web，简称WWW，是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB，互联网上的资源，可以在一个网页里比较直观的表示出来；而且资源之间，在网页上可以链来链去。在WEB1.0上做出巨大贡献的公司有Netscape，Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器，Yahoo的杨致远提出了互联网黄页， 而Google后来居上，推出了大受欢迎的搜索服务。 </p>
		</div>
		
		<div id ="navr">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		
		<div id = "footer">
			<p>版权所有 翻版必究</p>
		</div>
		
	</body>
</html>


 

<!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>CSS布局</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			body
			{
				margin:10px;
				background:#fff;
			}
			
			
			#header
			{
				border:1px solid black;
				height:60px;
				
				background:#ccc;
				line-height:60px;
				
				
			}
			
			#header h1
			{
				font-size:16px;
				text-align:center;
				
				height:100%;
				
			}
			
			#nav
			{
				border:1px solid black;
				width:20%;
				height:300px;
				
				
				/*火狐有用，将区域透明化*/
				/*-moz-opacity:0.2;*/
				
				float:left;
				
				margin-bottom:10px;
				
			}
			
			#nav ul
			{
				
				/*第一种方法居中*/
				text-align:center;
				
				/*第二种方法居中*/
				/*width:50px;*/
				/*margin:0 auto;*/
				line-height:150%;

			}
			
			#main
			{
				border:1px solid black;
				width:55%;
				height:300px;
				
				margin-left:22%;
				margin-bottom:10px;
				
			}
			
			#navr
			{
				border:1px solid black;
				width:20%;
				height:300px;
				float:right;
				margin-bottom:10px;
			}
			
			#navr ul
			{
				text-align:center;
			}
			
			#main p
			{
				padding:10px;
				/*首行缩进*/
				text-indent:34px;
				/*每个字之间的间距*/
				letter-spacing:2px;
				line-height:150%;
			}
			
			#footer
			{
				border:1px solid black;
				height:60px;
				line-height:60px;
				/* 清除浮动 */
				clear:both;
				
			}
			
			#footer p
			{
				text-align:center;
				
			}
		</style>
	</head>
	
	<body>
		
		<!-- 流体浮动布局 -->
		<!-- 规格：当视窗发生变化时跟着变化 -->
		<!-- 采用：浮动布局 -->
		<!-- 兼容: 兼容当前主流浏览器 -->
		
		<!-- 流体浮动三列布局 -->
		<div id = "header">
			<h1>这里是标题</h1>
		</div>
		
		<div id = "nav">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		
		<div id ="navr">
			<ul>
				<li>新闻</li>
				<li>杂志</li>
				<li>音乐</li>
				<li>体育</li>
				<li>魔兽</li>
			</ul>
		</div>
		
		<div id = "main">
			<p>Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。 </p>
			<p>要理解WEB2.0，先得看WEB的历史。 World Wide Web，简称WWW，是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB，互联网上的资源，可以在一个网页里比较直观的表示出来；而且资源之间，在网页上可以链来链去。</p>
		</div>
		
		<div id = "footer">
			<p>版权所有 翻版必究</p>
		</div>
		
	</body>
</html>


 

 

「已注销」
关注
专栏目录
html+css布局
sh2001824的博客
07-26 2887
布局
css常用布局多行多列
12-29
CSS布局常用的方法：float : none | left | right 取值： none :　默认值。对象不飘浮 left :　文本流向对象的右边 right :　文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: <div id=warp> 这里是第...
css多种布局方式
最新发布
博哥的二进制世界
05-14 3103
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
css布局 一行排几个元素
yinwhm12的博客
08-30 3028
要想这样的效果： 用flex实现： 首先要在外层(div)使用display:flex; 在确定，布局方向(水平或是垂直)，水平使用flex-direction: row; 要使里面的元素都在中央(middle),这在用align-items: center; 在声明一层(div)，如手机号码 与图标，可以这样 style="flex: 3 1 auto;padding-l
DIV＋CSS布局
热门推荐
zg0601的博客
10-17 1万+
DIV+CSS布局
CSS（2）：两列布局
羽墨灵丘的博客
02-05 1559
css实现两列布局的几种方法
CSS实现两列布局
zxl1990_ok的博客
11-17 2334
左列宽固定，右列自适应 效果如下： 利用float + margin <style> .left { background-color: red; width: 200px; height: 500px; float: left; } .right { background-color: green; margin-left: 200px; /* 大于或等于左列宽度 */ height: 500px; } .
CSS布局之两列布局
weixin_47471015的博客
01-11 3594
两列布局 两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果； 左列自适应, 右列定宽 float + margin 属性实现； float + overflow 属性实现； display 属性的 table 相关值实现； 使用绝对定位实现； 使用 flex 实现； 使用 Grid 实现； 方案一：float + margin 属性实现 <style> *{margin: 0;padding: 0;} #left
div+css布局
qq_62898618的博客
01-08 3354
1. position属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定） 1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。 1.2 relative：相对定位，指的是相对自己默认的位置。 1.3 static：默认 1.4 fixed：固定 2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素 ...
CSS常见布局方式
weixin_59528719的博客
03-01 1673
移动端和pc端不能使用同一个页面，两个页面的布局不一致，移动端需要自己另外一个布局并使用自己另外设计一个布局并使用不同域名呈现。块级元素是垂直组织的。：不会另起一行，只要在其父级块级元素的宽度内有足够的空间，他们与其他内联元素被安排在同一行。space-around：项目位于各行之前、之间、之后都留有空白的容器内。column-reverse：与 column 相同，但是以相反的顺序。row-reverse：与 row 相同，但是以相反的顺序。row（默认值）：灵活的项目将水平显示，正如一个行一样。
前端练习-CSS布局
qq_42385482的博客
02-08 2154
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
CSS网页布局入门教程1：一列固定宽度
10-30
CSS网页布局入门教程1：一列固定宽度知识点总结 一列固定宽度是CSS网页布局的基础，理解了一列固定宽度的概念和实现方法，对于初学者学习CSS网页布局非常重要。本教程将从基本概念开始，逐步进阶到高级知识点，並...
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
本资料包包含"Div_CSS.pdf"，是一份全面的学习Div+CSS布局的宝典。 1. **Div元素** - Div元素是HTML中的一个块级元素，常用于组织和分隔页面内容，通过CSS可以设置其样式，包括宽度、高度、边距等属性，创建出各种...
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
CSS网站布局实录
07-10
内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
css中margin、padding属性用法
12-23 534
样式单边距margin使你能够在网页上的元素的矩形区域外部添加空隙。需要记住的 是,margin属性处理的是元素外面的间距。 以下是设置边距的样式属性 margin-top:设置上边距 margin-right:设置右边距 margin-bottom:设置下边距 margin-left:设置左边距 margin:在一个属性中设置上、右、下、左边距。 希望每个周围边距为15个像素，可
css构造超链接
01-16 309
css构造超链接 a { /*IE6 IE7不显示下划虚线*/ text-decoration:none; color:red; border-bottom:1px dashed #333; display:block; width:140px; line-height:150%;
css区块、浮动、定位、溢出、滚动条
01-14 262
CSS div { background:red; width:200px; height:100px; overflow:auto; scrollbar-face-color :pink; }
css边框与边界
01-14 242
CSS边框与边界 img { border:dashed 1px green; } <!-- 可依序设置上、右、下、左线颜色 border-color:red 四边均为红色 border-color:red green 上下为红色、左右为绿色 border-col
CSS布局大全：掌握纯CSS布局的秘诀
DIV+CSS布局大全是一本详细介绍DIV+CSS布局的电子书籍，从基本概念到高级技术都被涵盖在内。本书的主要内容包括DIV+CSS布局入门、DIV+CSS布局技巧、DIV+CSS布局实践等。 DIV+CSS布局大全还包括了许多实践经验和案例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值