音悦商城项目

最新推荐文章于 2024-05-06 10:17:59 发布

忘川之鱼

最新推荐文章于 2024-05-06 10:17:59 发布

阅读量108

点赞数

文章标签： servlet html 前端

本文链接：https://blog.csdn.net/m0_68618659/article/details/126043131

版权

一、顶部导航

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;

}

}

}

}

}

}

}