search

博客列表 >前端基础-第六天作业-0817

前端基础-第六天作业-0817

Bean_sproul
Bean_sproul原创
2018年08月20日 18:57:36695浏览

1、固定定位制作QQ在线客-服


实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>0817作业--固定定位制作QQ在线客-服</title>
	<style type="text/css">
		body{
        	margin: 0px;
        	padding: 0px;
        }
		.box{
			position: fixed;
			width: 200px;
			bottom: 0;
			right: 0;

		}
		.head{
			width: 200px;
			height: 50px;
			background: blue;
			color: #ffffff;
			text-align: center;
		} 
		.head span{
			line-height: 50px;
        }

		.main{
			border:1px solid black;
        }

		ul{ 
            list-style: none;
            margin-top: 20px;
        }

		ul li{
			height: 50px;
			margin: auto;
		}

		li img{
			width: 30px;
			height: 25px;
			vertical-align: middle
		}
	</style>
</head>
<body>
<div class="box">
<div class="head"><span>在 线 客 服</span></div>
<div class="main">
<ul>
	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
	<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
</ul>
</div>
</div>
	
</body>
</html>

运行实例 »

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


2、图文混排

实例

<html>
<head>
<title>图文混排</title>
</head>
<style>
img { /* 在文本左边 */
	float: left;
	/* 图片边框的颜色 */
	border: 1px solid #000000;
	/* 上方与其他元素保持10px */
	margin-top: 10px;
	/* 下方与其他元素保持10px */
	margin-bottom: 10px;
	/* 左侧与其他元素保持10px */
	margin-left: 10px;
	/* 右侧与其他元素保持10px */
	margin-right: 10px;
}
</style>
<body>
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534772434269&di=fc8078c5089736783d881a8dceebe869&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201407%2F05%2F20140705200703_cUE5R.thumb.600_0.jpeg" width="80px;" height="80px;">
	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
</body>
</html>

运行实例 »

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

 




3、双飞冀三列布局

双飞翼布局是玉伯提出来的，始于淘宝UED

如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.

  1. 先要将wrap放在前面，把main内容包含，优先渲染

  2. 将wrap、left、right浮动起来脱离文档流

  3. 将wrap中width100%充满container把left和right挤走

  4. 让left  margin-left：-100%拉到最左边

  5. 让right  margin-left：200px 拉到最右边，这里的像素和right的宽度一致

  6. 给main这个块设margin：0 200px；左右挤一挤 ，挤出左右宽的值


  7. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼实现三列布局</title>
    <style>
    	.header, .footer {
			width: 100%;
			height: 60px;
			background: blue;
		
		}
		.content{
			width: 1000px;
			min-height: 100%;
			background: gray;
			margin: 0 auto;
			text-align: center;
			line-height: 60px;
		}

		.container{
			width: 1000px;
			margin: auto;
			background: yellow;
			overflow: hidden;

/*visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示gun动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示gun动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。*/

		}
        
		.wrap{
			width: 100%;
			background: blue;
			float: left;
		}

		.main{
			min-height: 600px;
			background: wheat;
			margin:0 200px;/*左右挤一挤*/
			text-align: center;
			line-height: 600px;
		}

		.left{
			width: 200px;
			min-height: 600px;
			background: lightblue;
			float: left;
			margin-left: -100%;
			text-align: center;/*左右居中*/
			line-height: 600px;/*垂直居中*/
		}

		.right{
			width: 200px;
			min-height: 600px;
			background: lightgreen;
			float: left;
			margin-left:-200px;
			text-align: center;
			line-height: 600px;
		}
</style>

</head>
<body>
<div class="header">
	<div class="content">头部</div>
</div>

<div class="container">
	<div class="wrap">
		<div class="main">主体内容</div><!-- 优先渲染 -->
	</div>
	
	<div class="left">左边</div>
	
	<div class="right">右边</div>

</div>

<div class="header">
	<div class="content">尾部</div>
</div>
	
</body>
</html>

    运行实例 »

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

4、圣杯三列布局

圣杯布局是main百分百撑开，中间是自适应，在再中间栏在添加相对定位，并配合left和right属性，看起来就是一个酒杯一样

  1. 设定main的width：100%，撑开页面

  2. 设定酒杯的两边的把手，设定宽200像素，最小高度min-height

  3. 将main，left，right 向左浮动起来

  4. 让left  margin-left：-100%拉到最左边

  5. 让right  margin-left：200px 拉到最右边，这里的像素和right的宽度一致

  6. 设定父元素container的宽度600像素

  7. 用相对定位  position：relative 相对于main   让left向左移动200  让right向右移动200


  8. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
    <style>
    	.header, .footer {
			width: 100%;
			height: 60px;
			background: blue;
		
		}
		.content{
			width: 1000px;
			min-height: 100%;
			background: gray;
			margin: 0 auto;
			text-align: center;
			line-height: 60px;
		}
		.footer{
			clear: both;
		}

		.container{
			width: 600px;
			margin: auto;
			background: yellow;

		}
        

		.main{
			width:100%;
			min-height: 600px;
			background: wheat;
			float: left;
		}

		.left{
			width: 200px;
			min-height: 600px;
			background: lightblue;
			float: left;
			margin-left: -100%;
			position: relative;/*相对定位*/
			left: -200px;
			
		}

		.right{
			width: 200px;
			min-height: 600px;
			background: lightgreen;
			float: left;
			margin-left: -200px;
			position: relative;/*相对定位*/
			right: -200px;
		}
</style>

</head>
<body>
<div class="header">
	<div class="content">头部</div>
</div>

<div class="container">
	
    <div class="main">主体内容</div><!-- 优先渲染 -->
	<div class="left">左边</div>
	<div class="right">右边</div>

</div>

<div class="footer">
	<div class="content">尾部</div>
</div>
	
</body>
</html>

    运行实例 »

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


手写：双飞翼与圣杯布局的最大区别在哪里

图片：20180820184740.jpg


上一条：固定定位图文混排浮动双飞翼圣杯布局总结——2018年8月19日下一条：相对定位实现盒子拼凑一个十字架-----2018年8月16日
float，position: relative，
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多