移动端第二十章--响应式布局

最新推荐文章于 2024-04-20 16:13:23 发布

LW0512

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量203

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/LW0512/article/details/108936287

版权

移动端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

响应式布局

确定项目兼容的浏览器尺寸--NIKE 官网
max-width:1024px 图片一行显示2列
头部的导航和搜索消失
侧边导航来到导航的位置显示

--利用媒体查询写的项目叫响应式布局

比较简略的耐克官网–响应式布局效果图：

在这里插入图片描述
具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title></title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="logo">
				<img src="./img/logo.png" >
			</div>
			<nav>
				<a href="#">男装</a>
				<a href="#">男装</a>
				<a href="#">男装</a>
				<a href="#">男装</a>
				<a href="#">男装</a>
			</nav>
			<div class="search">搜索</div>
			<ul class="left_nav1">
				<li>鞋类1</li>
				<li>鞋类1</li>
				<li>鞋类1</li>
				<li>鞋类1</li>
				<li>鞋类1</li>
			</ul>
		</div>
		<!-- 主题内容 -->
		<div class="cont_wrap">
			<ul class="left_nav">
				<li>鞋类</li>
				<li>鞋类</li>
				<li>鞋类</li>
				<li>鞋类</li>
				<li>鞋类</li>
			</ul>
			<ul class="cont_img">
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
				<li>
					<div class="list_img">
						<img src="img/1.jpg" alt="">
					</div>
					<div class="tit">
						<p>
							<span>新品上市</span>
							<span>￥999</span>
						</p>
						<p>男子篮球鞋</p>
						<p>一种颜色</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>