CSS-8.5-网页布局练习

anh_qwh

于 2019-09-24 21:13:13 发布

阅读量274

点赞数 2

分类专栏： WEB前端 CSS 文章标签：网页布局

本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/101312981

版权

WEB前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

CSS

19 篇文章 0 订阅

订阅专栏

CSS-8.5-网页布局练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页布局</title>
	<style type="text/css">
		#header{
			height: 150px;
		}
		#header .header1{
			height: 100%;
			width: 29%;
			background-color: #ff0;
			margin-right: 1%; 
			float: left;
		}
		#header .header2{
			height: 100%;
			width: 29%;
			background-color:#0ff;
			margin-right:1%;
			float: left; 
		}
		#header .header3{
			height: 100%;
			width: 40%;
			background-color: #f0f;
			float: left;
		}
		#naw{
			height: 50px;
			background-color: #356;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		#body{
			height: 500px;
		}
		#body #left{
			width: 70%;
			float: left;
			height: 100%;
		}
		#body .div5{
			width: 30%;
			height: 100%;
			background-color:#520;
			float: right;
		}
		#body #left .div1{
			height: 49%;
			width: 49%;
			background-color: #741;
			float: left;
			margin-right:1%;
			margin-bottom: 1%;
		}
		#body #left .div2{
			height: 49%;
			width: 49%;
			background-color: #598;
			float: left;
			margin-right: 1%;
			margin-bottom: 1%;
			text-align: center;
			line-height: 250px;
		}
		#body #left .div3{
			height: 50%;
			width: 49%;
			background-color: #336;
			float: left;
			clear: both;
			margin-right:1%;
		}
		#body #left .div4{
			height: 50%;
			width: 49%;
			background-color: #881;
			float: left;
			margin-right: 1%;
		}
		@keyframes bounce{
			0%{
				top:0;
				text-shadow: #00f 0 0 1px;
			}
			100%{
				top: -15px;
				text-shadow: #0ff 0 15px 2px;
			}
		}
		#body #left .div2 .span1{
			color: #941;
			position: relative;
			animation: bounce 1.2s ease infinite alternate;
		}
		#body #left .div2 .span2{
			color: #022;
			position: relative;
			animation: bounce 1.2s ease 0.3s infinite alternate;
		}
		#body #left .div2 .span3{
			color: #308;
			position: relative;
			animation: bounce 1.2s ease 0.8s infinite alternate;
		}
	</style>
</head>
<body>
	<div id="header">
		<div class="header1"></div>
		<div class="header2"></div>
		<div class="header3"></div>
	</div>
	<div id="naw"></div>
	<div id="body">
		<div id="left">
			<div class="div1"></div>
			<div class="div2">
				<span class="span1">跳</span>
				<span class="span2">起</span>
				<span class="span3">来</span>
			</div>
			<div class="div3"></div>
			<div class="div4"></div>
		</div>
		<div class="div5"></div>
	</div>
</body>
</html>

效果动态图
在这里插入图片描述

anh_qwh

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS-8.5-网页布局练习

CSS-8.5-网页布局练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页布局</title> <style type="text/css"> #header{ height: 150px; }...
复制链接

扫一扫

专栏目录