一、顶部导航
1、html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/2-heander.min.css">
</head>
<body>
<header>
<div class="head_1">
<img src="img/head/log.png" alt="">
<ul>
<li>
<a href="#">官方微博</a>
<img src="img/head/weibo.png" alt="">
</li>
<li>
<a href="#">关注微信</a>
<img src="img/head/weixin.jpg" alt="">
</li>
<li><a href="#">购物须知</a></li>
</ul>
</div>
<div class="head_2">
<img class="tu" src="img/head/logo.png" alt="">
<div class="search">
<input type="text" placeholder="搜索偶像、商品" id="">
<a href="#"></a>
</div>
<ul>
<li>
<img src="img/head/avatar.png" alt="">
<a href="#">登录</a>
</li>
<li><a href="#">我的订单</a></li>
<li>
<img src="img/head/cart.png" alt="">
<a href="#">购物车</a>
</li>
</ul>
</div>
<div class="head_3">.
<nav>
<span>艺人分类</span>
<ul>
<li><a href="">首页 </a></li>
<li><a href="">专辑</a></li>
<li><a href="">明星周边</a></li>
<li><a href="">明星同款</a></li>
<li><a href="">个护美妆</a></li>
<li><a href="">影漫周边</a></li>
<li><a href="">食品</a></li>
<li><a href="">服装配饰</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
2、scss代码
@mixin css_sprite($url, $x:0, $y:0) {
background: url($url) $x $y;
background-repeat: no-repeat;
}
header {
width: 100%;
background-color: #222222;
.head_1 {
display: flex;
justify-content: space-between;
margin-left: 50px;
background-color: #1C1D1E;
ul {
margin-right: 30px;
li {
display: inline-block;
width: 150px;
border: 1px solid white;
text-align: center;
line-height: 30px;
a {
color: #828282;
&:hover {
color: #222222;
}
}
img {
width: 130px;
height: 130px;
border: 10px solid white;
display: none;
position: absolute;
}
&:hover img {
display: block;
}
&:hover {
background-color: white;
}
&:nth-child(3):hover {
background-color: #222222;
}
&:nth-child(3):hover a {
color: #000;
}
}
}
}
.head_2 {
height: 80px;
display: flex;
justify-content: space-between;
line-height: 90px;
.tu {
display: inline-block;
margin-left: 110px;
}
.search {
position: relative;
input {
width: 435px;
height: 42px;
outline: none;
border: 0;
padding-left: 25px;
// background: url(../img/head/search_icon.png)0 -43px;
@include css_sprite("../img/head/search_icon.png", 0, -43px);
&:focus {
@include css_sprite("../img/head/search_icon.png", 0, 0);
}
&:focus+a {
@include css_sprite("../img/head/search_icon.png", -460px, -50px);
}
}
a {
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
top: 30px;
right: 20px;
background: url(../img/head/search_icon.png)-457px -5px;
}
}
ul {
display: flex;
text-align: center;
margin-right: 30px;
li {
width: 100px;
display: flex;
img {
width: 20px;
height: 20px;
margin-top: 35px;
// border: 1px solid red;
}
a {
color: white;
// height: 10px;
}
}
}
}
.head_3 {
nav {
display: flex;
justify-content: space-between;
height: 40px;
border-top: 1px solid #999;
span {
color: white;
float: left;
line-height: 40px;
margin-left: 120px;
background-color: #000;
}
ul {
margin-right: 100px;
li {
float: left;
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
a {
color: #999;
text-decoration: none;
}
&:hover {
border-bottom: 4px solid #FF2C72;
}
&:hover a {
color: #FF2C72;
}
}
}
}
}
}
3、效果
二、内容
1、html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/4-boby.min.css">
</head>
<body>
<div class="con">
<section>
<div class="main_1">
<img src="img/index/banner/1.jpg" alt="">
</div>
<div class="main_2">
<div class="bt"></div>
<ul>
<li>
<img src="img/index/necessary/1.png" alt="">
<a href="#">官方应援手灯专区</a>
</li>
<li>
<img src="img/index/necessary/2.gif" alt="">
<a href="#">官方应援手灯专区</a>
</li>
<li>
<img src="img/index/necessary/3.png" alt="">
<a href="#">官方应援手灯专区</a>
</li>
<li>
<img src="img/index/necessary/4.gif" alt="">
<a href="#">官方应援手灯专区</a>
</li>
<li>
<img src="img/index/special.jpg" alt="">
</li>
</ul>
</div>
<div class="main_3">
<div class="bt"></div>
<ul>
<li>
<img src="img/index/top/a/toplist_a01.jpg" alt="">
<a href="#">薛之谦</a>
</li>
<li>
<img src="img/index/top/a/toplist_a02.jpg" alt="">
<a href="#">IKON</a>
</li>
<li>
<img src="img/index/top/a/toplist_a03.jpg" alt="">
<a href="#">鹿晗</a>
</li>
<li>
<img src="img/index/top/a/toplist_a04.jpg" alt="">
<a href="#">GOT7</a>
</li>
<li>
<img src="img/index/top/a/toplist_a05.jpg" alt="">
<a href="#">EXO</a>
</li>
<li>
<img src="img/index/top/a/toplist_a06.jpg" alt="">
<a href="#">Astro(韩国)</a>
</li>
<li>
<img src="img/index/top/a/toplist_a07.jpg" alt="">
<a href="#">Winner</a>
</li>
<li>
<img src="img/index/top/a/toplist_a08.jpg" alt="">
<a href="#">BigBang</a>
</li>
</ul>
</div>
<div class="main_4">
<div class="bt"></div>
<main>
<div>
<img src="img/pro/1.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架 公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/2.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/3.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/4.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架 公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/5.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/6.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/7.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架 公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/8.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
<div>
<img src="img/pro/9.jpg" alt="">
<h4>【现货包邮】加一联创1more bear 万魔熊 头戴式耳机支架公仔熊[K14]</h4>
<p>￥50</p>
<span></span>
<i>0</i>
</div>
</main>
</div>
</section>
</div>
</body>
</html>
2、scss代码：
@mixin css_sprite($url, $x:0, $y:0) {
background: url($url) $x $y;
background-repeat: no-repeat;
}
.con {
background-color: #F5F5F5;
section {
width: 1200px;
margin: 0 auto;
.main_2 {
.bt {
width: 100px;
height: 50px;
margin-top: 20px;
margin-bottom: 10px;
@include css_sprite("../img/index/title.png", 0, 0);
}
ul {
display: flex;
justify-content: space-between;
li {
a {
height: 35px;
background-color: white;
text-align: center;
line-height: 35px;
color: #ccc;
}
}
}
}
.main_3 {
.bt {
width: 100px;
height: 40px;
margin-top: 20px;
margin-bottom: 10px;
@include css_sprite("../img/index/title.png", 0, -60px);
}
ul {
display: flex;
justify-content: space-between;
li {
animation-name: tu-3;
animation-duration: 2s;
animation-fill-mode: forwards;
a {
height: 35px;
background-color: white;
text-align: center;
line-height: 35px;
color: black;
&:hover {
color: #FF4C86;
}
}
}
}
}
.main_4 {
width: 1200px;
.bt {
width: 100px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
@include css_sprite("../img/index/title.png", 0, -100px);
}
main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
div {
width: 390px;
margin-bottom: 15px;
background-color: #F5F6FA;
box-shadow: 5px 5px 5px #999;
transform: scale(0.6);
animation: sf 2s forwards;
&:hover {
border-bottom: 4px solid #FF4C86;
}
img {
width: 190px;
height: auto;
float: left;
padding: 10px 10px 10px 0;
}
h4 {
width: 190px;
height: auto;
float: left;
}
p {
font-weight: bold;
line-height: 50px;
color: #FF4C86;
}
span {
width: 13px;
height: 13px;
display: inline-block;
background-color: aliceblue;
@include css_sprite("../img/icon/ico.png", 0px, -70px);
&:hover {
@include css_sprite("../img/icon/ico.png", -13px, -70px);
}
}
}
}
}
}
}
@keyframes sf {
to {
transform: scale(1);
filter: blur(0px);
}
}
@keyframes tu-3 {
0% {
transform: scale(1);
}
50% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
3、效果：
三、底部
1、html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/3-footer.min.css">
</head>
<body>
<section class="footer">
<div class="img">
<img src="img/footer/footer.png" alt="">
</div>
<div class="btn">
<ul>
<li>
<a href="#">关于我们</a><span>|</span>
</li>
<li>
<a href="#">人才招聘</a><span>|</span>
</li>
<li>
<a href="#">联系我们</a><span>|</span>
</li>
<li>
<a href="#">友情链接</a><span>|</span>
</li>
<li>
<a href="#">版权声明</a><span>|</span>
</li>
<li>
<a href="#">客服中心</a><span></span>
</li>
</ul>
<div class="con">
<p><img src="img/footer/culture.png" alt="">各Copyright ◎2009 2016 yinyuetai.com 广播电视节目制作经营 许可证编号京字第1891号I京网文[2014)2037-287号 I网络视听许可证0110413号</p>
<p>京公网安备1 1010502014900号I京ICP备11024134号-1 I 京ICP证060716号I出版物经营许可证新出发京零字第朝130062号I 增值电信业务经营许可证B2-20140501<span></span></p>
<p>食品经营许可Ss证:11105040485363 |营业执照</p>
<img class="right" src="img/footer/biaoshi.gif" alt="">
</div>
</div>
</section>
</body>
</html>
2、scss代码：
.footer {
width: 100%;
.img {
display: flex;
justify-content: center;
padding: 20px 0;
}
.btn {
background-color: #222222;
ul {
display: flex;
justify-content: center;
padding: 40px 0;
li {
display: flex;
justify-content: center;
width: 100px;
a {
color: #999;
}
span {
margin: 0 15px;
color: #999;
}
}
}
}
.con {
position: relative;
padding-bottom: 30px;
p {
display: flex;
justify-content: center;
color: #959595;
line-height: 30px;
img {
width: 20px;
height: 20px;
margin-right: 10px;
}
span {
width: 90px;
}
}
.right {
position: absolute;
right: 180px;
width: 50px;
height: 50px;
top: -5px;
}
}
}
3、效果：
四、购物须知
1、html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/1-.min.css">
</head>
<body>
<div class="page">
<div class="page-head">
<h1 class="page-title">购物须知</h1>
<ul>
<li><a href="">预定商品</a></li>
<li><a href="">专辑价格</a></li>
<li><a href="">发货周期</a></li>
<li><a href="">快递</a></li>
<li><a href="">售后相关</a></li>
</ul>
</div>
<div class="page-content">
<!-- 预定商品 -->
<div class="mod">
<div class="content-title"></div>
<div class="content">
<p>预定商品;非现货的商品，为确保供货数量以及避免过量囤积，因此将通过收取预定金的形式进行把控，且无论是哪种形式的预定商品，预定金一旦支付成功，均不予以退还，敬请周知。</p>
<p> 如预定商品为全款预定金商品，那么商品正式发行后，则会直接发货;
</p>
<p>如预定商品为定额预定金商品（众筹预定)，那么商品正式发行后，则需再补充支付尾款。如若不支付尾款，预定金则不予以退还。</p>
<p>*预定金是指商品正式发行前夕，预定购买时所支付的一定数额的金钱作为担保。</p>
<p>预定商品的预定金分为全款预定金和定额预定金两种形式。</p>
</div>
</div>
<!-- 专辑价格 -->
<div class="mod">
<div class="content-title"></div>
<div class="content">
<p> 商城发售的海外专辑的全款价格内包含专辑定价+国际邮费+关税+增值税+审批费用，不含国内邮费。.</p>
<p> 如专辑为众筹预定商品，则专辑发行后会短信通知补款，补款成功后同步计入专辑销量（韩国专辑计入Hanteo Chart销量榜)。</p>
</div>
</div>
<!-- 发货周期 -->
<div class="mod">
<div class="content-title"></div>
<div class="content">
<img src="img/buyer/1.jpg" alt="">
<p>补充说明;</p>
<p> 商城发售的海外进口专辑均为预售专辑</p>
<p> 进口外文原版专辑需要报批审核，并加贴「国家专用进口防伪标识」贴纸。审核周期约为20个工作日，因需用实体专辑报批，所以在专辑正式发行后才可递交报批材料。</p>
<p>另外，国际运输+中国海关开箱验货+通关周期约为2周左右。</p>
<p> 预售海外专辑预计将于专辑正式发售后40个工作日内发货。当专辑发行时间与法定假日冲撞时，则会进行顺延，具体时间将根据当时情况另行通知,(此为参考时间，发货时问以实际情况为准)</p>
</div>
</div>
<!-- 快递 -->
<div class="mod">
<div class="content-title"></div>
<div class="content">
<p>订购众筹商品时暂不需要支付邮费，商品补款时支付国内邮费。全款预定订单下单时支付国内运费。</p>
<p>邮费计算说明;</p>
<img src="img/buyer/2.jpg" alt="">
<p>商城委托第三方快递公司为客户提供送货服务，客户无须向快递公司支付额外的费用。客户可在商城“我的订单”查询货物配送信息，也可以登录第三方快递网站查询快递信息。</p>
<p>注意;港澳台地区的用户下单后需联系商城QQ客服补运费后才能正常发货。</p>
<p>下单时请在留言区备注可以联系上的QQ，若没有QQ，请留下邮箱地址，以便工作人员与您取得联系。</p>
</div>
</div>
<!-- 退换货相关 -->
<div class="mod">
<div class="content-title"></div>
<div class="content">
<p>商品售出后，如无质量问题不予退换，不接受如<strong>不喜欢、和想象的不一样、有色差</strong>等主观因素的退换要求.</p>
<p>快递签收后7日内，如出现非人为因素的损坏，或密封包装内的商品有缺失等质量问题，需提供电子订单，商品和快递外包装完整图片，联系音悦商城售后有服进行退、换货。</p>
<p>如因商城的原因出现少发、漏发等情况，可联系商城客服凭商城购物汀单号确认后进行补发;如出现发措件的情况，可在保持专辑包装完好、不影响二次销售的状态下，进行更换，已拆封的音像制品将无法受理退、换货，请您谅解。</p>
<p><b>缺失商品的补发、损坏商品换货的邮费</b>均由商城承担。</p>
<p>要进行退、换货时，需将退、换商品寄回，请您先垫付寄回运费，后联系商城客服进行退邮费。寄回商品时请发普通快递，不要使用顺丰到付，否则将拒收，退邮费上限为15元，超出部分将由您自己承担，敬请谅解</p>
<p>请您—定要当快递员的面拆件检查货品是否完好后再行签收。如有破损请不要签收，并交与快递员原件退回。如未检查就签收包裹而引发问题，商城将无法为您向快递索赔，造成的损失将由买方承担。</p>
<p>如未检查就签收包惠而引发问题，商城将无法为您向快递索赔，造成的损失将由买方承担.</p>
<p><b>请您一定保证收货信息正确，联系电话畅通。如因买家原因，快递公司人员未能与买家联系到，导致无法正常收货或货品退回出现的商城二次发货，需要买家补款二次邮费。</b></p>
</div>
</div>
</div>
</div>
</body>
</html>
2、scss代码：
@mixin css_sprite($url, $x:0, $y:0) {
background: url($url) $x $y;
background-repeat: no-repeat;
}
.page {
width: 80%;
margin: 0 auto;
.page-head {
text-align: center;
h1 {
color: #DE5976;
line-height: 100px;
}
ul {
li {
display: inline-block;
@include css_sprite("../img/buyer/mod_circle.png");
background-position: center top;
margin: 0 10px;
margin-bottom: 50px;
a {
display: inline-block;
padding-top: 40px;
font-size: 18px;
color: #999;
}
&:hover a {
color: red;
}
&:nth-child(1) {
@include css_sprite("../img/buyer/mod_circle.png", 14px, -96px);
a {
color: red;
}
}
&:hover {
@include css_sprite("../img/buyer/mod_circle.png", 14px, -96px);
}
}
}
}
.page-content {
.mod {
&:nth-child(1) {
.content-title {
width: 300px;
height: 50px;
@include css_sprite("../img/buyer/mod_title.png", 0, -190px);
}
}
&:nth-child(2) {
.content-title {
width: 300px;
height: 50px;
@include css_sprite("../img/buyer/mod_title.png", 0, 0);
}
}
&:nth-child(3) {
.content-title {
width: 300px;
height: 50px;
@include css_sprite("../img/buyer/mod_title.png", 0, -86px);
}
}
&:nth-child(4) {
.content-title {
width: 300px;
height: 50px;
@include css_sprite("../img/buyer/mod_title.png", 0, -284px);
}
}
&:nth-child(5) {
.content-title {
width: 300px;
height: 50px;
@include css_sprite("../img/buyer/mod_title.png", 0, -590px);
}
}
.content {
line-height: 30px;
padding: 20px;
text-indent: 30px;
border: 1px solid #ccc;
border-radius: 20px;
margin: 10px 0 30px 0;
}
&:nth-child(3) {
img {
margin: 0 auto;
padding: 10px 0;
}
}
&:nth-child(4) {
img {
margin: 0 auto;
padding: 10px 0;
}
}
&:last-child {
.content {
p {
strong {
font-size: 18px;
color: #000;
}
b {
font-size: 18px;
color: #D34462;
}
&:nth-child(8) {
b {
color: #000;
}
}
&:nth-child(5) {
background-color: #D34462;
font-size: 20px;
color: white;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
}
&:last-child {
color: #000;
font-weight: bold;
}
}
}
}
}
}
}
3、效果：
