检查一下 看看还有没有可以修改的
来源：4-6 商品展示、返回顶部、帮助、底部footer区
青旗
2020-10-22 01:33:44
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header class="header-container">
<div class="container">
<div class="row">
<!-- logo -->
<div class="header-logo-container col-8 col-md-3">
<a href="./index.html" class="header-logo">
<img src="img/logo.svg" alt="hello">
</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 col-md-9 d-md-block">
<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-container d-md-none" 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-container">
<div class="container">
<div class="row">
<div class="slider-text-container col-md-5 col-md-push-7">
<h3 class="slider-title">Galaxy S9 | S9+</h3>
<h4 class="slider-subtitle">冰蓝 焕新上市</h4>
<div class="slider-btns">
<a href="#" class="btn-rounded">了解更多</a>
<a href="#" class="btn-rounded">立即购买</a>
</div>
</div>
<div class="col-md-7 col-md-pull-5">
<img src="img/1.png" alt="">
</div>
</div>
</div>
</div>
<div class="btn-backtop">
<button type="button" class="backBtn">
<a href="#">回到顶部</a>
</button>
</div>
<!-- 主体2 -->
<div class="help-container">
<div class="container">
<div class="helper-info-container">
<p>* Galaxy A9s具备后置四摄功能，Galaxy A6s为后置双摄产品。</p>
<p>* Galaxy S9 | S9+广告中手机背面图是Galaxy S9+，Galaxy S9为背面单摄像头产品。</p>
<p>* 本网站的产品图片以及型号、数据、功能、性能、规格参数等仅供参考，三星有可能对上述内容进行改进，具体信息请参照产品实物、产品说明书。。</p>
<p>* 除非经特殊说明，本网站中所涉及的数据均为三星内部测试结果，涉及的对比均为与三星产品相比较。</p>
</div>
<div class="row">
<button type="button" class="backBtn d-none d-md-block help-btn col-md-offset-10 col-md-2">
<a href="#">回到顶部</a>
</button>
</div>
<div class="row">
<div class="col-6 col-md-3">
<h3>网站地图</h3>
<ul class="help-ul">
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>网站地图</h3>
<ul class="help-ul">
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>网站地图</h3>
<ul class="help-ul">
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
</ul>
</div>
<div class="col-6 col-md-3">
<h3>网站地图</h3>
<ul class="help-ul">
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
<li>关于三省</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="footer-container">
<div class="container">
<div class="row">
<div class="col-md-10">
<ul>
<li class="footer-item">服务条款</li>
<li class="footer-item">服务条款</li>
<li class="footer-item">服务条款</li>
</ul>
</div>
<div class="col-md-2" style="color: white; font-weight: bold;">中国/中文</div>
</div>
<div class="last">
<p>此网页最好使用IE10浏览器、Chrome浏览器、Safari浏览器或其他新式浏览器进行浏览</p>
<p>京ICP备05068163号 京公网安备110105011756号</p>
</div>
</div>
</footer>
<script>
var nav = document.getElementById('nav');
var navExtendedClassName = 'nav-container-extended';
document.getElementById('btn-toggle').onclick = function () {
if (nav.classList.contains(navExtendedClassName)) {
nav.classList.remove(navExtendedClassName)
} else {
nav.classList.add(navExtendedClassName)
}
}
</script>
</body>
</html>
1回答
-
同学你好，布局是可以的，但是需要将自己写的index.css文件代码粘贴上来，否则老师使用案例源码中的index.css文件测试，效果有不太美观的地方：
祝学习愉快！
0
相似问题