成果链接：https://jksmiss.github.io/start-a-project/task13/task13.html
任务耗时2018.7.5-7.6
官方脑图
我的脑图
任务十三的时候，发现要使用了上边的导航栏的部分，那么我要做的就是去使用了这个导航栏的部分首先我在外边的套了个盒子
然后接着在里面
也就是这个地方要进行盒子的嵌套，然后再使用ID的选择器，把他们进行一个连接以后接着使用了下边的部分，进行了外边距的撑起来
然后的部分是里面设置下边框部分就可以了
发表于： 2018-10-30 22:52:17
1 737
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了任务十三
明天计划的事情：（一定要写非常细致的内容）
开始任务十四
遇到的问题：（遇到什么困难，怎么解决的）
就是关于导航栏的嵌套问题，一开始的时候没有使用导航栏去嵌套全部的页面，所以就一直没有做下来、
最后使用了全部的嵌套才成功的
<body>
<div class="nav">
<input type="checkbox" id="menu" style="display: none;">
<ul class="menu-box">
<li>
<span class="notice">公告</span>
<span class="hide-arrow"></span>
</li>
<li>
<span class="setting">设置</span>
<span class="hide-arrow1"></span>
</li>
<li>
<span class="help">帮助</span>
<span class="hide-arrow2"></span>
</li>
<li>
<span class="as">关于</span>
<span class="hide-arrow3"></span>
</li>
</ul>
<div class="content">
<header>
<!-- 首页顶部 -->
<label class="tab" for="menu">
<!-- 第一个选项栏盒子 -->
</label>
</header>
<main>
<!-- 中间部分 -->
<button class="tmb">
<!-- 中间选项一The middle box缩写 -->
<span class="top-txt">上次游戏：捉鬼猜词版</span>
<div class="tlb">
<!-- triangleonebox三角形外部盒子的缩写 -->
<div class="triangleone"></div>
<!-- 第一个三角形 -->
</div>
</button>
<div class="tbb">
<!-- The box below下面的盒子缩写 -->
<div class="tbbone">
<!-- 下面第一个盒子 -->
<span class="tgt">捉鬼游戏</span>
<!-- The game title游戏题目的缩写 -->
</div>
<div class="tbbtwo">
<!-- 底部选项外部盒子 -->
<button class="boo">简化版</button>
<!-- bottomoptionone底部选项第一个盒子缩写 -->
<p>有1133个用户正在玩此款游戏</p>
<!-- 用户情况 -->
<div class="boob">
<!-- Bottom option outer box 底部选项外盒子-->
<button class="boo">猜词版 </button>
<!-- bottomoptionone底部选项第二个盒子缩写 -->
<a class="triangletwo" href="task13-2.html"></a>
<!-- 第二个三角形 -->
</div>
<p>有1133个用户正在玩此款游戏</p>
<button class="boo">白痴版</button>
<!-- bottomoptionone底部选项第三个盒子缩写 -->
<p>有1133个用户正在玩此款游戏</p>
<div class="bsb">
<!-- buttom-slide-box底部滑动外部盒子 -->
<span class="roundness"></span>
<!-- roundness-one底部滑动第一个 -->
<span class="roundness"></span>
<span class="roundness"></span>
<span class="roundness"></span>
<!-- 剩余底部滑动 -->
</div>
</div>
</div>
</main>
</div>
</div>
</body>
收获：（通过今天的学习，学到了什么知识）
重新的复习了下关于导航栏的一些知识
返回列表
评论