case 4

最新推荐文章于 2021-02-27 08:41:40 发布

爱小黄

最新推荐文章于 2021-02-27 08:41:40 发布

阅读量650

点赞数

分类专栏： JavaWeb 文章标签： css

本文链接：https://blog.csdn.net/weixin_44110581/article/details/112234038

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>blog</title>
		<style type="text/css">
			/* 渐变 */
			.box1{
				height: 500px;
				width: 500px;
				border:1px solid red;
				background: linear-gradient(orange,green);
				/* background: linear-gradient(to left top,red,yellow); */
				/* background: linear-gradient(to top,red,yellow); */
				/* background: linear-gradient(45deg,red,yellow); */
				/*从 12点开始 顺时针角度  */
				/* rgb(12,12,12,0.4) 透明度 */
				/* background: radial-gradient(black 20%,red,yellow,black); */
				/* at top/at left */
				box-shadow: 5px 5px 115px;
				box-shadow: 5px 5px 2px #e4e4e4;/* 设置阴影和颜色 */
				/* inset 向里的阴影 
				
				h-shadow	必需的。水平阴影的位置。允许负值
				v-shadow	必需的。垂直阴影的位置。允许负值
				blur	可选。模糊距离
				spread	可选。阴影的大小
				color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
				inset	可选。从外层的阴影（开始时）改变阴影内侧阴影
				
				*/
			}
		</style>
	</head>
	<body>
		<div class="box1">
		</div>
	</body>
</html>

css

/* 初始化 */
* {
	padding: 0;
	margin: 0;
}

.img {
	vertical-align: bottom;
}

/* 元素选择器 */
li {
	/* 列表样式 */
	list-style: none;
}

a {
	/* 下划线 */
	text-decoration: none;
}

/* 公共样式 */
.w {
	width: 1140px;
	margin: 0 auto;
}

.bd {
	border: 1px solid red;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}

.clearfix::after {
	clear: both;
}

/* 特殊 */
header {
	width: 100%;
	position: fixed;
	background-color: white;
	z-index: 100;
	top: 0;
	box-shadow: 0px -11px 36px;
	/* inset 向里的阴影 */
}

.logo {
	padding-top: 14px;
	padding-bottom: 25PX;
	margin-right: 152px;
}

/* 解决 ul和a的问题*/
.current {
	border-top: 3px solid #eb5846;
}

.navigetion {}

.navigetion>li {
	border-top: 3px solid transparent;
}

.navigetion a {
	color: black;
	display: block;
	font-size: 8px;
	line-height: 83px;
	padding: 0 24px;
}

