master

分支 (1)

管理

管理

master

wang-ya-guang
/
产品.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>红酒庄园-产品</title>
		<!-- <style type="text/css">
			/* 头部 */
			body {
				margin: 0;
				min-width: 1420px;
			}

			header {
				height: 110px;
				min-width: 1200px;
				background: url(img/top-bg.jpg);
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0 20px;
			}

			.search {
				width: 300px;
				height: 25px;
				border: #A62721 2px solid;
				border-radius: 15px;
				padding-left: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.search>input {
				border: none;
				outline: none;
				background: rgba(0, 0, 0, 0);
				flex-grow: 1;
			}

			button {
				justify-content: flex-end;
				height: 25px;
				outline: none;
				border-radius: 15px;
				background: #A62721;
				text-align: right;
				color: white;
			}

			.search2 {
				margin-top: 10px;
			}

			.language {
				margin-top: 10px;
				height: 100%;
				word-spacing: 20px;
				font-size: 14px;
			}

			.language>a {
				text-decoration: none;
				color: black;
			}

			/* 导航栏 */
			.nav-top {

				min-width: 1250px;
				height: 50px;
				background: #A62721;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.nav-top>a {
				width: 240px;
				height: 50px;
				text-decoration: none;
				color: white;
				line-height: 50px;
				text-align: center;
			}

			.nav-top>a:hover {
				background: #881618;
			}

			/* 产品图 */
			.picture{


				height: 500px;
				background-image: url(img/banner1.jpg);
				background-size: cover;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				padding: 10px 100px;
			}
			.picture-1{
				width: 200px;
				height: 200px;
				background: rgba(0,0,0,0.4);
				border-radius: 15px;
				margin: 20px 20px;
				text-align: center;
				position: relative;
			}

			.main{
				width: 200px;
				height: 200px;
				position: absolute;
				top: 0;
				color: white;
				text-align: center;
				line-height: 200px;
				writing-mode:vertical-lr;
				letter-spacing: 20px;
			}


			/* 二级导航 */
			.nav-main{
				min-width: 1200px;
				height: 100px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.nav-main>a{
				text-decoration: none;
				font-size: 24px;
				color: #930000;
				width: 200px;
				height: 50px;
				border: #000000 1px solid;
				text-align: center;
				line-height: 50px;
				margin: 0 60px;
			}

			.nav-main>a:hover{
				color: white;
				background: #930000;
			}
			.nav-main>a:hover .ul1 {
				color: white;
				background: black;
				display: block;
			}
			.nav-main>a>ul>li:hover{
				background: rgba(147,0,0,0.3);
				color: white;
			}


			.nav-main>a>ul{
				margin: 0;
				padding: 0;
				display: none;
			}
			.nav-main>a>ul>li{
				margin: 0;
				border: #000000 1px solid;
				width: 200px;
				height: 40px;
				list-style-type:none;
				text-align: center;
				color: #930000;
				background: white;
			}

			/* 酒样 */
			.bar{
				height: 1200px;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				align-items: center;
				position: relative;
				z-index: -1;
			}
			.bar-1{
				width:250px;
				height: 320px;
				border: #000000 1px solid;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 30px 30px;
			}
			.bar-1>a{
				text-align: center;
				line-height: 40px;
				width: 250px;
				height: 40px;
				border: #000000 1px solid;
				text-decoration: none;
				color: #D97386;
			}
			.bar-1>a:hover{
				text-decoration: underline;
			}


			/* 底部logo */
			.logo-foot{
				height: 180px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 30px;
			}

			.cctv-1{
				height: 70px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			footer{
				min-width: 1200px;
				height: 130px;
				background: #930000;
			}
			.footer-left{
				width: 120px;
				height: 130px;
				display: flex;
				flex-direction: column;
				justify-content: center;

			}
			.circle{
				width: 60px;
				height: 60px;
				background: rgba(0,0,0,0);
				border-radius:50% ;
				border: white 4px solid;
				margin-top: 10px;
				margin-left:30px ;
			}
			.field{
				margin-left:15px ;
				height: 50px;
				font-size: 14px;
				line-height: 0.5;
			}


			/* 底部 */
			footer{
				height: 130px;
				width: 100%;
				display: flex;
				justify-content: center;
			}
			.footer-main{
				width: 900px;
				height: 60px;
				display: flex;
				align-items: center;
			}

			.footer-main-top>a{
				text-decoration: none;
				font-size: 20px;
				color: white;
				padding: 0 40px;
			}


			.option{
				outline: none;
				border: none;
				background: rgba(0,0,0,0);
				color: white;
				font-size: 20px;
				padding: 0 20px;
			}

			.footer-main{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				height: 120px;
			}

			.footer-main-bottom{
				width: 900px;
				color: white;
				margin-left: 40px;
				font-size: 12px;
			}
			.footer-main-top{
				border-bottom: white 2px solid;
				width: 900px;
			}

		</style> -->
		<link rel="stylesheet" type="text/css" href="css/红酒庄园产品.css" />
	</head>
	<body>

		<div class="body-max">

		<!-- 头部 -->
		<header>
			<div class="logo">
				<img src="img/top-logo.png">
			</div>

			<div class="search2">
				<div class="search">
					<input type="text" placeholder="葡萄酒">
					<button id="b2">搜索</button>
				</div>
				<div>
					<p style="font-size: 14px;">关键词:<span style="color: red;">葡萄酒</span> 冰酒 甜酒 香槟 白葡萄酒 红酒 白酒</p>
				</div>
			</div>

			<div class="language">
				<a href="#">中文</a>
				<a href="#">English</a>
			</div>
		</header>

		<!-- 导航栏 -->
		<nav class="nav-top">
			<a href="红酒庄园项目.html">首页</a>
			<a href="产品.html">产品</a>
			<a href="公司简介.html">公司简介</a>
			<a href="公司新闻.html">公司新闻</a>
			<a href="联系我们.html">联系我们</a>
		</nav>

		<!-- 红酒图 -->
		<div class="picture">

		<div class="picture-top-1">

			<div class="picture-1">
				<img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>

			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>

			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>

			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>

			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>
		</div>

		<div class="picture-bottom">
			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>

			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>
			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>
			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>
			<div class="picture-1"><img height="200px" src="img/chanpin/ban-cp2.png">
				<div class="main">查看详情</div>
			</div>
		</div>

	</div>


		<!-- 二级导航 -->
		<div class="nav-max">

		<nav class="nav-main">
			<a href="#">冰酒
				<ul class="ul1">
					<li>蓝冰王</li>
					<li>蓝冰王</li>
					<li>蓝冰王</li>
				</ul>
			</a>
			<a href="#">红酒
			<ul class="ul1">
				<li>蓝冰王</li>
				<li>蓝冰王</li>
				<li>蓝冰王</li>
			</ul>
			</a>
			<a href="#">甜酒
			<ul class="ul1">
				<li>蓝冰王</li>
				<li>蓝冰王</li>
				<li>蓝冰王</li>
			</ul>
			</a>
			<a href="#">香槟
			<ul class="ul1">
				<li>蓝冰王</li>
				<li>蓝冰王</li>
				<li>蓝冰王</li>
			</ul>
			</a>
			<a href="#">白酒
			<ul class="ul1">
				<li>蓝冰王</li>
				<li>蓝冰王</li>
				<li>蓝冰王</li>
			</ul>
			</a>
		</nav>
		</div>


		<!-- 酒样 -->
		<div class="bar">
			<div class="bar-top">

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>
		</div>

			<div class="bar-main">


			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>
</div>

			<div class="bar-bottom">


			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>

			<div class="bar-1">
				<img style="width: 240px; text-align: center;" src="img/chanpin/conlist-cp5.jpg">
				<div class="list-h">
					<p>类型：葡萄酒<br>
						葡萄品种：唯代尔<br>
						酒精度：10.5%<br>
						产区：加拿大<br>
						等级：VQA<br>
						净含量：375ml<br>
					</p>
					<p>零售价：￥688</p>
				</div>
				<a href="#">82年法国葡萄酒</a>
				<div class="bar-button">
					<button id="bar-button-1">加入购物车</button>
				</div>
			</div>
		</div>

		</div>


		<!-- 知名红酒 -->
		<div class="cctv-1">
			<p>知名红酒</p>
			<img src="img/con-hover.png">
		</div>

		<div class="logo-foot">
			<img style="margin: 0 20px;" src="img/con-ban1.png">
			<img style="margin: 0 20px;" src="img/con-ban2.png">
			<img style="margin: 0 20px;" src="img/con-ban3.png">
			<img style="margin: 0 20px;" src="img/con-ban4.png">
			<img style="margin: 0 20px;" src="img/con-ban5.png">
			<img style="margin: 0 20px;" src="img/con-ban1.png">
		</div>

		<!-- footer -->
		<footer>

			<div class="footer-left">
				<div class="circle">

				</div>
				<div class="field">
					<p>劝君更尽一杯酒</p>
					<p>满韵香含唯此家</p>
				</div>
			</div>


			<div class="footer-main">
				<div class="footer-main-top">
					<a href="#">联系我们</a>
					<a href="#">公司简介</a>
					<a href="#">公司新闻</a>
					<select class="option" value="友情链接">
						<option>友情链接</option>
						<option>张步步</option>
						<option>王珊珊</option>
						<option>溜溜溜</option>
					</select>

				</div>
				<div class="footer-main-bottom">
					<p>Copyright @ 2010-2016 木地酒庄有限公司 wengfengtong 更多模板：<span style="color: #000000;">源码之家</span></p>
				</div>
			</div>


			<div class="ball-top-right">
				<img src="img/foot-logo.jpg">
			</div>
		</footer>
		</div>
	</body>
</html>