我是一个简易盒子精

最新推荐文章于 2022-06-26 10:02:10 发布

望极天涯

最新推荐文章于 2022-06-26 10:02:10 发布

阅读量373

点赞数

分类专栏： html 文章标签： css 布局

本文链接：https://blog.csdn.net/u011884100/article/details/83715112

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我是一个盒子精


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子精</title>
	<style>
		*{padding: 0;
			margin:0;}
		.hezijing{width: 1226px;height: 100%;}
			body{font-size: 18px;}
		.top{height: 40px;padding-right:0px;}
			.box{width: 375px;height: 40px;background-color: rgb(254,3,21);display: inline-block;	float: left;}
			.box2{width: 120px;height: 40px;background-color:rgb(12,128,21);display: inline-block;float: right;}	
			.box1{width: 140px;height: 40px;background-color: rgb(255,98,68);display: inline-block;float: right;margin-right:15px;}
				
		.top2{height: 110px;}
			.logo{margin-top: 22px;height: 55px;width:66px;display: inline-block;float: left;background-color: rgb(238,120,237);}
			.daohang{height: 110px;width:853px;display: inline-block;float: left;background-color:rgb(221,160,222);}
			.sosuo{margin-top: 25px;height: 50px;width:296px;display: inline-block;float: right;background-color: rgb(206,132,61);}
		.top3{height: 460px;width: 1226px;padding-right:0px;}
			.xuanze{height: 460px;width:234px;display: inline-block;float: left;background-color: rgb(238,130,237);}
			.lunbo{height: 460px;width:992px;display: inline-block;float: right;background-color: rgb(69,130,180);}
		.top4{height: 170px;width: 1226px;padding-right:0px;padding-top: 14px;}
			.xuanze1{height: 170px;width:234px;display: inline-block;float: left;background-color: rgb(206,132,61);}
			.lunbo2{height: 170px;width:316px;display: inline-block;float: right;background-color: rgb(254,3,21);margin-left: 14px}
		.top5{height: 25px;width: 1226px;padding-right:0px;padding-top: 40px;}
			.shangou{height: 25px;width:140px;display: inline-block;float: left;}
			.shangou1{height: 25px;width:70px;display: inline-block;float: right;background-color: rgb(9,128,126);margin-left: 14px}
		.top6{height: 340px;width: 1226px;padding-right:0px;padding-top: 10px;}
			.aaa{height: 340px;width:234px;display: inline-block;float: left;background-color:rgb(128,128,128);}
			.lunbo3{height:340px;width:234px;display: inline-block;float: right;background-color: rgb(254,17,146);margin-left: 14px}

	</style>
</head>
<body>
	<div class='hezijing'>

	<div class='top'>
		<span class="box">导航条</span><span class='box2'>购物车</span><span class='box1'>用户登录</span>	
	</div>
	<div class="top2">
		<span class="logo">logo</span><span class="daohang">导航</span><span class="sosuo">搜索</span>
	</div>
	<div class="top3">
		<span class="xuanze">内容选择列表</span><span class="lunbo">轮播</span>
	</div>
	<div class="top4">
		<span class="xuanze1">内容选择列表</span><span class="lunbo2">轮播</span><span class="lunbo2">轮播</span><span class="lunbo2">轮播</span>
	</div>
	<div class="top5">
		<span class="shangou">开始闪购</span><span class="shangou1">轮播</span>
	</div>
	<div class="top6">
		<span class="aaa">内容选择列表</span><span class="lunbo3">轮播</span><span class="lunbo3">轮播</span><span class="lunbo3">轮播</span><span class="lunbo3">轮播</span>
	</div>
	
</div>
</body>
</html>

望极天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我是一个简易盒子精

我是一个盒子精&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;盒子精&lt;/title&gt; &lt;style&gt; *{padding: 0; margin:0;} .hezijing{width: 1226px;
复制链接

扫一扫

专栏目录