新增首页

css/huaxia.css

@@ -0,0 +1,144 @@
+.w100{width: 100%;}
+.w50{width: 50%;}
+.w48{width: 49%;}
+.w25{width: 25%;}
+.w20{width: 19%;}
+
+
+.djb{display: flex;justify-content: space-between;}
+.dend{display: flex;justify-content: flex-end;}
+.djbac{display: flex;justify-content: space-between;align-items: center;}
+.ac{align-items: center;}
+.dac{display: flex;align-items: center;}
+.djcacfw{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
+.djbacfw{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
+.cq-cp{cursor: pointer;}
+.pr{position: relative;}
+.pa{position: absolute;}
+.dn{display: none;}
+.fs{flex-shrink: 0;}
+.fw{flex-wrap: wrap;}
+.oh{overflow: hidden;}
+.fit{object-fit: cover;}
+
+
+
+
+
+.m-s16{margin-top: 16px;}
+.m-s20{margin-top: 20px;}
+.m-s27{margin-top: 27px;}
+.m-s30{margin-top: 30px;}
+.m-s37{margin-top: 37px;}
+.m-s65{margin-top: 65px;}
+
+.m-z10{margin-left: 10px;}
+.m-z15{margin-left: 15px;}
+.m-z37{margin-left: 37px;}
+
+.m-y15{margin-right: 15px;}
+.m-y37{margin-right: 37px;}
+
+.m-sx65{margin-top: 65px;margin-bottom: 65px;}
+.m-sx30{margin-top: 30px;margin-bottom: 30px;}
+.m-sx28{margin-top: 28px;margin-bottom: 28px;}
+.m-sx20{margin-top: 20px;margin-bottom: 20px;}
+.m-sx16{margin-top: 16px;margin-bottom: 16px;}
+
+
+.m-x65{margin-bottom: 65px;}
+.m-x37{margin-bottom: 37px;}
+.m-x32{margin-bottom: 32px;}
+.m-x30{margin-bottom: 30px;}
+.m-x27{margin-bottom: 27px;}
+.m-x20{margin-bottom: 20px;}
+.m-x16{margin-bottom: 16px;}
+
+.m-zy180{margin-left: 180px;margin-right: 180px;}
+.m-zy15{margin-left: 15px;margin-right: 15px;}
+.m-zy20{margin-left: 20px;margin-right: 20px;}
+.m-zy30{margin-left: 30px;margin-right: 30px;}
+
+
+
+
+.p-sx65{padding-top: 65px;padding-bottom: 65px;}
+.p-s65{padding-top: 65px;}
+.p-s27{padding-top:27px;}
+.p-x65{padding-bottom: 65px;}
+.p-x27{padding-bottom: 27px;}
+.p-zy180{padding-left: 180px;padding-right: 180px;}
+.p-zy20{padding-left: 20px;padding-right: 20px;}
+.p-zy15{padding-left: 15px;padding-right: 15px;}
+.p-sx10{padding-top: 10px;padding-bottom: 10px;}
+.p-sx20{padding-top: 20px;padding-bottom: 20px;}
+
+
+
+.font-12{font-size: 12px;}
+.font-13{font-size: 13px;}
+.font-14{font-size: 14px;}
+.font-18{font-size: 18px;}
+.font-20{font-size: 20px;}
+.font-22{font-size: 22px;}
+.font-24{font-size: 24px;}
+.font-32{font-size: 32px;}
+
+
+.tl{text-align: left;}
+.col19{color: #191919;}
+.col7d{color: #7d7d7d;}
+.col9{color: #999999;}
+
+.backf{background: #FFFFFF;}
+
+
+.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
+.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
+.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
+.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
+
+/* 首页 */
+.banner-img{width: 100%;height: auto;}
+.sy-dian{width: 4px;height: 4px;border-radius: 100%;background-color: #181818;margin: 0 10px;}
+.dao-boxw{box-shadow: 0px 3px 6px rgba(0,0,0,.2);display: flex;justify-content: space-between;align-items: center;}
+.guan-box{display: flex;align-items: center;font-size: 14px;color: #181818;width: 100%;justify-content: flex-end;}
+.redD{width: 6px;height: 6px;border-radius: 100%;background: #cd2628;top: 10px;right: 12px;}
+.xiahx{width: 100%;bottom: 0;border-bottom: 3px solid #cd2628;}
+.dao-box>li{padding: 5px 25px;flex-shrink: 0;text-align: center;font-size: 19px;}
+.dao-box>li>div{padding: 6px 0;}
+.cq-dao-active{font-weight: bold;color: #cd2628;}
+.input-box{flex-shrink: 0;height: 40px;border-radius: 3px;border: 1px solid #ebebeb;padding: 0 10px;width: 220px;}
+.input-box input{font-size: 14px;height: 40px;border: 0;}
+.input-box img{right: 10px;top: 10px;width: 20px;height: 20px;}
+.cq-item-title-box{margin: 65px 0 30px 0;}
+.cq-item-title-box>div>div{background:-webkit-linear-gradient(left,red,rgba(255,255,255,0));height: 11px; bottom: 0;left: 0;width: 130px; opacity: .8;z-index: 0;}
+.cq-gengd{font-size: 18px;color: #191919;}
+.exhibition .item-box{width: 100%;overflow: hidden;height: 388px;}
+.exhibition .item-box>img{width: 100%;height: auto;cursor: pointer;}
+.msg .m-x32:nth-last-child(1){
+	margin-bottom: 0;
+}
+.msg .m-x32:nth-last-child(2){
+	margin-bottom: 0;
+}
+.ya-item-box .pr{padding-right: 20px;}
+.ys-price{font-size: 18px;color: #cb1919;background: rgba(0,0,0,.2);border-radius: 3px;left: 14px;bottom: 14px;padding: 6px 10px;}
+.ys-title{font-size: 20px;font-weight: bold;padding-right: 20px;}
+.ys-cate{font-size: 14px;color: #a6a6a4;padding-right: 20px;}
+.ysj-name{line-height: 26px;}
+.ysj .ya-item-box{margin-right: 1.36em;}
+.ysj .ya-item-box:last-child{margin-right: 0px;}
+.ysj .pr{padding-right: 0px;}
+.wc-box>div>img{width: 96%;}
+.wc-box .ya-item-box:hover a{color: #cb1919;text-decoration:underline;}
+.wc-box>div>div>a:hover{color: #cb1919;text-decoration:underline;}
+
+
+
+
+
+
+
+
+

index.html

@@ -4,10 +4,605 @@
 		<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" type="text/css" href="css/layui.css"/>
-		<script src="js/layui.js" type="text/javascript" charset="utf-8"></script>
+		<link rel="stylesheet" type="text/css" href="css/layui.css" />
+		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
+		<link rel="stylesheet" type="text/css" href="css/huaxia.css"/>
+		<!-- <script src="js/layui.js" type="text/javascript" charset="utf-8"></script> -->
+		<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
+		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
+		<script src="js/huaxia.js" type="text/javascript" charset="utf-8"></script>
+		<style type="text/css">
+			.swiper-container {
+				width: 100%;
+				height: 100%;
+			}
+			.swiper-slide {
+				text-align: center;
+				font-size: 18px;
+				background: #fff;
+				/* Center slide text vertically */
+				display: -webkit-box;
+				display: -ms-flexbox;
+				display: -webkit-flex;
+				display: flex;
+				-webkit-box-pack: center;
+				-ms-flex-pack: center;
+				-webkit-justify-content: center;
+				justify-content: center;
+				-webkit-box-align: center;
+				-ms-flex-align: center;
+				-webkit-align-items: center;
+				align-items: center;
+			}
+			.swiper-pagination-bullet{
+				width: 13px;height: 13px;border-radius: 100%;
+				background: #FFFFFF;
+				border: 2px solid #FFFFFF;
+				opacity: 1;
+			}
+			.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active{
+				width: 13px;height: 13px;border-radius: 100%;
+				border: 2px solid #cd2628;
+				background-color: rgba(255,255,255,0);
+			}
+			.swiper-button-prev, .swiper-container-rtl .swiper-button-prev {
+			    left: 0px;
+			    right: auto;
+			}
+			.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
+			    right: 0px;
+			    left: auto;
+			}
+			.swiper-button-next, .swiper-button-prev {
+			    position: absolute;
+			    top: 40%;
+				background: #ffffff;
+				/* width: calc(var(--swiper-navigation-size)/ 44 * 27);
+				height: var(--swiper-navigation-size); */
+				width: 39px;
+				height: 39px;
+			    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
+			    z-index: 2;
+			    cursor: pointer;
+			    display: flex;
+			    align-items: center;
+			    justify-content: center;
+			    color: #c6c6c6;
+			}
+			.swiper-button-next::after, .swiper-button-prev::after {
+			    font-family: swiper-icons;
+			    font-size: 18px;
+			    text-transform: none !important;
+			    letter-spacing: 0;
+			    text-transform: none;
+			    font-variant: initial;
+			    line-height: 1;
+			    font-weight: 700;
+			}
+		</style>
 	</head>
-	<body>
-		
+	<body style="background: #FFFFFF;">
+		<!-- Swiper -->
+		<div class="ont-swiper swiper-container">
+			<div class="swiper-wrapper">
+				<div class="swiper-slide"><img class="banner-img" src="img/public/banner.png" ></div>
+				<div class="swiper-slide"><img class="banner-img" src="img/public/banner.png" ></div>
+			</div>
+			<!-- 右箭头 -->
+			<!-- <div class="swiper-button-next"></div> -->
+			<!-- 左箭头 -->
+			<!-- <div class="swiper-button-prev"></div> -->
+			<!-- 指示点 -->
+			<div class="swiper-pagination"></div>
+		</div>
+		<script>
+			let swiper = new Swiper('.ont-swiper', {
+				cssMode: false,//禁止鼠标滑动，切换
+				loop:true,
+				autoplay: {
+					delay: 3000,
+					stopOnLastSlide: true,
+					disableOnInteraction: false,
+				},
+				pagination: {
+					el: '.swiper-pagination',
+					clickable :true,
+				},
+				mousewheel: false,//禁止鼠标滚动，切换
+			});
+		</script>
+		<div class="p-zy180 p-sx10 dao-boxw" style="position: sticky;top: 0;z-index: 10;background: #FFFFFF;">
+			<img class="cq-cp logo" src="img/logo.png" width="487">
+			<div>
+				<div class="guan-box">
+					<span class="cq-cp">关于我们</span>
+					<span class="sy-dian"></span>
+					<div class="cq-cp dac">
+						<img src="img/sy-scart.png" width="14" height="15" style="margin-right: 4px;">
+						<span class="cq-cp">我的购物车</span>
+					</div>
+					<span class="sy-dian"></span>
+					<span class="cq-cp">积分商城</span>
+					<span class="sy-dian"></span>
+					<span class="cq-cp">联系我们</span>
+					<span class="sy-dian"></span>
+					<span class="cq-cp">登录/注册</span>
+				</div>
+				<div class="dend w100 ac m-s20">
+					<div class="w100">
+						<ul class="dao-box dac">
+							<li class="pr">
+								<div class="pr cq-dao-active djcacfw">首页<div class="xiahx pa"></div></div>
+								<!-- 点 -->
+								<span class="redD pa"></span>
+							</li>
+							<li class="pr">
+								<div class="pr djcacfw">资讯<div class="xiahx pa dn"></div></div>
+								<span class="redD pa dn"></span>
+							</li>
+							<li class="pr">
+								<div class="pr djcacfw">展览<div class="xiahx pa dn"></div></div>
+								<span class="redD pa dn"></span>
+							</li>
+							<li class="pr">
+								<div class="pr djcacfw">艺术家<div class="xiahx pa dn"></div></div>
+								<span class="redD pa dn"></span>
+							</li>
+							<li class="pr">
+								<div class="pr djcacfw">机构<div class="xiahx pa dn"></div></div>
+								<span class="redD pa dn"></span>
+							</li>
+							<li class="pr">
+								<div class="pr djcacfw">培训<div class="xiahx pa dn"></div></div>
+								<span class="redD pa dn"></span>
+							</li>
+							<li class="pr">
+								<div class="pr djcacfw">商城<div class="xiahx pa dn"></div></div>
+								<span class="redD pa dn"></span>
+							</li>
+							<li class="pr">
+								<div class="pr djcacfw">拍卖<div class="xiahx pa dn"></div></div>
+								<span class="redD pa dn"></span>
+							</li>
+						</ul>
+					</div>
+					<div class="pr input-box">
+						<input type="text" name="" id="" class="w100" placeholder="关键字搜索" value="" />
+						<img class="pa cq-cp" src="img/sy-search.png">
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="p-zy180 djbac cq-item-title-box">
+			<div class="font-32 pr">展览<span class="font-22 m-z10">Exhibition</span><div class="pa"></div></div>
+			<div class="cq-gengd cq-cp">View More +</div>
+		</div>
+		<div class="m-x65 oh">
+			<!-- Swiper -->
+			<div class="exhibition pr">
+				<div class="swiper-wrapper">
+					<div class="swiper-slide">
+						<div class="tl">
+							<div class="item-box fit">
+								<img class="" alt="图片丢失" title="图片一" src="img/public/swip-one.png" >
+							</div>
+							<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
+							<div class="font-13 m-x16 col7d">主办方：华夏艺术网</div>
+							<div class="font-13 col7d">展览时间：2021.3.19 - 2021.3.25</div>
+						</div>
+					</div>
+					<div class="swiper-slide">
+						<div class="tl">
+							<div class="item-box fit">
+								<img class="" alt="图片丢失" title="图片二" src="img/public/swip-two.png" >
+							</div>
+							<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
+							<div class="font-13 m-x16 col7d">主办方：华夏艺术网</div>
+							<div class="font-13 col7d">展览时间：2021.3.19 - 2021.3.25</div>
+						</div>
+					</div>
+					<div class="swiper-slide">
+						<div class="tl">
+							<div class="item-box fit">
+								<img class="" alt="图片丢失" title="图片三" src="img/public/swip-three.png" >
+							</div>
+							<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
+							<div class="font-13 m-x16 col7d">主办方：华夏艺术网</div>
+							<div class="font-13 col7d">展览时间：2021.3.19 - 2021.3.25</div>
+						</div>
+					</div>
+					<div class="swiper-slide">
+						<div class="tl">
+							<div class="item-box fit">
+								<img class="" alt="图片丢失" title="图片四" src="img/public/swip-four.png" >
+							</div>
+							<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
+							<div class="font-13 m-x16 col7d">主办方：华夏艺术网</div>
+							<div class="font-13 col7d">展览时间：2021.3.19 - 2021.3.25</div>
+						</div>
+					</div>
+					<div class="swiper-slide">
+						<div class="tl">
+							<div class="item-box fit">
+								<img class="" alt="图片丢失" title="图片五" src="img/public/swip-five.png" >
+							</div>
+							<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
+							<div class="font-13 m-x16 col7d">主办方：华夏艺术网</div>
+							<div class="font-13 col7d">展览时间：2021.3.19 - 2021.3.25</div>
+						</div>
+					</div>
+					<div class="swiper-slide">
+						<div class="tl">
+							<div class="item-box fit">
+								<img class="" alt="图片丢失" title="图片六" src="img/public/swip-six.png" >
+							</div>
+							<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
+							<div class="font-13 m-x16 col7d">主办方：华夏艺术网</div>
+							<div class="font-13 col7d">展览时间：2021.3.19 - 2021.3.25</div>
+						</div>
+					</div>
+					<div class="swiper-slide">
+						<div class="tl">
+							<div class="item-box fit">
+								<img class="" alt="图片丢失" title="图片七" src="img/public/swip-eleven.png" >
+							</div>
+							<div class="font-20 m-sx16 clips1">艺术之乐 · 百名艺术家酒标展</div>
+							<div class="font-13 m-x16 col7d">主办方：华夏艺术网</div>
+							<div class="font-13 col7d">展览时间：2021.3.19 - 2021.3.25</div>
+						</div>
+					</div>
+				</div>
+				<!-- 右箭头 -->
+				<div class="two-next swiper-button-next"></div>
+				<!-- 左箭头 -->
+				<div class="two-prev swiper-button-prev"></div>
+			</div>
+		</div>
+		<script>
+			var myswiper = new Swiper('.exhibition', {
+				cssMode: false,//禁止鼠标滑动，切换
+				loop:true,
+				slidesPerView: 6,//显示数量
+				centeredSlides: true,//显示半截
+				spaceBetween: 25,//图片间距
+				slidesOffsetBefore : 16,
+				autoplay: {
+					delay: 4000,
+					stopOnLastSlide: true,
+					disableOnInteraction: false,
+				},
+				navigation: {
+					nextEl: '.two-next',
+					prevEl: '.two-prev',
+				},
+				mousewheel: false,//禁止鼠标滚动，切换
+			});
+			myswiper.el.onmouseover = function(){
+				myswiper.autoplay.stop()
+			}
+			myswiper.el.onmouseleave = function(){
+				myswiper.autoplay.start()
+			}
+		</script>
+		<div class="p-zy180" style="background: #f6f5f3;padding-bottom: 65px;">
+			<!-- 信息动态 -->
+			<div class="djbac cq-item-title-box p-s65">
+				<div class="font-32 pr">信息动态<span class="font-22 m-z10">Information News</span><div class="pa"></div></div>
+				<div class="cq-gengd cq-cp">View More +</div>
+			</div>
+			<div class="djbacfw msg">
+				<div class="dac backf p-sx20 w48 m-x32">
+					<img class="fs" src="img/public/xin-one.png" width="242" height="151">
+					<div class="m-zy15">
+						<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
+						<div class="font-12 col9">2021.06.30</div>
+						<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
+					</div>
+				</div>
+				<div class="dac backf p-sx20 w48 m-x32">
+					<img class="fs" src="img/public/xin-two.png" width="242" height="151">
+					<div class="m-zy15">
+						<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
+						<div class="font-12 col9">2021.06.30</div>
+						<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
+					</div>
+				</div>
+				<div class="dac backf p-sx20 w48 m-x32">
+					<img class="fs" src="img/public/xin-three.png" width="242" height="151">
+					<div class="m-zy15">
+						<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
+						<div class="font-12 col9">2021.06.30</div>
+						<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
+					</div>
+				</div>
+				<div class="dac backf p-sx20 w48 m-x32">
+					<img class="fs" src="img/public/xin-four.png" width="242" height="151">
+					<div class="m-zy15">
+						<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
+						<div class="font-12 col9">2021.06.30</div>
+						<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
+					</div>
+				</div>
+			</div>
+			<!-- 艺术商城 -->
+			<div class="djbac cq-item-title-box">
+				<div class="font-32 pr">艺术商城<span class="font-22 m-z10">Art Mall</span><div class="pa"></div></div>
+				<div class="cq-gengd cq-cp">View More +</div>
+			</div>
+			<div class="djb">
+				<div class="w50">
+					<div class="pr backf">
+						<img src="img/public/yi-one.png" width="100%" height="100%">
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w50 djb">
+					<div class="m-zy30">
+						<div class="pr backf">
+							<img src="img/public/yi-two.png" width="100%">
+							<div class="pa ys-price">￥2256.0</div>
+						</div>
+						<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+						<div class="ys-cate">分类：酒品包装</div>
+					</div>
+					<div>
+						<div class="pr backf">
+							<img class="" src="img/public/yi-three.png" width="100%">
+							<div class="pa ys-price">￥2256.0</div>
+						</div>
+						<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+						<div class="ys-cate">分类：酒品包装</div>
+					</div>
+				</div>
+			</div>
+			<div class="dac fw">
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-one.png" width="100%" >
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-two.png" width="100%">
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-three.png" width="100%" >
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-four.png" width="100%" >
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-five.png" width="100%" >
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-six.png" width="100%" >
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-eleven.png" width="100%" >
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+				<div class="w25 ya-item-box m-s37">
+					<div class="pr">
+						<img src="img/public/ys-ba.png" width="100%" >
+						<div class="pa ys-price">￥2256.0</div>
+					</div>
+					<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					<div class="ys-cate">分类：酒品包装</div>
+				</div>
+			</div>
+		</div>
+		<!-- 艺术家 -->
+		<div class="p-zy180 p-s65" style="background: #100e0d;padding-bottom: 65px;">
+			<div class="djbac cq-item-title-box" style="margin-top: 0px;color: #FFFFFF;">
+				<div class="font-32 pr">艺术家<span class="font-22 m-z10">Artist</span><div class="pa"></div></div>
+				<div class="cq-gengd cq-cp" style="color: #FFFFFF;">View More +</div>
+			</div>
+			<div class="w100 backf dac">
+				<img class="cq-cp" src="img/public/ysj-one.png" width="100%" height="100%">
+				<div class="m-zy30 col19 font-14">
+					<div class="m-x20" style="font-size: 30px;font-weight: bold;color: #cb1919;">张龙森</div>
+					<div class="ysj-name">职业画家</div>
+					<div class="ysj-name clips4">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院，现工作生活于北京 文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。</div>
+					<div class="m-s30">
+						<span class="font-13 cq-cp" style="background: #cb1919;color: rgba(255,255,255,.8);padding: 6px 10px;">查看作品</span>
+					</div>
+				</div>
+			</div>
+			<div class="dac fw ysj">
+				<div class="w20 backf ya-item-box m-s37">
+					<img src="img/public/ys-one.png" width="100%" >
+					<div class="p-zy15">
+						<div class=" m-sx16 djbac">
+							<div class="ys-title clips1">张龙森</div>
+							<div class="col19 fs cq-cp" style="border: 1px solid #cecccc;padding: 6px 10px;color: rgba(25,25,25,.7);">查看作品</div>
+						</div>
+						<div class="" style="color: rgba(25,25,25,.7);">职业画家</div>
+						<div class="clips2 m-x16" style="color: rgba(25,25,25,.7);">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院现工作生活于北京...</div>
+					</div>
+				</div>
+				<div class="w20 backf ya-item-box m-s37">
+					<img src="img/public/ys-two.png" width="100%">
+					<div class="p-zy15">
+						<div class=" m-sx16 djbac">
+							<div class="ys-title clips1">张龙森</div>
+							<div class="col19 fs cq-cp" style="border: 1px solid #cecccc;padding: 6px 10px;color: rgba(25,25,25,.7);">查看作品</div>
+						</div>
+						<div class="" style="color: rgba(25,25,25,.7);">职业画家</div>
+						<div class="clips2 m-x16" style="color: rgba(25,25,25,.7);">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院现工作生活于北京...</div>
+					</div>
+				</div>
+				<div class="w20 backf ya-item-box m-s37">
+					<img src="img/public/ys-three.png" width="100%" >
+					<div class="p-zy15">
+						<div class=" m-sx16 djbac">
+							<div class="ys-title clips1">张龙森</div>
+							<div class="col19 fs cq-cp" style="border: 1px solid #cecccc;padding: 6px 10px;color: rgba(25,25,25,.7);">查看作品</div>
+						</div>
+						<div class="" style="color: rgba(25,25,25,.7);">职业画家</div>
+						<div class="clips2 m-x16" style="color: rgba(25,25,25,.7);">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院现工作生活于北京...</div>
+					</div>
+				</div>
+				<div class="w20 backf ya-item-box m-s37">
+					<img src="img/public/ys-four.png" width="100%" >
+					<div class="p-zy15">
+						<div class=" m-sx16 djbac">
+							<div class="ys-title clips1">张龙森</div>
+							<div class="col19 fs cq-cp" style="border: 1px solid #cecccc;padding: 6px 10px;color: rgba(25,25,25,.7);">查看作品</div>
+						</div>
+						<div class="" style="color: rgba(25,25,25,.7);">职业画家</div>
+						<div class="clips2 m-x16" style="color: rgba(25,25,25,.7);">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院现工作生活于北京...</div>
+					</div>
+				</div>
+				<div class="w20 backf ya-item-box m-s37">
+					<img src="img/public/ys-five.png" width="100%" >
+					<div class="p-zy15">
+						<div class=" m-sx16 djbac">
+							<div class="ys-title clips1">张龙森</div>
+							<div class="col19 fs cq-cp" style="border: 1px solid #cecccc;padding: 6px 10px;color: rgba(25,25,25,.7);">查看作品</div>
+						</div>
+						<div class="" style="color: rgba(25,25,25,.7);">职业画家</div>
+						<div class="clips2 m-x16" style="color: rgba(25,25,25,.7);">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院现工作生活于北京...</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="p-zy180">
+			<!-- 文创专区 -->
+			<div class="djbac cq-item-title-box">
+				<div class="font-32 pr">文创专区<span class="font-22 m-z10">Cultural and Creative Zone</span><div class="pa"></div></div>
+				<div class="cq-gengd cq-cp">View More +</div>
+			</div>
+			<div class="dac fw wc-box">
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-01.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-02.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-03.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-04.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-05.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-06.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-07.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-08.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-09.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-10.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-11.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+				<div class="w25 ya-item-box m-x37 cq-cp">
+					<img src="img/public/wc-12.png">
+					<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
+				</div>
+			</div>
+		</div>
+		<!-- 培训 -->
+		<div class="p-zy180 p-sx65" style="background: url(img/public/px-bac.png); background-size: 100% 100%;">
+			<div class="djbac cq-item-title-box" style="margin-top: 0;">
+				<div class="font-32 pr">培训<span class="font-22 m-z10">Cooperative Partner</span><div class="pa"></div></div>
+				<div class="cq-gengd cq-cp">View More +</div>
+			</div>
+			<div class="djb">
+				<div class="w50 backf">
+					<img src="img/public/px-01.png" width="100%">
+					<div class="clips1 m-sx20 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
+				</div>
+				<div class="w50 djb">
+					<div class="m-zy30 backf">
+						<img src="img/public/px-02.png" width="100%">
+						<div class="clips1 m-sx20 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					</div>
+					<div class="backf">
+						<img class="" src="img/public/px-03.png" width="100%">
+						<div class="clips1 m-sx20 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 合作伙伴 -->
+		<div class="p-zy180 p-sx65">
+			<div class="djbac cq-item-title-box" style="margin-top: 0;">
+				<div class="font-32 pr">合作伙伴<span class="font-22 m-z10">Cooperative Partner <span style="font-size: 14px;color: rgba(25,25,25,.5);margin-left: 10px;">700+媒体合作、200+机构支持、5000+名艺术家</span></span><div class="pa"></div></div>
+				<div class="cq-gengd cq-cp">View More +</div>
+			</div>
+			<div class="djbac">
+				<img class="cq-cp" src="img/public/hz-01.png" >
+				<img class="cq-cp" src="img/public/hz-02.png" >
+				<img class="cq-cp" src="img/public/hz-03.png" >
+				<img class="cq-cp" src="img/public/hz-04.png" >
+				<img class="cq-cp" src="img/public/hz-02.png" >
+				<img class="cq-cp" src="img/public/hz-05.png" >
+				<img class="cq-cp" src="img/public/hz-07.png" >
+				<img class="cq-cp" src="img/public/hz-04.png" >
+			</div>
+			<div style="background-color: #f5f5f5;padding: 10px;">
+				<div class="pr backf" style="overflow: hidden;">
+					<img class="pa" src="img/public/sy-input-bc.png" >
+					<div class="djbac cq-item-title-box" style="margin-top: 0px;margin-bottom: 20px;">
+						<div class="font-32 pr">合作留言<span class="font-22 m-z10">Cooperation Message <span style="font-size: 14px;color: rgba(25,25,25,.5);margin-left: 10px;">如果您有意见建议请留言，我们将第一时间与您联系！</span></span><div class="pa"></div></div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</body>
 </html>

js/huaxia.js

@@ -0,0 +1,16 @@
+$(function(){
+	$('.logo').on('click',function(){//logo图标点击事件
+		location.href = 'index.html'
+	})
+	$('.dao-box li div').mouseover(function(){//导航悬浮事件
+		$(this).css("cursor","pointer")
+	})
+	$('.dao-box li div').click(function(){//导航点击事件
+		$('.dao-box li div').removeClass('cq-dao-active')
+		$('.dao-box li div div').addClass("dn");
+		$('.dao-box li span').addClass("dn");
+		$(this).find(".xiahx").removeClass('dn')
+		$(this).next(".redD").removeClass('dn')
+		$(this).addClass('cq-dao-active')
+	})
+})