导航部分

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>头部</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/header.min.css"><base href="" target="_top">
</head>
<body><header><!-- 头部 --><div class="head"><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="./Notice.html" >购物须知</a></li></ul></div><!-- 中间部分 --><div class="middle"><img src="./img/head/logo.png" alt=""><div class="search"><input type="text" placeholder="搜索偶像、商品"><a href="#"></a></div>  <ul><li><img src="./img/head/avatar.png" alt=""><a href="./Sign in.html">登录</a><li><a href="#">我的订单</a></li></li><li><img src="./img/head/cart.png" alt=""><a href="">购物车</a></li></ul></div><!-- 底部 --><div class="foot"><div class="artist"> <a href="#">艺人分类</a></div><ul><li><a href="./index.html">首页</a></li><li><a href="./list.html">专辑</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></div></header>
</body>
</html>

scss代码

header {width: 100%;overflow: auto;background-color: #000;.head {display: flex;justify-content: space-between;margin-left: 50px;ul {li {display: inline-block;width: 150px;text-align: center;line-height: 30px;a {color: gray;}img {width: 131px;height: 130px;border: 10px solid white;display: none;position: absolute;}&:hover {background-color: white;}&:hover img {display: block;}&:nth-child(3):hover a {display: block;color: rgb(223, 38, 100);background-color: #000;}}}}.middle {display: flex;justify-content: space-between;margin-left: 130px;.search {position: relative;input {width: 440px;height: 45px;outline: none;border: none;line-height: 70px;padding-left: 20px;background: url(../img/head/search_icon.png) no-repeat 0 -40px;&:focus {background: url(../img/head/search_icon.png) no-repeat 0 2px;}&:focus+a {background: url(../img/head/search_icon.png) no-repeat -464px -48px;}}a {display: inline-block;width: 30px;height: 30px;position: absolute;top: 8px;right: 20px;background-color: #fff;background: url(../img/head/search_icon.png) no-repeat -464px -5px;}}ul {line-height: 70px;margin-right: 100px;li {display: none;width: 100px;color: white;display: inline-block;img {width: 16px;}a {color: white;}}}}.foot {width: 100%;height: 45px;color: white;background-color: #000;border-top: 2px solid gray;.artist {font-weight: bold;float: left;width: 40%;height: 40px;a {display: block;width: 100px;height: 40px;margin-left: 200px;text-decoration: none;line-height: 40px;color: white;text-align: center;&:hover {color: rgb(245, 42, 110);border-bottom: 3px solid rgb(245, 42, 110);}}}ul {float: left;width: 60%;li {float: left;width: 100px;line-height: 40px;list-style: none;text-align: center;a {color: #fff;}&:hover {color: rgb(245, 42, 110);border-bottom: 3px solid rgb(245, 42, 110);}}}}
}

