前端学习笔记二：CSS（5）布局小练习

最新推荐文章于 2023-01-12 21:34:24 发布

大一哟

最新推荐文章于 2023-01-12 21:34:24 发布

阅读量161

点赞数

分类专栏：学习笔记文章标签： html css

本文链接：https://blog.csdn.net/Reiuji_Utsuho/article/details/107302189

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

终于开始练习了！~ ~~（才不是因为可以不用讲解了才高兴的）~~

由于是练习，先放运行结果（或者说是题目）：
上半部分：
在这里插入图片描述
下半部分：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>布局练习</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			
		}
		#header{
			height: 50px;
			background-color: #b3330b;
		}
		#header .head{
			height: 50px;
			width: 1005px;
			background-color: #00BFFF;
			margin: auto;
		}
		#banner{
			height: 500px;
			background-color: #008000;
		}
		#category{
			width: 1005px;
			height: 200px;
			background-color: #2D9CE1;
			margin: auto;
		}
		#category .item{
			float: left;
			border-right: dashed 2px #808080;
			width: 132px;
			height: 165px;
			padding-left: 20px;
			padding-right: 20px;
			padding-top: 10px;
			padding-bottom: 25px;
			background-color: #56E1B8;
		}
		#category .item.first{
			padding-left: 0;
		}
		#category .item.last{
			padding-right: 0;
			border-right: none;
		}
		#case{
			background-color: #c5c5c5;
			width: 1005px;
			height: 450px;
			margin: auto;
		}
		#case .title{
			height: 110px;
			width: 810px;
			background-color: #8DE34B;
			margin: auto;
			line-height: 110px;
		}
		#case .frame{
			height: 270px;
			width: 810px;
			background-color: #9370DB;
			margin: auto;
			overflow: auto;
		}
		#case .frame.item{
			height: 260px;
			width: 260px;
			float: left;
			margin-top: 6px;
			margin-left: 7.5px;
			margin-right: 7.5px;
			background-color: #B3330B;
		}
		#case .frame.item.first{
			margin-left: 0;
		}
		#case .frame.item.last{
			margin-right: 0;
		}
		#case .bottom{
			height: 70px;
			width: 810px;
			margin: auto;
			background-color: #FF0000;
			text-align: center;
		}
		#client{
			width: 1005px;
			height: 300px;
			margin: auto;
			background-color: #FFA500;
		}
		#client .title{
			width: 825px;
			height: 100px;
			line-height: 100px;
			margin: auto;
			background-color: aliceblue;
		}
		#client .frame{
			width: 830px;
			height: 150px;
			margin: auto;
			background-color: antiquewhite;
		}
		#client .frame.item{
			width: 160px;
			height: 150px;
			float: left;
			border: solid 1px #cccccc;
			margin-left: 2.5px;
			margin-right: 2.5px;
			background-color: aqua;
		}
		#client .frame.item.first{
			margin-left: 0;
		}
		#client .frame.item.last{
			margin-right: 0;
		}
		#client .bottom{
			height: 50px;
			width: 830px;
			margin: auto;
			background-color: aquamarine;
		}
	</style>
	<body>
		<div id="header">
			<div class="head">
				
			</div>
		</div>
		<div id="banner">
			
		</div>
		<div id="category">
			<div class="item first">
				
			</div>
			<div class="item">
				
			</div>
			<div class="item">
				
			</div>
			<div class="item">
				
			</div>
			<div class="item">
				
			</div>
			<div class="item last">
				
			</div>
		</div>
		<div id="case">
			<div class="title">
				Case 案例
			</div>
			<div class="frame">
				<div class="frame item first">
					
				</div>
				<div class="frame item">
					
				</div>
				<div class="frame item last">
					
				</div>
			</div>
			<div class="bottom">
				查看更多
			</div>
		</div>
		<div id="client">
			<div class="title">
				Client 客户
			</div>
			<div class="frame">
				<div class="frame item first">
					
				</div>
				<div class="frame item">
					
				</div>
				<div class="frame item">
					
				</div>
				<div class="frame item">
					
				</div>
				<div class="frame item last">
					
				</div>
			</div>
			<div class="bottom">
				
			</div>
		</div>
	</body>
</html>

大一哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记二：CSS（5）布局小练习

终于开始练习了！~ （才不是因为可以不用讲解了才高兴的）由于是练习，先放运行结果（或者说是题目）：上半部分：下半部分：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>布局练习</ti
复制链接

扫一扫