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

Home > List of blog posts > 前端基础-第六天作业-0817

Blogger Information

Blog 55

fans 0

comment 0

visits 50483

Special Recommendation

More>

Related recommendations

实例

<!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则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.

先要将wrap放在前面，把main内容包含，优先渲染
将wrap、left、right浮动起来脱离文档流
将wrap中width100%充满container把left和right挤走
让left margin-left：-100%拉到最左边
让right margin-left：200px 拉到最右边，这里的像素和right的宽度一致
给main这个块设margin：0 200px；左右挤一挤，挤出左右宽的值

实例

<!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属性，看起来就是一个酒杯一样

设定main的width：100%，撑开页面
设定酒杯的两边的把手，设定宽200像素，最小高度min-height
将main，left，right 向左浮动起来
让left margin-left：-100%拉到最左边
让right margin-left：200px 拉到最右边，这里的像素和right的宽度一致
设定父元素container的宽度600像素
用相对定位 position：relative 相对于main 让left向左移动200 让right向右移动200

实例

<!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>

运行实例 »

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

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

图片：

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

PHP私有化，通过公共接口set()和get()进行访问-0829

2018-09-01 15:03:40