用css仿写小米手机端官网

最新推荐文章于 2023-08-10 17:21:12 发布

原创

最新推荐文章于 2023-08-10 17:21:12 发布 · 620 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html #html5

本文详细介绍了如何使用CSS3技术来仿写小米手机端官网的布局。通过两个主要的代码块展示实现过程，但在实际操作中遇到一个问题，即笔记本右侧图标的点击交互未正常工作，目前还在排查原因。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 设置浏览器窗口分辨率 -->
		<meta name="viewport" content="width=375,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		 <link rel="stylesheet" type="text/css" href="css/main.css"/>
		<title>小米官网</title>
	</head>
	<body>
		<!-- 快捷:.header>(.Top>(.logo+(.search>(.icon+input))+.user))+(.headerNav>(a*6+span.xhicon)) -->
		<div class="header">
			<div class="Top">
				<div class="logo"></div>
				<div class="search">
					<div class="icon"></div>
					<input type="text" placeholder="搜索商品名称">
				</div>
			<div class="user"></div>
			</div>
			<div class="headerNav">
				<a href="" class="active">推荐</a>
				<a href="" >手机</a>
				<a href="">智能</a>
				<a href="">电视</a>
				<a href="">家电</a>
				<a href="">笔记本</a>
				<input type="checkbox" name="cheoose" hidden="hidden" id="cheoose" value="" />
				<lable for="cheoose" class="xhicon"></lable>
				<div class="xhk">
					<div class="xhkmain">
						<div class="xhktop">
							全部
						</div>
						<div class="xhklist">
							<a href="" class="active">推荐</a>
							<a href="" >手机</a>
							<a href="">智能</a>
							<a href="">电视</a>
							<a href="">家电</a>
							<a href="">笔记本</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 轮播图 -->
		<div class="swiper"></div>
		<!-- 图标列表 -->
		<!-- .iconlist>a.iconItom>img[src="img/$"]*10 -->
	<div class="iconList">

最低0.47元/天解锁文章