.navigetion>li:hover {
	/* 限制为子元素 */
	background: linear-gradient(#ecedf2, #ffffff);
	color: #fb7a43;
	border-top: 3px solid #eb5846;
}

.navigetion a:hover {
	color: #fb7a43;
}

.navigetion>li:hover .subnav {
	/* 限制为子元素 */
	display: block;
	position: absolute;
}

.subnav a {
	color: white;
}

.subnav li {
	background-color: #fb7a43;
	display: block;
}

.subnav {
	display: none;
}

.subnav>li:hover {
	background-color: #fa6523;
}

.subnav a:hover {
	color: white;
}

.friend {
	margin-right: 84px;
}

.friend a {
	display: block;
	background: url("../images/s-icons.png") -242px -7px;
	/* 移动背景 上 加 下减，左加 右减 */
	width: 23px;
	height: 22px;
	margin: 29px 0 32px 7px;
}

.friend a:nth-child(2) {
	/* 22+7= 29  -5 */
	background: url("../images/s-icons.png") -269px -7px;
}

.friend a:nth-child(3) {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -295px -7px;
}

.friend a:nth-child(4) {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -320px -7px;
}

.friend a:nth-child(5) {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -345px -7px;
}

.friend a:nth-child(6) {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -370px -7px;
}

.friend a:nth-child(1):hover {
	/* 22+7= 29  -5 */
	background: url("../images/s-icons.png") -242px -46px;
}

.friend a:nth-child(2):hover {
	/* 22+7= 29  -5 */
	background: url("../images/s-icons.png") -269px -46px;
}

.friend a:nth-child(3):hover {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -295px -46px;
}

.friend a:nth-child(4):hover {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -320px -46px;
}

.friend a:nth-child(5):hover {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -345px -46px;
}

.friend a:nth-child(6):hover {
	/* 22+7= 29 */
	background: url("../images/s-icons.png") -370px -46px;
}

/* main */
.main {
	padding-top: 83px;
	position: relative;
}

.bg {
	height: 520px;
	background: url(../images/bg.jpg) no-repeat center;
	background-color: #e0e0e0;
	background-size: 1140px;
	position: relative;
}
.main .bg .w{
	position: relative;
}
.banner {
	width: 51px;
	height: 27px;
	background: #ffffff;
	margin: 398px 8px 15px 0px;

}
.banner:nth-child(1) {
	background-color: #ed5844;
}
.banner:hover {
	background-color: #ed5844;
}


.banner:nth-child(1)::before {
	content: "";
	width: 315px;
	height: 254px;
	background: url(../images/banner_l_03.png) no-repeat;
	position: absolute;
	top: 98px;
}

.banner::after {
	content: "";
	width: 900px;
	height: 543px;
	background-size: 645px 383px;
	position: absolute;
	top: 70px;
	left: 600px;
}

.banner:nth-child(1)::after {
	background: url(../images/slide1.png) no-repeat;
	background-size: 645px 383px;
}

.banner:nth-child(2):hover::after{
	background: url(../images/slide2.png) no-repeat;
	background-size: 645px 383px;
}
.banner:nth-child(3):hover::after{
	background: url(../images/slide3.png) no-repeat;
	background-size: 645px 383px;
}
.banner:nth-child(4):hover::after{
	background: url(../images/slide4.png) no-repeat;
	background-size: 645px 383px;
}
.events {
	margin-top: 45px 0 56px 0;
	padding-bottom: 75px;
	border-bottom: 1px double #dddddd;
	/* double border-style属性设置一个元素的边框的样式 为双线*/
	border-width: 3px;
	/* 双线的宽度 */
	position: relative;
}

.lorem {
	height: 123px;
	width: 354px;
	float: left;
	margin: 25px 26px 0 0;
	background-color: #f5f5f5;
	box-shadow: 5px 5px 2px #e4e4e4;
	/* 设置阴影和颜色 */

}

.lorem::before {
	content: "";
	width: 67px;
	height: 123px;
	background: url(../images/s-icons.png) no-repeat 20px 45px;
	position: absolute;
	background-color: #ed5844;
}

.lorem p {
	padding-left: 90px;
	color: #9e9e9e;
	font-size: 8px;
	line-height: 18px;
}

.lorem h4 {
	margin-top: 13px;
	padding-left: 90px;
	line-height: 36px;
}

.lorem:nth-child(2)::before {
	background-position: -68px 45px;
}

.lorem:nth-child(3)::before {
	background-position: -145px 45px;
}

.lorem:nth-child(4)::before {
	background-position: 20px -75px;
}

.lorem:nth-child(5)::before {
	background-position: -64px -75px;
}

.lorem:nth-child(6)::before {
	background-position: -143px -75px;
}

/* buy */
.buy {
	position: relative;
	margin-bottom: 51px;
}

.hi {
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
	background-color: #eeeeee;
	margin-top: 56px;
	height: 132px;
}

.hi::before {
	content: "";
	height: 132px;
	position: absolute;
	border-right: 5px solid #ed5842;
	border-radius: 0 2px 2px 0;
	/* 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
				但是，如果你要在四个角上一一指定，可以使用以下规则：
				四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
				三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
				两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
				一个值： 四个圆角值相同 */
}

.hi h4 {
	padding-top: 36px;
	padding-left: 35px;
	font-size: 11px;
	line-height: 50px;
}

.hi p {
	padding-left: 35px;
	font-size: 8px;
}

.hi::after {
	content: "BUY NOW !";
	color: white;
	padding: 23px 17px 22px 49px;
	background: url(../images/windows.png) no-repeat;
	background-position: 12px;
	position: absolute;
	background-color: #ed5844;
	border: 3px solid #ed5844;
	border-radius: 3px;
	right: 45px;
	top: 30px;
}

.portfold {
	margin-bottom: 43px;
	position: relative;
}

.portfold h4::after {
	content: "";
	color: white;
	width: 987px;
	border-top: 2px solid #dcdcdc;
	border-bottom: 2px solid #dcdcdc;
	position: absolute;
	left: 150px;
	top: 8px;
}

.design {
	position: relative;
	height: 526px;
	margin-bottom: 56px;
	border-bottom: 1px double #dddddd;
	/* double border-style属性设置一个元素的边框的样式 为双线*/
	border-width: 3px;
	/* 双线的宽度 */
}

.iam::before {
	content: "WEB DESIGN";
	color: white;
	width: 113px;
	background-color: #ed5844;
	position: absolute;
	text-align: center;
	line-height: 28px;
	top: 296px;
	margin-left: 13px;

}

.iam {
	width: 275px;
	background-color: #eeeeee;
	margin-right: 12px;
	float: left;
}

.iam:nth-child(4) {
	margin-right: 0px;
}

.iam::after {
	content: "";
	width: 27px;
	height: 27px;
	background: url(../images/s-icons.png) no-repeat -242px -80px;
	position: absolute;
	top: 297px;
	margin-left: 203px;
}

.iam img {
	margin: 14px;
	width: 247px;
	height: 310px;
}

.iam h4::before {
	content: "";
	width: 27px;
	height: 27px;
	background: url(../images/s-icons.png) no-repeat -273px -80px;
	position: absolute;
	top: 297px;
	margin-left: 222px;
}

.iam h4 {
	line-height: 24px;
	padding-bottom: 12px;
	padding-left: 15px;
}

.iam p {
	line-height: 26px;
	padding-bottom: 12px;
	padding-left: 15px;
	color: #b3b3b3;
}

.subscribe {
	position: relative;
	margin-bottom: 52px;
}

.subscribe::after {
	content: "";
	background: url(../images/mail.png) no-repeat 40px 50px;
	position: absolute;
	height: 100px;
	width: 100px;
	top: 0;
	right: 0;
}

.subscribe>.hi::after {
	content: "";
	background: url(../images/mail.png);
	position: absolute;
	border: 0px solid #ed5844;
	border-top: 136px solid #ed5844;
	border-left: 89px solid transparent;
	top: 0;
	right: 0;
}

.bt {}

.bloggy {
	height: 577px;
	position: relative;
}

.bloggy .just::before {
	content: "";
	width: 42px;
	height: 41px;
	background: url(../images/s-icons.png) no-repeat -240px -120px;
	position: absolute;
	top: 269px;
	margin-left: 253px;
}

.bloggy .just {
	margin-top: 34px;
	margin-right: 40px;
}

.bloggy .just::after {
	content: "";
	width: 42px;
	height: 41px;
	background: url(../images/s-icons.png) no-repeat -290px -120px;
	position: absolute;
	top: 269px;
	margin-left: 213px;
}

.bloggy .just img {}

.bloggy .just h4 {
	line-height: 50px;
	padding-bottom: 12px;
	border-bottom: 2px solid #cccccc;
	margin-bottom: 26px;
}

.bloggy h4::after {
	left: 120px;
	width: 632px;
}

.bloggy .just p {
	width: 330px;
	line-height: 26px;
	border-bottom: 2px solid #cccccc;
	padding-bottom: 26px;
	margin-bottom: 36px;
	color: #b3b3b3;
}

.bloggy .just a {
	color: #000000;
}

.bloggy .just a::after {
	content: "";
	width: 13px;
	height: 12px; 
	background: url(../images/s-icons.png) no-repeat -295px -183px;
	background-color: #393939;
	position: absolute;
	margin-top: 7px;
	margin-left: 7px;
}

.test {
	width: 373px;
}

.test h4::after {
	left: 130px;
	width: 233px;
}

.very {
	height: 109px;
	margin-top: 39px;
	background: url(../images/t1.jpg) no-repeat;
	background-size: 86px 109px;
	padding-left: 101px;
}

.very:nth-child(4) {
	margin-top: 11px;
	background: url(../images/p3.jpg) no-repeat;
	background-size: 86px 109px;

}

.test .very h4 {

	color: #565656;
	font-size: 12px;
	line-height: 23px;
}

.test .very a {
	color: red;
	font-size: 8px
}

.test .very>p {
	color: #848484;
	font-size: 7px;
	line-height: 22px;
}

.test>p {
	padding-left: 27px;
	font-size: 8px;
	line-height: 22px;
	color: #a9aaaa;
}

.test>p::before {
	content: "";
	width: 20px;
	height: 31px;
	background: url(../images/quotes.png) no-repeat;
	position: absolute;
	margin-top: 7px;
	left: 0px;
}

/* footer */
footer {
	padding-top: 31px;
	background-color: #373737;
}

.foot_up {
	padding-left: 14px;
	height: 273px;
}

.foot_up h4 {
	font-size: 13px;
	color: white;
	padding-left: 14px;
	margin-bottom: 44px;
}

.foot_up h4::after {
	content: '';
	position: absolute;
	margin-right: 30px;
	top: 20px;
	left: 0px;
	height: 2px;
	width: 133px;
	margin-top: 18px;
	background-color: #060608;
}

.STUDEON {
	position: relative;
	width: 253px;
}

.foot_up p {
	color: #9c9da1;
	margin-top: 19px;
	font-size: 7px;
	line-height: 25px;
}

.TAGS {
	position: relative;
	width: 286px;
}

.TAGS a {
	background-color: #221e22;
	float: left;
	color: #999a9e;
	font-size: 9px;
	padding: 14px 10px;
	margin-right: 3px;
	margin-bottom: 4px;
}

.TAGS a:nth-child(6) {
	margin-right: 20px;

}

.LATEST {
	width: 286px;
	position: relative;
}

.bird::before {
	content: "";
	width: 17px;
	height: 15px;
	background: url(../images/tw.png) no-repeat;
	position: absolute;
	margin-top: 7px;
	left: 0px;
}

.bird {
	width: 200px;
	padding-left: 31px;
}

.bird p {
	display: inline;
}

.bird a {
	display: inline;
	font-size: 7px;
	color: #d3d3d3;
}

.bird h5 {
	font-size: 10px;
	color: white;
	line-height: 22px;
}

.FLICKR {
	position: relative;
	width: 250px;
}

.FLICKR img {
	float: left;
	margin: 0 3px 3px 0;
}

.foot_butto {
	height: 52px;
	background-color: #232323;
	position: relative;
}
.foot_butto .w{
	position: relative;
}
.foot_butto .logo {
	position: absolute;
	padding: 10px 0;
	top: -1px;
}
.text {
	position: absolute;
	right: 60px;
}
.foot_butto p {
	color: white;
	line-height: 52px;
	display: inline;
}
.foot_butto .red {
	color: red;
}
.move-top{
	margin-top: 20px;
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/onecss.css" />
		<meta content="width=device-width, initial-scale=1.2, maximum-scale=2, user-scalable=2" name="viewport">
	</head>
	<body >
		<header style="min-width:1140px;">
			<div class="w clearfix">
				<div class="logo fl"><img src="images/logo.png" alt=""></div>
				<!-- 无序列表 -->
				<ul class="navigetion fl">
					<li class="fl current" style="border-top: 3px solid #eb5846; background: linear-gradient(#ecedf2,#ffffff);"><a
						 href="">Home</a></li>
					<li class="fl "><a href="">About</a>
						<!-- 二级导航 -->
						<ul class="subnav">
							<li><a href="">Shortcodes </a></li>
							<li><a href="">Typography</a></li>
							<li><a href="">Columns </a></li>
						</ul>
					</li>
					<li class="fl"><a href="">Portfolio</a>
					<li class="fl"><a href="">Features</a>
						<!-- 二级导航 -->
						<ul class="subnav">
							<li><a href="">Pricing Plans</a></li>
							<li><a href="">Alerts</a></li>
							<li><a href="">Services </a></li>
							<li><a href="">粉丝专区 </a></li>
							<li><a href="">荣誉之旅 </a></li>
							<li><a href="">联系我们 </a></li>
							<li><a href="">UC闪屏 </a></li>
						</ul>
					</li>
					<li class="fl"><a href="">Blog</a></li>
					<li class="fl"><a href="">Contact</a></li>
				</ul>
				<div class="friend fr">
					<a href="" class="fl"></a>
					<a href="" class="fl"></a>
					<a href="" class="fl"></a>
					<a href="" class="fl"></a>
					<a href="" class="fl"></a>
					<a href="" class="fl"></a>
				</div>
			</div>
		</header>
		<div class="main clearfix">
			<div class="bg">
				<div class="w">
					<div class="banner fl"></div>
					<div class="banner fl"></div>
					<div class="banner fl"></div>
					<div class="banner fl"></div>
				</div>
			</div>
			<div class="events w clearfix">
				<div class="lorem ">
					<h4>EVENTS PLANNING</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
				</div>
				<div class="lorem">
					<h4>MASTERING DESIGN</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
				</div>
				<div class="lorem">
					<h4>EXPERT DEVELOPERS</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
				</div>
				<div class="lorem">
					<h4>ATTENSION TO DETAILS</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
				</div>
				<div class="lorem">
					<h4>ANOTHER COOL SERVICE.
					</h4>
					<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
				</div>
				<div class="lorem">
					<h4>EVENTS PLANNING</h4>
					<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
				</div>
			</div>
			<div class="buy w">
				<div class="hi">
					<h4>HI THERE. I AM A THEME, WITH ATTITUDE. I AM ALSO RESPONSIVE, EASY DO EDIT. WHY DON'T YOU TRY ME ?</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis
						nulla vel dolor ultrices sit amet.</p>
				</div>
			</div>
			<div class="portfold w">
				<h4>THE PORTFOLIO</h4>
			</div>
			<div class="design w clearfix">
				<div class="iam ">
					<img src="images/p1.jpg" alt="">
					<h4>I AM AN AMAZING PROJECT</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
				</div>
				<div class="iam ">
					<img src="images/p2.jpg" alt="">
					<h4>I AM AN AMAZING PROJECT</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
				</div>
				<div class="iam ">
					<img src="images/p3.jpg" alt="">
					<h4>I AM AN AMAZING PROJECT</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
				</div>
				<div class="iam ">
					<img src="images/p4.jpg" alt="">
					<h4>I AM AN AMAZING PROJECT</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla amet. turpis.</p>
				</div>
			</div>
			<div class="subscribe w">
				<div class="hi">
					<h4>SUBSCRIBE TO OUR NEWSLETTER. WE HATE SPAM AS MUCH AS YOU DO, SO NO WORRIES.</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor blandit nec Quisque quis
						nulla vel dolor ultrices sit amet.</p>
				</div>
			</div>

			<div class="bt w">
				<div class="bloggy portfold clearfix fl ">
					<h4>OUR BLOGGY</h4>
					<div class="just fl">
						<img src="images/b1.jpg" alt="">
						<h4>JUST A COOL BLOG POST TITLE HERE.</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit
							amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</p>
						<a href="">Read more </a>
					</div>
					<div class="just fl">
						<img src="images/b2.jpg" alt="">
						<h4>JUST A COOL BLOG POST TITLE HERE.</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit
							amet. turpis, ipsum dolor sit amet, consectetur adipiscing elit.</p>
						<a href="">Read more </a>
					</div>
				</div>
				<div class="test portfold fl">
					<h4>TESTIMONIALS</h4>
					<div class="very">
						<h4>VERY PLEASED WITH <br>THE COOL SERVICES PROVIDED.</h4>
						<p>Linda Scott / Webdesigner </p>
						<a href="">http://www.mywebsite.com</a>
					</div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit
						amet. turpis.</p>
					<div class="very">
						<h4>VERY PLEASED WITH <br>THE COOL SERVICES PROVIDED.</h4>
						<p>Linda Scott / Webdesigner </p>
						<a href="">http://www.mywebsite.com</a>
					</div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla vel dolor ultrices blandit nec sit
						amet. turpis.</p>
				</div>
			</div>
		</div>
		<footer>
			<div class="foot_up w">
				<div class="STUDEON fl">
					<h4>
						ABOUT STUDEON
					</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu <br>neque, at convallis est felis.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu <br>neque, at convallis est felis.</p>
				</div>
				<div class="TAGS fl">
					<h4>
						THE TAGS
					</h4>
					<div>
						<a href="">Awesome</a>
						<a href="">Strategy</a>
						<a href="">Photography</a>
						<a href="">Development</a>
						<a href="">Css</a>
						<a href="">photoshop</a>
						<a href="">Html</a>
						<a href="">Awesome</a>
						<a href="">Strategy</a>
						<a href="">Photoshop</a>
						<a href="">Html</a>
					</div>
				</div>
				<div class="LATEST fl">
					<h4>
						LATEST TWEETS
					</h4>
					<div class="bird">
						<p>I like this awesome freebie. Check it out</p>
						<a href="">@http://t.co/9vslJFpW</a>
						<h5>ABOUT 15 MINS</h5>
					</div>
					<div class="bird">
						<p>I like this awesome freebie. Check it out</p>
						<a href="">@http://t.co/9vslJFpW</a>
						<h5>ABOUT 15 MINS</h5>
					</div>
				</div>
				<div class="FLICKR fl">
					<h4>
						FLICKR FEED
					</h4>
					<img src="images/f1.png" alt="">
					<img src="images/f2.png" alt="">
					<img src="images/f3.png" alt="">
					<img src="images/f4.png" alt="">
					<img src="images/f1.png" alt="">
					<img src="images/f4.png" alt="">
				</div>
			</div>		
			<div class="foot_butto">
				<div class="w">
					<div class="logo fl"><img src="images/logo.png" alt=""></div>
					<div class="text fl">
						<p fr>Copyright
							<span style="font-family:Arial;">&copy; </span>2015 All rights Reserved | Template
						</p>
						<p class="red fr"> by  W3layouts</p>
					</div>
					
				</div>
				<div class="fr move-top"><img src="images/move-top.png" alt=""></div>
			</div>
		</footer>
	</body>
</html>

<!-- 红盒用尾元素
红河是父
尾是子
双边框: double 
边框加右圆角:伪元素
border-redius;

文字后面的线 伪元素 定位

三角形伪元素 长方形div:背景 -->