小米布局练习HTML

最新推荐文章于 2024-11-04 15:14:15 发布

周百万.

最新推荐文章于 2024-11-04 15:14:15 发布

阅读量276

点赞数 1

分类专栏： html 文章标签： c++ 开发语言 c#

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

版权

html 专栏收录该内容

37 篇文章 20 订阅

订阅专栏

<title>小米布局三</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
			/*大盒子*/
		.box {
			width: 1534px;
			height: 769px;
			/*background-color: deeppink;*/
			margin: 10px auto;

		}
		/*左边大盒子*/
		.box .left {
			width: 294px;
			height: 769px;
			background-color: skyblue;
			float:left;
			margin-right: 16px;
			background:url(images/bridge.jpg) no-repeat  center;
			background-size:1169px auto ;
		}
		/*右边大盒子*/
		.box .right {
			width: 1224px;
			height: 769px;
/*			background-color: violet;
*/			float:left;
/*			background:url(images/bgi.jpg) no-repeat center;
			background-size: 200% auto;
*/		}
		/*右边大盒子里面的盒子*/

		.box .right .middle1 {
			width: 1225px;
			height: 378px;
			/*background-color: black;*/
		}
		.box .right .middle2 {
			width: 1225px;
			height: 378px;
			/*background-color: yellow;*/
			margin-top: 13px;
		}
		/*上边盒子里面的盒子*/
		.box .right .middle1 span {
			margin-right: 16px;
			float:left;
			width: 294px;
			height: 376px;
			background-color: orange;
		}
		.box .right .middle1 .last {
			margin-right:0px;

		}
		/*下边盒子里面的盒子*/
		.box .right .middle2 span {
			margin-right: 16px;
			float:left;
			width: 294px;
			height: 376px;
			background-color: orange;
		}
		.box .right .middle2 .last {
			margin-right:0px;
			background:url(images/sky.jpg) no-repeat center;
			background-size: 200% auto;			
		}
		.box .right .middle2 .then {
			background:url(images/7.jpg) no-repeat center;
			background-size: 200% auto;			
		}
		.box .right .middle2 .next {
			background:url(images/6.jpg) no-repeat center;
			background-size: 200% auto;			
		}		
		.box .right .middle2 .first {
			background:url(images/boat.jpg) no-repeat center;
			background-size: 200% auto;			
		}	
		/*上边盒子里面的盒子 第一个	*/
		.box .right .middle1 .first {
			background:url(images/1.jpg) no-repeat left center;
			background-size: 200% auto;			
		}
		/*上边盒子里面的盒子 第二个		*/
		.box .right .middle1 .next {
			background:url(images/2.jpg) no-repeat left center;
			background-size: 170% auto;			
		}	
		/*上边盒子里面的盒子   第三个	*/
		.box .right .middle1 .then {
			background:url(images/3.jpg) no-repeat right center;
			background-size: 120% auto;			
		}	
		/*上边盒子里面的盒子 第四个	*/
		.box .right .middle1 .last {
			background:url(images/4.jpg) no-repeat center;
			background-size: 100% auto;			
		}		

	</style>
</head>
<body>
	<div class="box">
		<div class="left"></div>
		<div class="right">
			<div class="middle1">
				<span class="first">1</span>
				<span class="next">2</span>
				<span class="then">3</span>
				<span class="last">4</span>
			</div>
			<div class="middle2">
				<span class="first">5</span>
				<span class="next">6</span>
				<span class="then">7</span>
				<span class="last">8</span>
			</div>
		</div>
	</div>
</body>
</html>

效果图如下，图片url()里面的自己更改！

效果图如下