master

分支 (2)

管理

管理

master

develop

mall-project
/
preferred.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>优选</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/preferred.css">
	</head>
	<body>
		<header>
			<span class="title">优选</span>
		</header>
		<ul class="banner">
			<li>
				<a href="#"><img src="./img/preferred/banner1.jpg" alt=""></a>
			</li>
			<li>
				<a href="#"><img src="./img/preferred/banner1.jpg" alt=""></a>
			</li>
			<li>
				<a href="#"><img src="./img/preferred/banner1.jpg" alt=""></a>
			</li>
		</ul>
		<ul class="subnav">
			<li>
				<a href="#">
					<img src="./img/preferred/navpic1.jpg" alt="">
					<div class="name">本家推荐</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/preferred/navpic2.jpg" alt="">
					<div class="name">挑选师推荐</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/preferred/navpic3.jpg" alt="">
					<div class="name">私物推荐</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/preferred/navpic4.jpg" alt="">
					<div class="name">本家LOOK</div>
				</a>
			</li>
		</ul>
		<div class="selection">
			<div class="title">本家甄选</div>
			<div class="top">
				<a href="#">
					<img src="./img/preferred/bigpic1.jpg" alt="">
					<div class="name">叠韵滤光器，氛围造型大师</div>
					<div class="introduce">光笼，来自斯德哥尔摩的光晕礼赞</div>
				</a>
			</div>
			<div class="bottom">
				<a href="#">
					<div class="text">
						<div class="name">编织底双色鞋子 多色可选</div>
						<div class="introduce">透气性好，时尚感强</div>
					</div>
					<img src="./img/preferred/smallpic1.jpg" alt="">
				</a>
			</div>
			<div class="bottom">
				<a href="#">
					<div class="text">
						<div class="name">炻瓷储物罐系列</div>
						<div class="introduce">避光密封 坚韧耐摔 多道工序 匠心制作 拥有更久的赏味期限</div>
					</div>
					<img src="./img/preferred/smallpic2.jpg" alt="">
				</a>
			</div>
		</div>
		<div class="topic">
			<div class="section_name">十点一刻</div>
			<ul>
				<li>
					<a href="#">
						<img src="./img/preferred/dialog.jpg" alt="">
						<div class="text">
							<div class="today"><span>— </span>今日话题<span> —</span></div>
							<div class="title">一念之间的重要性</div>
							<div class="introduce">有没有哪个瞬间的念头，改变你一段时间的
								生活轨迹？</div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/preferred/dialog.jpg" alt="">
						<div class="text">
							<div class="today"><span>— </span>今日话题<span> —</span></div>
							<div class="title">一念之间的重要性</div>
							<div class="introduce">有没有哪个瞬间的念头，改变你一段时间的
								生活轨迹？</div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/preferred/dialog.jpg" alt="">
						<div class="text">
							<div class="today"><span>— </span>今日话题<span> —</span></div>
							<div class="title">一念之间的重要性</div>
							<div class="introduce">有没有哪个瞬间的念头，改变你一段时间的
								生活轨迹？</div>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="recommend">
			<div class="title">本家推荐</div>
			<div class="top">
				<a href="#">
					<img src="./img/preferred/bigpic2.jpg" alt="">
					<div class="name">叠韵滤光器，氛围造型大师</div>
					<div class="introduce">光笼，来自斯德哥尔摩的光晕礼赞</div>
				</a>
			</div>
		</div>
		<div class="look">
			<div class="title">本家LOOK</div>
			<div class="typeA item">
				<a href="#">
					<div class="img-box">
						<img class="midpic" src="./img/preferred/midpic1.jpg" alt="">
						<span>
							<img class="smallpic" src="./img/preferred/smallpic3.jpg " alt="">
							<img class="smallpic" src="./img/preferred/smallpic4.jpg " alt="">
						</span>
					</div>
					<div class="name">给牛仔加点火山岩</div>
				</a>
			</div>
			<div class="typeA item">
				<a href="#">
					<div class="img-box">
						<img class="midpic" src="./img/preferred/midpic2.jpg" alt="">
						<span>
							<img class="smallpic" src="./img/preferred/smallpic5.jpg " alt="">
							<img class="smallpic" src="./img/preferred/smallpic6.jpg " alt="">
						</span>
					</div>
					<div class="name">婚纱拍照必看功课</div>
				</a>
			</div>
			<div class="typeB item">
				<a href="#">
					<img src="./img/preferred/bigpic3.jpg" alt="">
					<div class="name">夏天的清凉，多亏了这抹茶绿 </div>
				</a>
			</div>
			<div class="typeA item">
				<a href="#">
					<div class="img-box">
						<img class="midpic" src="./img/preferred/midpic3.jpg" alt="">
						<span>
							<img class="smallpic" src="./img/preferred/smallpic7.jpg " alt="">
							<img class="smallpic" src="./img/preferred/smallpic8.jpg " alt="">
						</span>
					</div>
					<div class="name">你的厨房只是少了它</div>
				</a>
			</div>
			<div class="typeB item">
				<a href="#">
					<img src="./img/preferred/bigpic4.jpg" alt="">
					<div class="name">家的精致主义 </div>
				</a>
			</div>
			<div class="typeB item">
				<a href="#">
					<img src="./img/preferred/bigpic5.jpg" alt="">
					<div class="name">收纳，让小家越住越大</div>
				</a>
			</div>
		</div>

		<nav>
			<ul class="nav">
				<li>
					<a href="#">
						<img src="./img/preferred/nav1.png" alt="">
						<div class="name">首页</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/preferred/nav2s.png" alt="">
						<div class="name">优选</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/preferred/nav3.png" alt="">
						<div class="name">分类</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/preferred/nav4.png" alt="">
						<div class="name">购物车</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/preferred/nav5.png" alt="">
						<div class="name">我的</div>
					</a>
				</li>
			</ul>
		</nav>
		<div class="to_top"><img src="./img/preferred/top.png" alt=""></div>
	</body>
</html>