小米官网内容部分

最新推荐文章于 2024-09-15 23:59:26 发布

前端新手-

最新推荐文章于 2024-09-15 23:59:26 发布

阅读量55

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/fengyinanp/article/details/133151898

版权

框架构建完成，就可以布局网页的部分内容了，后续可以优化导航栏，轮播图等更加详细进行优化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
         <!-- 内容部分，可以自己更改图片 -->
         <div class="divBody">
			<div class="divTop"></div>
			<div class="divMiddle">
				<span>手机</span>
				<div class="divMore">
					<span>查看更多</span>
					<img src="img/箭头.png">
				</div>
			</div>
			<div class="divBottom">
				<div class="divLeft">
					<img src="img/折叠.jpg">
				</div>
				<div class="divRight">
					<ul>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/1.jpg">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/2.jpg">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/3.jpg">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/4.png">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/5.jpg">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/6.jpg">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/7.png">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop">
								<img src="img/8.png">
								<h3>黑鲨4S</h3>
								<p>磁动力升降肩键</p>
								<span>2699元</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>


/* css样式修改 */
<style type="text/css">
			
			* {
				margin: 0;
				padding: 0;
			}

			.divBody {
				width: 1200px;
				/* 设置居中 */
				margin: 0 auto;
			}

			.divTop {
				/* 设置div的宽高 */
				width: 1200px;
				height: 120px;
				/* 设置背景图片 */
				background-image: url(img/K40.jpg);
				/* 设置背景图片大小 */
				background-size: 100%;
			}

			.divMiddle {
				/* 设置宽高 */
				width: 1200px;
				height: 60px;
				background-color: aliceblue;
				/* 设置文本垂直居中 */
				line-height: 60px;
				/* 设置文字大小 */
				font-size: 24px;
				/* 设置上外边距 */
				margin-top: 10px;
			}

			.divMiddle img {
				width: 20px;
				height: 20px;
				/* 设置图片垂直居中 */
				vertical-align: middle;
			}

			.divMore {
				float: right;
				font-size: 16px;
			}

			.divBottom {
				width: 1200px;
				height: 600px;
			}

			.divLeft {
				width: 200px;
				height: 600px;
				background-color: red;
				float: left;
			}

			.divLeft img {
				width: 200px;
				height: 600px;
			}

			.divRight {
				width: 1000px;
				height: 600px;
				/* background-color: blue; */
				float: left;
			}

			.divRight ul {
				/* 去除列表项的图标 */
				list-style: none;
			}

			.divRight ul li {
				width: 250px;
				height: 300px;
				/* 设置居中 */
				text-align: center;
				/* 设置浮动 */
				float: left;
			}

			.divRight ul li img {
				width: 160px;
				height: 160px;
			}

			.divRight h3 {
				/* 设置字体颜色 */
				color: black;
			}

			.divRight p {
				color: gray;
				margin-bottom: 10px;
				/* 设置字体大小 */
				font-size: 12px;
			}

			.divRight span {
				color: blue;
			}

			.divRight a {
				/* 取消下划线 */
				text-decoration: none;
			}
		</style>