浮动与经典布局方式详解作业-2018-8-20 - HTML-CSS - php中文网博客

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

首页 > 博客列表 > 浮动与经典布局方式详解作业-2018-8-20

博主信息

博文 35

粉丝 0

评论 0

访问量 40699

专题推荐

更多>

相关推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

浮动与经典布局方式详解作业-2018-8-20

THPHP

原创

845人浏览过

一、使用固定定位实现在线聊天，

实例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>在线聊天</title>
  <style>
	*{margin:0;padding:0;}
	.box{
		position:fixed;
		bottom:100px;
		right:0;
		width:140px;
	}
	.box ul li{
		width:100%;
		height:45px;
		text-align:center;
		line-height:35px;
		list-style:none;
	}
	.box ul li a{
		display:inline-block;
		width:140px;
		height:35px;
		background:url("1.png") no-repeat -94px -57px;
		text-decoration:none;
		color:#666;
	}
	.box ul li a:hover{
		color:#ff0000;
	}
	.box ul li a:hover span{
		color:#fff;
		background:#000033;
	}
  </style>
 </head>
 <body>
	<div class="box">
		<ul>
			<li>
				<a href="#">
					<span>加入VIP</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>广告合作</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>售后服务</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>其他服务</span>
				</a>
			</li>
		</ul>
		
	</div>
 </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行结果图：

二、图文混排：

实例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>图文混排</title>
  <style>
	*{margin:0;padding:0;}
	.header{
		width:800px;
		overflow:hidden;
		margin:auto;
	}
	.header .left{
		width:40%;
		float:left;
		height:220px;
	}
	.header .left img{width:100%;margin-top:40px;border-radius:10px;}
	.header .right{
		width:58%;
		height:220px;
		float:left;
		margin-left:2%;
	}
	.header .right h1{
		font-size:20px;
		line-height:45px;
		text-align:center;
	}
	.header .right > p{
		height:60px;
	}
	.header .right p{
		font-size:12px;
		color:#666;
	}
	.header .right .text p:nth-child(1){
		line-height:40px;
	}
	.header .right .text p:nth-child(2){
		margin-bottom:15px;
	}
	.header .right .text p:nth-child(2) > span{
		margin-left:20px;
	}
	.header .right .text p:nth-child(2) > span:nth-child(1){
		margin-left:0;
	}
	.header .right .text ul li{
		float:left;
		list-style:none;
		background:red;
		margin-left:10px;
		border-radius:8px;
	}
	.header .right .text ul li:nth-child(1){
		margin-left:0;
		background:#FF5722;
	}
	.header .right .text ul li > a{
		display:inline-block;
		padding:10px 15px;
		text-decoration:none;
		color:#fff;
		font-size:14px;
	}
	.header .right .text ul li:nth-child(2){
		background:#333;
	}
	.header .right .text ul li:nth-child(3){
		background:#009688;
	}
  </style>
 </head>
 <body>
	<div class="header">
		<div class="left">
			<img src="1.jpg" alt="">
		</div>
		<div class="right">
			<h1>第三期_前端基础</h1>
			<p>PHP中文网第三期线上班_前端基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,Bootstrap,页面布局实战	《网站管理后台》的模板开发(综合应用以上所学知识)</p>
			<div class="text">
				<p>初级</p>
				<p>
					<span>共34章节</span>
					<span>4685次播放</span>
					<span>添加时间：2018-07-25 14:59</span>
				</p>
				<ul>
					<li><a href="#">观看直播</a></li>
					<li><a href="#">课件下载</a></li>
					<li><a href="#">QQ群交流群</a></li>
				</ul>
			</div>
		</div>
	</div>
 </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行结果图：

三、双飞翼布局与圣杯布局：

新建一个css文件，并且引入html文档中。

css:

实例

