制作天猫界面的简易框架

最新推荐文章于 2022-06-16 18:59:38 发布

shiyu18

最新推荐文章于 2022-06-16 18:59:38 发布

阅读量2.3k

点赞数 6

分类专栏： css盒模型练习 padding的使用简易框架文章标签： css html5

本文链接：https://blog.csdn.net/shiyu18/article/details/109569781

版权

padding的使用同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

css盒模型练习

1 篇文章 1 订阅

订阅专栏

简易框架

1 篇文章 0 订阅

订阅专栏

学习浮动和盒模型之后练习制作天猫界面简易框架
原网页：
在这里插入图片描述
要求：实现布局，实现简易框架
代码实现：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	.box{
		height:40px;
		width:100%;
	}
	.box-top{
		height:40px;
		width:1300px;
		background:#ccccff;
		margin:0 auto;
	}
	.box2{
		width:1300px;
		height:80px;
		margin:0 auto;
		padding-top:50px;
		background:#ccffcc;
	}
	.box-input{
		width:300px;
		height:30px;
		margin:0 0 0 500px;
		font-size:18px;
	}
	.box3{
		width:1300px;
		height:500px;
		margin:0 auto 100px;
		background:#cc66ff;
	}
	.box-ul{
		width:205px;
		height:500px;
		float:left;
		background:rgba(226,52,222,0.6);
	}
	.box4{
		height:330px;
		width:1300px;
		background:#99ccff;
		margin:0 auto;
	}
	.dis-a{
		width:645px;
		height:330px;
		float:left;
	}
	.dis-1{
		width:290px;
		height:330px;
		float:left;
		margin-right:10px;
		background:#ff6666;
	}
	.dis-2{
		width:345px;
		height:160px;
		float:left;
		background:#ff6666;
		margin-bottom:10px;
	}
	.dis-3{
		margin:0;
	}
	.dis-b{
		float:right;
	}
  </style>
 </head>
 <body>
	<!-- 天猫官网首页布局 -->

	<!-- 顶部导航栏区域 -->
	<div class="box1">
		<div class="box-top">顶部导航栏区域</div>
	</div>
	<!-- 顶部导航栏区域end -->


	<!-- 搜索框区域 -->
	<div class="box2">
		<form action="">
			<input type="text" class="box-input" placeholder="搜索框区域" />
		</form>
	</div>
	<!-- 搜索框区域end -->


	<!-- 轮播图区域 -->
	<div class="box3">
		<span>轮播图区域</span>
		<div class="box-ul">轮播图遮盖扩展列表</div>
	</div>
	<!-- 轮播图区域end -->


	<!-- 热卖广告 -->
	<div class="box4">
		<div class="dis-a">
			<div class="dis-1">热卖广告</div>
			<div class="dis-2">热卖广告</div>
			<div class="dis-2 dis-3">热卖广告</div>
		</div>
		<div class="dis-a dis-b">
			<div class="dis-1">热卖广告</div>
			<div class="dis-2">热卖广告</div>
			<div class="dis-2 dis-3">热卖广告</div>
		</div>
	</div>
	<!-- 热卖广告end -->
 </body>
</html>

实现效果：
在这里插入图片描述
总结：这里需要用到外间距（margin:）内间距（padding:）和左右浮动对齐（float:left/right）。也需要对css（层叠样式表的理解）。

shiyu18

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
14
评论
制作天猫界面的简易框架

学习浮动和盒模型之后练习制作天猫界面简易框架原网页：要求：实现布局，实现简易框架代码实现：<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ height:40px; width:100%; } .box-top{ heig
复制链接

扫一扫