底部

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>底部</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/footer.min.css">
</head>
<body><footer><div class="footer-img"><img src="./img/footer/footer.png" alt=""></div><div class="footer-text"><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></ul><p><img src="./img/footer/culture.png" alt=""> Copyright c 2009 - 2016 yinyuetaicom广播电视节目制作经营许可证编号(京字第1891号|京网文[2014]2037-287号|网络视听许可证0110413号</p><p>京公网安备11010502014900号|京CP备11024134号-1|京CP证060716号|出版物经营许可证新出发京零字第朝130062号|增值电信业务经营许可证B2-20140501<img src="./img/footer/biaoshi.gif" alt=""></p><p>食品经营许可s证:JY11105040485363|营业执照</p></div></footer>
</body>
</html>

scss代码

footer {background-color: rgb(245, 245, 245);.footer-img {img {margin-top: 30px;width: 100%;}}.footer-text {width: 100%;height: 200px;background-color: #000;ul {text-align: center;padding-top: 50px;li {display: inline-block;width: 100px;border-right: 1px solid white;animation: name 3s;&:last-child {border: none;}a {color: rgb(101, 101, 101);}}}p {font-size: 14px;text-align: center;margin-top: 10px;color: rgb(147, 149, 151);&:nth-child(3),&:nth-child(4) {position: relative;top: -36px;}&:nth-child(2) img {width: 20px;}&:nth-child(3) img {width: 40px;}}@keyframes name {from {filter: blur(2px);transform: scale(0.9);}to {filter: blur(0px);transform: scale(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>首页</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.min.css">
</head><body><iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe><main><div class="main-top"><section><div><img src="./img/index/banner/1.jpg" alt=""></div><div><img src="./img/index/banner/2.jpg" alt=""></div><div><img src="./img/index/banner/3.jpg" alt=""></div><div><img src="./img/index/banner/4.jpg" alt=""></div></section></div><div class="main-middle"><div class="middle-top"><div class="top-one"></div><div class="top-two"><a href="#"><img src="./img/index/necessary/1.png" alt=""><p> 官方应援手灯专区</p></a><a href="#"><img src="./img/index/necessary/2.gif" alt=""><p>官方应援手幅专区</p></a><a href="#"><img src="./img/index/necessary/3.png" alt=""><p>签名商品专区</p></a><a href="#"><img src="./img/index/necessary/4.gif" alt=""><p>官方DVD专区</p></a><img src="./img/index/special.jpg" alt=""></div></div><div class="middle-middle"><div class="top-one"></div><ul><li><img src="./img/index/top/a/toplist_a01.jpg" alt=""><p>薛之谦</p></li><li><img src="./img/index/top/a/toplist_a02.jpg" alt=""><p>iKON</p></li><li><img src="./img/index/top/a/toplist_a03.jpg" alt=""><p>鹿晗</p></li><li><img src="./img/index/top/a/toplist_a04.jpg" alt=""><p>GoT7</p></li><li><img src="./img/index/top/a/toplist_a05.jpg" alt=""><p>EXO</p></li><li><img src="./img/index/top/a/toplist_a06.jpg" alt=""><p>Astro(韩国)</p></li><li><img src="./img/index/top/a/toplist_a07.jpg" alt=""><p>Winner</p></li><li><img src="./img/index/top/a/toplist_a08.jpg" alt=""><p>BigBang</p></li></ul></div><div class="middle-foot"><div class="top-one"></div><ul><li><a href="#"><img src="./img/pro/1.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="#"><img src="./img/pro/2.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="#"><img src="./img/pro/3.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="#"><img src="./img/pro/4.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="#"><img src="./img/pro/5.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="#"><img src="./img/pro/6.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="./goods.html"><img src="./img/pro/7.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="#"><img src="./img/pro/8.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li><li><a href="#"><img src="./img/pro/9.jpg" alt=""><p>【现货包邮】加—联创1more bear 万魔熊头</p><p>￥50</p><p><span></span>0</p></a></li></ul></div></div></main><iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body></html>

scss代码

main {background-color: rgb(245, 245, 245);.main-top {width: 90%;height: 398px;overflow: hidden;margin: auto;section {display: flex;width: 100%;height: 398px;transition-duration: 5s;div {width: 100%;height: 398px;float: left;img {width: 1382px;height: 398px;}}}&:hover section {transform: translateX(-300%);}}.main-middle {width: 90%;margin: auto;margin-bottom: 60px;.middle-top {width: 100%;.top-one {margin: 20px 0;width: 150px;height: 50px;background: url(../img/index/title.png) no-repeat 0 0;}.top-two {display: flex;a {img {width: 220px;}p {width: 222px;height: 20px;color: gray;background-color: #fff;text-align: center;margin-left: 24px;}}img {margin-left: 38px;}}}.middle-middle {width: 100%;.top-one {margin: 20px 0;width: 150px;height: 50px;background: url(../img/index/title.png) no-repeat 0 -50px;}ul {display: flex;li {margin-left: 24px;animation: name1 3s ease-out;img {width: 146px;}p {width: 148px;height: 35px;font-weight: bold;line-height: 35px;background-color: #fff;text-align: center;&:hover{color: rgb(255, 44, 158);}}}}}.middle-foot {width: 100%;margin: 0 auto;.top-one {width: 150px;height: 50px;background: url(../img/index/title.png) no-repeat 0 -82px;}ul {display: flex;justify-content: space-between;flex-wrap: wrap;li {width: 30%;height: 175px;margin: 20px 0;background-color: #fff;border-bottom: 3px solid transparent;&:hover {border-bottom: 3px solid red;}a {img {float: left;width: 172px;margin: 3px 0 0 3px;}p {margin-top: 30px;padding-left: 195px;color: rgb(100, 94, 93);&:nth-child(3) {color: rgb(255, 44, 158);}&:nth-child(4)span{display: inline-block;width: 12px;height: 12px;background: url(../img/icon/ico.png) no-repeat 0 -72px;}&:nth-child(4)span:hover{display: inline-block;width: 12px;height: 12px;background: url(../img/icon/ico.png) no-repeat -12px -72px;}}}}}}@keyframes name1 {25% {transform: scale(0.5);}50% {transform: scale(1);}75% {transform: scale(0.5);}100% {transform: scale(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>列表页面</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/list.min.css">
</head>
<body><iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe><div class="page"><div class="list-nav"><dl><dt>分类</dt><dd><a href="#">原版</a><a href="#">签名版</a><a href="#">内地引进版</a><a href="#">演会DVDILIVE</a><a href="#">限量版</a><a href="#">贴纸/文件夹/笔记木</a></dd></dl><dl><dt>公司</dt><dd><a href="#">MBK Entertainment环球唱片</a><a href="#">艺人工作室</a><a href="#">英皇娱乐</a><a href="#">Fantaglo</a><a href="#">乐华娱乐</a><a href="#">Woolim</a><a href="#">VM Enterlainment</a><a href="#">相信音乐</a><a href="#">TS Entortainment</a><a href="#">环球中国</a><a href="#">华纳唱片</a></dd></dl></div><div class="list-content"><div><a href="#"><img src="./img/pro/1.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/2.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/3.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/4.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/5.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/6.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="./goods.html"><img src="./img/pro/7.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/8.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/9.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/1.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/3.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/5.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/2.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/4.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="./goods.html"><img src="./img/pro/7.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div><div><a href="#"><img src="./img/pro/5.jpg" alt=""><p>宇宙少女迷你五辑《WJ PLEASE?》</p><span>￥50</span><span></span><span>7997655</span></a></div></div></div><iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body>
</html>

scss代码

.page{background-color: rgb(245, 245, 245);.list-nav{width: 80%;margin: 20px auto;border: 1px solid rgb(209,209,209);dl{display: flex;margin-top: 20px;&:first-child{border-bottom: 1px dotted gray;}dt{width: 80px;height: 30px;font-size: 18px;font-weight: bold;}dd{margin-left: 30px;a{display: inline-block;height: 40px;margin-left: 90px;color: rgb(153,153,153);}}}}.list-content{width: 80%;margin: auto;display: grid;grid-template-columns: repeat(4,288px);//4列grid-template-rows: repeat(4,360px);//4行column-gap: 20px;row-gap: 20px;div{background-color: #fff;a{img{width: 286px;}p{color: rgb(157,157,157);}span{margin: 20px 0 0 45px;color: rgb(255, 44, 158);&:nth-child(4){display: inline-block;width: 12px;height: 12px;background: url(../img/icon/ico.png) no-repeat 0 -72px;}&:nth-child(4):hover{display: inline-block;width: 12px;height: 12px;background: url(../img/icon/ico.png) no-repeat -12px -72px;}&:nth-child(5){color: rgb(157,157,157);}}}}}
}

商品页面

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>商品</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/goods.min.css">
</head>
<body><iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe><div class="main-goods"><main><div class="text"><div>首页>专辑>【独家发售】大张伟2018全新专辑《人间精品》</div><img src="./img/goods/demo.jpg" alt=""></div><div class="middle"><h2>【独家发售】大张伟2018全新专辑《人间精品》</h2><p>商城价格<span> ￥99.9</span><del>￥198</del></p><hr><p class="weight">重量 <span>0.33kg</span></p><p>数量</p><p class="num"><img src="./img/goods/num.jpg" alt=""></p><p class="jlt"> <span class="gwc"></span><span class="gm"></span></p><p class="foot"><img src="./img/goods/zpbz.png" alt=""></p></div><footer><img src="./img/goods/tuangou.jpg" alt=""><img src="./img/goods/footer.png" alt=""></footer></main>    </div><iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body>
</html>

scss代码

.main-goods{width: 100%;main {width: 80%;margin: 0 auto;.text {float: left;div {margin: 30px 0;color: rgb(174, 166, 166);}img{float: left;}}.middle {float: left;margin: 90px 0 0 40px;p {color: rgb(174, 166, 166);margin-top: 20px;span {font-size: 25px;color: rgb(222, 72, 103);margin-right: 15px;}}.weight span {font-size: 16px;margin-left: 20px;color: rgb(174, 166, 166);}.num img{width: 60px;position: relative;bottom: 40px;left: 55px;}.jlt{height: 50px;margin-top: 115px;}.jlt .gwc{display: block;width: 172px;height: 55px;background: url(../img/goods/btns.png) no-repeat;background-position: -9px -8px;}.jlt .gm{position: relative;bottom: 56px;left: 180px;display: block;width: 172px;height: 55px;background: url(../img/goods/btns.png) no-repeat;background-position: -9px -66px;}.foot img{margin-top: 10px;}}footer{img{width: 100%;}}}
}

购物须知页面

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>购物须知</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/Notice.min.css">
</head><body><iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe><div class="page"><div class="page-head"><h2>购物须知</h2><ul><li><a href="#mod1'">预定商品</a></li><li><a href="#mod2">专辑价格</a></li><li><a href="#mod3">发货周期</a></li><li><a href="#mod4">快递</a></li><li><a href="#mod5">售后相关</a></li></ul></div><div class="page-middle"><!-- 预定商品 --><div class="mod" id="mod1"><div class="middle-title"></div><div class="middle-text"><p>预定商品:非现货的商品，为确保供货数量以及避免过量囤积，因此将通过收取预定金的形式进行把控，且无论是哪种形式的预定商品，预定金一旦支付成功，均不予以退还。敬请周知。</p><p>如预定商品为全款预定金商品，那么商品正式发行后，则会直接发货;</p><p>如预定商品为定额预定金商品（众筹预定)，那么商品正式发行后，则需再补充支付尾款。如若不支付尾款，预定金则不予以退还。*预定金是指商品正式发行前夕，预定购买时所支付的一定数额的金钱作为担保。</p><p>预定商品的预定金分为全款预定金和定额预定金两种形式。</p></div></div><!-- 专辑价格 --><div class="mod" id="mod2"><div class="middle-title"></div><div class="middle-text"><p>商城发售的海外专辑的全款价格内包含专辑定价+国际邮费+关税+增值税+审批费用，不含国内邮费。。</p><p>如专辑为众筹预定商品,则专辑发行后会短信通知补款,补款成功后同步计入专辑销量《韩国专辑计入Hanteo Chart诮量榜》。</p></div></div><!-- 发货周期 --><div class="mod" id="mod3"><div class="middle-title"></div><div class="middle-text"><p><img src="./img/buyer/1.jpg" alt=""></p><p>补充说明:</p><p>商城发售的海外进口专辑均为预售专辑;</p><p>进口外文原板专辑需要报批审核,并加财贴「国家专用进口防伪标识」贴纸。审核周期约为20个工作日,因需用实体专辑报批,所以在专辑正式发行后才可递交报批材料。</p><p>另外，国际运输+中国海关开箱验货+通笑周期约为2周左右。</p><p>预售海外专辑预计将于专辑正式发售后40个工作日内发货。当专辑发行时间与法定假日冲撞时,则会进行顺廷,具体时间将根据当时情况另行通知。(此为参考时间。发货时问以实际情况为准)</p></div></div><!-- 快递 --><div class="mod" id="mod4"><div class="middle-title"></div><div class="middle-text"><p>订购众筹商品时暂不需要支付邮费，商品补款时支付国内邮费。</p><p>全款预定订单下单时支付国内运费。</p><p>邮费计算说明: <span><img src="./img/buyer/2.jpg" alt=""></span></p><p>商城委托第三方快递公司为客户提供送货服务，客户无须向快递公司支付额外的费用。客户可在商城*我的订单"查询货物配送信息，也可以登录第三方快递网站查询快递信息。</p><p>注意:港澳台地区的用户下单后需联系商城QQ客服补运费后才能正常发货。</p><p>下单时请在留言区备注可以联系上的QQ,若没有QQ,请留下邮箱地址,以便工作人员与您取得联系。</p></div></div><!-- 售后相关 --><div class="mod" id="mod5"><div class="middle-title"></div><div class="middle-text"><p>商品售出后，如无质量问题不予退换。<span><strong>不接受如不喜欢、和想象的不一样、有色差</strong></span> 等主观因素的退换要求。</p><p>快递签收后7日内,如出现非人为因素的损坏。或密封包装内的商品有劫失等质量问题,需提供电子订单,商品和快递外包装完整图片,联系音悦商城售后含服进行退、换货。</p><p>如因商城的原因出现少发、漏发等情况,可联系商城客服凭商H购物订单号确认后进行补发;如出现发错件的情况，可在保持专辑包装完好、不影响二次销售的状态下，进行更换。已拆封的音像制品将无法受理退、换货，请您谅解。</p><p>缺失商品的补发、损坏商品换货的邹邽费均由商城承担。</p><p>要进行退、换货时,需将退、换商品寄回,请您先垫付寄回运费,后联系商城客服进行退邮费。寄回商品时请发普通快递,不要使用顺丰到付,否则将拒收。退邮费上限为15元,超出部分将由您自己承担，敬请谅解</p><p>请您一定要当快递员的面拆件检查货品是否完好后再行签收。如有破损请不要签收，并交与快逆员原件退回。如未检查就签收包裹而引发问题，商城将无法为您向快递索赔，造成的损失将由买方承担。</p><p><span><b>请您一定保证收货信息正确，联系电话畅通。如因买家原因，快遂公司人员未能与买家联系到，导致无法正常收货或货品退回出现的商城二次发货。需要买家补款二次邮费。</b></span></p></div></div></div></div><iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body></html>

scss代码

.page {.page-head {width: 70%;margin: 20px auto;text-align: center;h2 {color: rgb(211, 68, 98);}ul {width: 80%;margin: auto;li {display: inline-block;background: url(../img/buyer/mod_circle.png) 18px 10px no-repeat;a {width: 70px;display: inline-block;padding-top: 40px;color: rgb(204, 198, 199);}&:hover {background: url(../img/buyer/mod_circle.png) 18px -92px no-repeat;a {color: rgb(211, 68, 98);}}}}}.page-middle {width: 80%;margin: 30px auto;.mod {width: 80%;margin: auto;.middle-title {width: 270px;height: 60px;margin: 20px 0;background: url(../img/buyer/mod_title.png) no-repeat 0 -180px;}.middle-text {border: 2px solid gray;border-radius: 5px;p {line-height: 20px;padding: 0 20px;margin: 20px 0;text-indent: 34px;}}}#mod2 .middle-title {background-position: 0 10px;}#mod3 .middle-title {background-position: 0 -80px;}#mod4 .middle-title {background-position: 0 -275px;}#mod5 {.middle-title {background-position: 0 -586px;}.middle-text {p {span {color: rgb(211, 68, 98);strong {font-size: 18px;}}&:nth-child(5){font-weight: bold;color: white;margin: 0 20px;padding: 10px 0;background-color: rgb(211, 68, 98);}}}}}
}

登录页面

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>登录</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/Sign in.min.css">
</head>
<body><div class="Sign"><form action="./index.html" method="get"><p class="Sign-in">登录</p><br><input type="text" placeholder="手机号邮箱" required><br><input type="password" placeholder="密码" required><br><input type="checkbox" >自动登录<br><button>提交</button><br></form></div>
</body>
</html>

scss代码

body{background-size: cover;background-image: url(../img/1.gif);background-repeat: no-repeat;
}.Sign{width: 300px;height: 270px;background-color: rgba(241, 207, 207,0.3);border-radius: 10px;margin: 240px auto;text-align: center;.Sign-in {font-size: 25px;font-weight: bold;padding-top: 10px;}input {width: 220px;height: 30px;border-radius: 10px;margin-top: 10px;outline: none;}input[type="checkbox"]{width: 20px;position: relative;top: 8px;}button {width: 205px;height: 30px;border-radius: 10px;margin-top: 10px;border: 1px solid red;background-color: red;color: white;}a {font-size: 10px;text-decoration: none;color: #000;}.dl {color: red;}}

注册页面

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>登录</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/register.min.css">
</head><body><div class="register"><form action="./Sign in.html" method="get"><p class="hui">注册</p><br><input type="text" placeholder="手机号邮箱" required><br><input type="password" placeholder="密码" required><br><input type="password" placeholder="确认密码" required><br><input type="text" placeholder="验证码" required><br><button>提交</button><br><a href="./Sign in.html">已有帐号？<span class="dl">马上登录</span></a><br><a href="#">其他方式登录<span class="dl">QQ登录 微信登录 微博登录</span></a><br></form></div>
</body></html>

scss代码

body{background-size: cover;background-image: url(../img/1.gif);background-repeat: no-repeat;
}.register{width: 300px;height: 350px;background-color: rgba(241, 207, 207,0.3);border-radius: 10px;margin: 150px auto;text-align: center;.hui {font-size: 25px;font-weight: bold;padding-top: 10px;}input {width: 220px;height: 30px;border-radius: 10px;margin-top: 10px;outline: none;}button {width: 205px;height: 30px;border-radius: 10px;margin-top: 10px;border: 1px solid red;background-color: red;color: white;}a {font-size: 10px;text-decoration: none;color: #000;}.dl {color: red;}}

HTML+SASS项目：音乐Tai相关推荐

管理Sass项目文件结构
http://www.w3cplus.com/preprocessor/architecture-sass-project.html 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.j ...
微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器该项目只适合练手,大佬请绕道项目展示图: 项目介绍微信小程序音乐播放器页面: 音乐推荐.播放器.播放列表功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...
Java web项目——音乐播放器
Java web项目--音乐播放器 1,需求分析 ①登录并查看自己的音乐列表 ②从本地上传音乐 ③删除某个音乐 ④删除选中的音乐 ⑤查询音乐(支持模糊查询) ⑥添加音乐到喜欢列表且可进行移除 ⑦可在喜 ...
小项目----音乐在线播放器
目录音乐播放器项目功能: 项目框架: 项目的创建很重要: 数据库设计在idea中配置数据库和xml 一.登录板块设计 1创建User类 2创建UserMapper和Controller接口 3. ...
个人项目---音乐视频播放器
项目背景:一个公共的音乐视频播放器,用户通过上传歌曲或视频分享自己喜欢的音乐和视频,也可以把列表中的音乐或视频添加为喜欢,支持模糊查询等功能. 基本功能: 新用户注册老用户登录主界面中能看到当前系 ...
Linux项目:音乐播放器
文章目录 1.项目介绍 2.前端代码 1.httplib快速搭建一个http服务器 2.B/S双方的数据交互选择JSON数据格式,http请求和响应的正文中采用jsoncpp开源库 3.前段的js代码 ...
个人项目——音乐播放器(一)
1 功能需求及技术可行性分析 1.1编写目的现今社会生活紧张,而欣赏音乐史其中最好的舒缓压力的方式之一,音乐播放类的软件数不胜数,为什么我还要再写一个播放器出来呢?因为现有的音乐播放器功能实在 ...
WEB项目-音乐播放器
音乐播放器需求分析数据库设计实体类 Dao层 Servlet层补充需求分析 1.注册登陆使用post请求,登陆路径为/login,传输的数据为username,password,这里就使用 ...
Springboot+vue项目音乐网站与分享平台
文末获取源码开发语言:Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:springboot+vue JDK版本:jdk1 ...

HTML+SASS项目：音乐Tai

导航部分

html代码

scss代码

底部

html代码

scss代码

首页部分

html代码

scss代码

列表页面

html代码

scss代码

商品页面

html代码

scss代码

购物须知页面

html代码

scss代码

登录页面

html代码

scss代码

注册页面

html代码

scss代码

HTML+SASS项目：音乐Tai相关推荐

最新文章

热门文章