*{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
.main .wrap .container h2,
	.main .container h2,
	.main .right h2{
		font-size:16px;
		line-height:45px;
		text-indent:20px;
	}
.main .wrap .container ul li:nth-child(1),
.main .wrap .container ul li:nth-child(4),
.main .wrap .container ul li:nth-child(7),
.main .container ul li:nth-child(1),
.main .container ul li:nth-child(4),
.main .container ul li:nth-child(7){
	margin-left:20px;
}
.main .wrap .container ul li:nth-child(3),
.main .wrap .container ul li:nth-child(6),
.main .wrap .container ul li:nth-child(9),
.main .container ul li:nth-child(3),
.main .container ul li:nth-child(6),
.main .container ul li:nth-child(9){
	margin-right:0;
}
.main .wrap .container ul li,
.main .container ul li{
	width:200px;
	height:120px;
	float:left;
	margin-left:27px;
	margin-bottom:30px;
	border-radius:10px;
	overflow:hidden;
}
.main .wrap .container ul li a,
.main .container ul li a{
	display:inline-block;
	width:100%;
	color:#333;
}
.main .wrap .container ul li a:hover,
.main .container ul li a:hover{
	color:#777;
}
.main .wrap .container ul li a > img,
.main .container ul li a > img{
	width:100%;
	height:80px;
	display:block;
}
.main .wrap .container ul li a p,
.main .container ul li a p{
	width:95%;
	height:30px;
	background:#fff;
	border-radius:10px 10px 0 0;
	padding:8px 5px;
	position:relative;
	top:-6px;
	font-size:14px;
}
.main .wrap .container ul li a p > span,
	.main .container ul li a p > span{
		margin-right:8px;
		background-color:#93999f;
		color:#fff;
	}
.main .left{
	width:200px;
	height:500px;
	background:#2b333b;
	float:left;
	margin-left:-100%;
	border-radius:10px 0 0 10px;
}
.main .left ul > li{
	width:100%;
	line-height:40px;
	text-indent:30px;
}
.main .left ul > li:hover{
	background-color:rgba(255,255,255,.3);
}
.main .left ul > li a{
	color:rgba(255,255,255,.6);
}
.main .right{
		width:198px;
		height:500px;
		background:#fff;
		border:1px solid #ccc;
		float:left;
		margin-left:-200px;
		overflow:hidden;
	}
	.main .right ul li{
		line-height:17px;
		margin-bottom:13px;
		text-align:center;
	}
	.main .right ul li a{
		color:#333;
		font-size:13px;
	}
	.main .right ul li a:hover{
		color:#777;
	}

.header,.footer{
	width:100%;
}
.header > .container,.footer > .container{
	width:1100px;
	margin:auto;
}
.header > .container ul > li{
	float:left;
	line-height:40px;
	height:40px;
	width:120px;
	text-align:center;
}
.header > .container ul > li a{
	display:inline-block;
	width:100%;
	color:#fff;
}
.header > .container ul > li a:hover{
	background-color:#fff;
	color:#222;
}
.footer > .container{
	line-height:55px;
	text-align:center;
	color:#fff;
	font-size:14px;
	background:#393D49;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

双飞翼：

实例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>双飞翼</title>
  <style>
	.main{
		width:1100px;
		height:500px;
		margin:20px auto;
	}
	.main .wrap{
		width:100%;
		min-height:100%;
		float:left;
	}
	.main .wrap .container{
		margin:0 200px;
	}
	.main .left{
		width:200px;
		min-height:100%;
		background:#2b333b;
		float:left;
		margin-left:-100%;
		border-radius:10px 0 0 10px;
	}
	.main .left ul > li{
		width:100%;
		line-height:40px;
		text-indent:30px;
	}
	.main .left ul > li:hover{
		background-color:rgba(255,255,255,.3);
	}
	.main .left ul > li a{
		color:rgba(255,255,255,.6);
	}
  </style>
 </head>
 <body>
	<div class="header" style="background:#000;height:40px;">
		<div class="container">
			<ul>
				<li><a href="#">视频教程</a></li>
				<li><a href="#">社区问答</a></li>
				<li><a href="#">编程词典</a></li>
				<li><a href="#">手册下载</a></li>
				<li><a href="#">工具下载</a></li>
			</ul>
		</div>
	</div>

	<div class="main">
		<div class="wrap">
			<div class="container">
				<h2>最新课程</h2>
				<ul>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
							<p>
								<span>初级</span>
								Web项目开发流程大揭密
							</p>
						</a>
					</li>
				</ul>	
			</div>
		</div>
		<div class="left">
			<ul>
				<li><a href="#">php开发</a></li>
				<li><a href="#">前端开发</a></li>
				<li><a href="#">服务端开发</a></li>
				<li><a href="#">移动开发</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">服务器运维&下载</a></li>
				<li><a href="#">在线工具箱</a></li>
				<li><a href="#">常用类库</a></li>
			</ul>	
		</div>
		<div class="right">
			<h2>头条</h2>
			<ul>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
			</ul>
		</div>
	</div>
	
	<div class="footer" style="background:#000033;height:55px;">
		<div class="container">
			PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地
		</div>
	</div>
 </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

圣杯：

实例

<!doctype html>
<html lang="en">
 <head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>圣杯</title>
	<style>
		.footer{clear:both;} /* 清除浮动影响，解决背影颜色不显示 */
		.main{
			width:700px;
			height:500px;
			margin:20px auto;
		}
		.main > .container{
			width:100%;
			height:500px;
			float:left;
		}
		.main > .left{
			position:relative;
			left:-200px;
		}
		.main > .right{
			position:relative;
			right:-200px;
		}
	</style>
 </head>
 <body>
	<div class="header" style="background:#000;height:40px;">
		<div class="container">
			<ul>
				<li><a href="#">视频教程</a></li>
				<li><a href="#">社区问答</a></li>
				<li><a href="#">编程词典</a></li>
				<li><a href="#">手册下载</a></li>
				<li><a href="#">工具下载</a></li>
			</ul>
		</div>
	</div>

	<div class="main">
		<div class="container">
			<h2>最新课程</h2>
			<ul>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="">
						<p>
							<span>初级</span>
							Web项目开发流程大揭密
						</p>
					</a>
				</li>
			</ul>
		</div>
		<div class="left">
			<ul>
				<li><a href="#">php开发</a></li>
				<li><a href="#">前端开发</a></li>
				<li><a href="#">服务端开发</a></li>
				<li><a href="#">移动开发</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">服务器运维&下载</a></li>
				<li><a href="#">在线工具箱</a></li>
				<li><a href="#">常用类库</a></li>
			</ul>
		</div>
		<div class="right">
			<h2>头条</h2>
			<ul>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
				<li><a href="#">如何增强自己的学习能力？</a></li>
				<li><a href="#">php中文网手机APP上线通知！</a></li>
				<li><a href="#">php中文网本期送书活动中奖</a></li>
			</ul>
		</div>
	</div>

	<div class="footer" style="background:#000033;height:55px;margin-top:20px;">
		<div class="container">
			PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地
		</div>
	</div>	
 </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以上的代码大多都是重复的，所以修改下标签，就可以元素属性公共。

双飞翼与圣杯的区别：

区别.jpg

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

循环数组-类型转换-回调函数—2018-8-31

2018-08-31 00:09:18

关于我们免责申明意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学