请老师审批
来源：4-6 商品展示、返回顶部、帮助、底部footer区
丶筱云
2019-12-11 15:53:58
1、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/twelveGrid.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="header-logo-container col-8 col-md-3">
<a href="./index.html" class="header-logo">
<img src="img/logo.svg">
</a>
</div>
<div class="header-btn-container col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container d-none d-md-block col-md-9">
<ul class="header-nav">
<li class="header-nav-item"><a href="###" class="header-nav-link">手机&平板</a></li>
<li class="header-nav-item"><a href="="###"" class="header-nav-link">电视&影音</a></li>
<li class="header-nav-item"><a href="="###"" class="header-nav-link">生活家电</a></li>
<li class="header-nav-item"><a href="="###"" class="header-nav-link">电脑/办公/存储</a></li>
<li class="header-nav-item"><a href="="###"" class="header-nav-link">网上商城</a></li>
</ul>
</div>
</div>
</div>
</header>
<nav class="nav" id="nav">
<ul class="container">
<li><a href="###" class="nav-link">手机&平板</a></li>
<li><a href="###" class="nav-link">电视&影音</a></li>
<li><a href="###" class="nav-link">生活家电</a></li>
<li><a href="###" class="nav-link">电脑/办公/存储</a></li>
<li><a href="###" class="nav-link">网上商城</a></li>
</ul>
</nav>
<div class="slider">
<div class="container">
<div class="row">
<div class="text-container col-md-5 push-md-7">
<h2 class="text-title">Galaxy S9 | S9+</h2>
<h3 class="text-subtitle">冰蓝 焕新上市</h3>
<div class="btns-container">
<a href="###" class="btns">了解更多</a>
<a href="###" class="btns">立即购买</a>
</div>
</div>
<div class="image-container col-md-7 pull-md-5">
<img src="img/1.png" alt="">
</div>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/2-1.jpg" alt="">
</div>
<div class="col-md-4">
<img src="img/2-2.jpg" alt="">
</div>
<div class="col-md-4">
<img src="img/2-3.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="backTop d-md-none">
<a href="###" class="backTop-link">回到顶部<img src="img/up.svg" alt="" class="up"></a>
</div>
<div class="bottom">
<div class="container">
<div class="bottom-text-container">
<p class="bottom-text-item">* Galaxy A9s具备后置四摄功能，Galaxy A6s为后置双摄产品。</p>
<p class="bottom-text-item">* Galaxy S9 | S9+广告中手机背面图是Galaxy S9+，Galaxy S9为背面单摄像头产品。</p>
<p class="bottom-text-item">* 本网站的产品图片以及型号、数据、功能、性能、规格参数等仅供参考，三星有可能对上述内容进行改进，具体信息请参照产品实物、产品说明书。</p>
<p class="bottom-text-item">* 除非经特殊说明，本网站中所涉及的数据均为三星内部测试结果，涉及的对比均为与三星产品相比较。</p>
</div>
<div class="bottom-backTop d-none d-md-block"><a href="###" class="backTop-link">回到顶部<img src="img/up.svg" alt="" class="up"></a></div>
<div class="row">
<ul class="bottom-ul col-6 col-md-3">
<li><h3 class='bottom-ul-title'>网站地图</h3></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>
<ul class="bottom-ul col-6 col-md-3">
<li><h3 class='bottom-ul-title'>三星商城</h3></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>
<ul class="bottom-ul col-6 col-md-3">
<li><h3 class='bottom-ul-title'>服务支持</h3></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>
<ul class="bottom-ul col-6 col-md-3">
<li><h3 class='bottom-ul-title'>官方分享</h3></li>
<li><img src="img/weixin.svg" alt=""><img src="img/weibo.svg" alt=""></li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<ul class="col-md-10">
<li><a href="###">服务条款</a></li>
<li><a href="###">重要声明</a></li>
<li><a href="###">隐私政策</a></li>
</ul>
<div class="col-md-2">
<a href="###">中国/中文 ></a>
</div>
</div>
<p>此网页最好使用IE10浏览器、Chrome浏览器、Safari浏览器或其他新式浏览器进行浏览</p>
<p>京ICP备05068163号 京公网安备110105011756号</p>
</div>
</footer>
<script>
var btn = document.getElementById('btn-toggle');
var nav = document.getElementById('nav');
var navExtendClassName = 'nav-extend';
nav.style.display = 'none';
btn.onclick = function() {
if(nav.classList.contains(navExtendClassName)){
nav.removeEventListener('transitionend',bindEvent);
nav.addEventListener('transitionend',bindEvent,false);
nav.classList.remove(navExtendClassName);
}else{
nav.removeEventListener('transitionend',bindEvent);
nav.style.display = 'block';
setTimeout(function() {
nav.classList.add(navExtendClassName);
},30);
}
};
function bindEvent() {
this.style.display = 'none';
}
</script>
</body>
</html>
2、index.css
/*布局 start*/
/*header*/
.header{
background-color: #fff;
border-bottom: 1px solid #dadada;
}
.header-logo-container,
.header-btn-container,
.header-nav-container{
height: 64px;
}
.header-btn-container{
display: flex;
justify-content: flex-end;
align-items: center;
}
/*nav*/
.nav{
overflow: hidden;
border-bottom: 1px solid #dadada;
height: 0;
transition: height .5s;
}
.nav-extend{
height: 201px;
}
/*slider*/
.slider{
margin-top: 20px;
}
.slider .row{
background-color: #eee;
margin-left: 0;
margin-right: 0;
}
.text-container{
margin: 10px 0;
}
@media (min-width: 768px){
.slider .row{
display: flex;
align-items: center;
}
}
/*banner*/
.banner{
margin:20px 0;
}
/*backtop*/
.backTop{
height: 82px;
background-color: #fff;
border-bottom: 1px solid #dadada;
border-top: 1px solid #dadada;
position: relative;
}
.bottom{
background-color: #eee;
}
/*bottom-backTop*/
.bottom-backTop{
display: none;
height: 38px;
position: relative;
}
/*footer*/
.footer{
background-color: #363636;
color: #a6a6a6;
padding:15px 0;
}
/*布局 end*/
/*组件 start*/
/*btn-toggle*/
.btn-toggle{
padding: 10px;
background-color: transparent;
border:none;
border-radius: 4px;
cursor: pointer;
}
.btn-toggle:hover{
background-color: #f9f9f9;
}
.btn-toggle-bar{
display: block;
width: 24px;
height: 4px;
background-color: #363636;
border-radius: 2px;
}
.btn-toggle-bar + .btn-toggle-bar{
margin-top: 4px;
}
.btn-toggle:hover .btn-toggle-bar{
background-color: #142810;
}
/*组件 end*/
/*内容 start*/
.header-logo{
display: flex;
width: 136px;
height: 100%;
align-items: center;
}
.header-nav,
.header-nav-item,
.header-nav-link{
height: 100%;
}
.header-nav{
display: flex;
justify-content: flex-end;
}
.header-nav-item{
margin-left: 24px;
}
.header-nav-item:first-of-type{
margin-left: 0;
}
.header-nav-link{
display: flex;
align-items: center;
font-weight: bold;
}
.nav-link{
display: block;
height: 40px;
line-height: 40px;
}
.text-container{
text-align: center;
}
.text-subtitle{
margin:15px 0;
font-weight: normal;
}
.btns{
display: inline-block;
padding:10px 30px;
background-color: transparent;
border: 1px solid #000;
border-radius: 30px;
margin-right: 10px;
transition: all 0.3s;
font-weight: bold;
}
.btns:last-child{
margin-right: 0;
}
.btns:hover{
background-color: #000;
color: #fff;
}
.backTop-link{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.up{
width: 10px;
vertical-align: middle;
margin-left: 5px;
position: relative;
top: -2px;
}
.bottom-text-container{
padding: 20px 0;
}
.bottom-ul{
margin-bottom: 10px;
}
.bottom-ul-title{
line-height: 32px;
}
.bottom-ul > li:not(:first-of-type){
line-height: 28px;
}
.bottom-ul img{
width: 40px;
}
.bottom-ul img:last-of-type{
margin-left: 15px;
}
.bottom-backTop > .backTop-link{
position: absolute;
right: 15px;
top: 0;
left: auto;
transform: translate(0,0);
}
.footer a{
color: #fff;
}
.footer ul{
display: flex;
}
.footer li{
margin-left: 20px;
}
.footer li:first-of-type{
margin-left: 0;
}
.footer p{
font-size: 12px;
line-height: 24px;
}
.footer a:hover{
text-decoration: underline;
}
/*内容 end*/
1回答
-
好帮手慕言
2019-12-11
同学你好，整体效果是可以的。如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
