小米盒子布局练习（html）

最新推荐文章于 2024-05-31 17:22:45 发布

周百万.

最新推荐文章于 2024-05-31 17:22:45 发布

阅读量1k

点赞数 7

分类专栏： html CSS 编程文章标签： sublime text css html5

本文链接：https://blog.csdn.net/m0_45142186/article/details/119351983

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

编程

19 篇文章 1 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

简单的小米页面布局，希望能帮助正在自学的你！

效果图如上所示！

代码入下！

<head>
	<meta charset="UTF-8">
	<title>小米盒子加强版</title>
	<style>
	.box {
		width: 1160px;
		height: 515px;
		margin: 10px auto;
	}

	.left {
		float:left;
		width: 300px;
		height: 515px;
		background-color: skyblue;
	}

	.right {
		float:left;
		width: 860px;
		height: 515px;
		background-color:#f5f5f5;
	}
	
	.right>div {
		width: 200px;
		height: 250px;
		background-color:#eeeddd;
		float:left;
		margin: 0 0 15px 15px;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="left"></div>
		<div class="right">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</div>
</body>

周百万.

关注

7
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
小米盒子布局练习（html）

简单的小米页面布局，希望能帮助正在自学的你！效果图如上所示！代码入下！<head> <meta charset="UTF-8"> <title>小米盒子加强版</title> <style> .box { width: 1160px; height: 515px; margin: 10px auto; } .left { float:left; width: 300px; he..
复制链接

扫一扫