制作一个技术文档页面
Willem Zhang Lv5

需求

需求 1: 此 app 中应存在一个 id=”main-doc” 的 main 元素,它包含页面的主要内容(技术文档)

需求 2: 在 #main-doc 元素内,应有一些 section 元素,每个元素的 class 都应为 main-section。 应存在至少 5 个这样的元素

需求 3: 每个 .main-section 内的第一个元素应为 header 元素,其中包含描述该部分主题的内容文本

需求 4: 类名为 main-section 的每个 section 元素都应有一个与包含在其中的每个 header 的文本相对应的 id, 所有空格都应该被替换为下划线(例如,包含标题 “JavaScript and Java” 的 section 应有一个相应的 id=”JavaScript_and_Java”)

需求 5: 所有 .main-section 元素内总计应有至少 10 个 p 元素

需求 6: 所有 .main-section 元素内总计应有至少 5 个 code 元素

需求 7: 所有 .main-section 元素内总计应有至少 5 个 li 元素

需求 8: 此 app 中应存在一个 id=”navbar” 的 nav 元素

需求 9: navbar 元素内应有一个 header 元素,其中包含描述技术文档主题的内容文本

需求 11: navbar 中的 header 元素应置于 navbar 中所有 a 元素之前

需求 14: 在常规尺寸的设备上(如笔记本电脑和台式机),id=”navbar” 的元素应显示在屏幕左侧,且始终对用户可见

需求 15: 在此 app 中,应至少使用一次媒体查询

解决:

需求14:

Position属性四个值:static、fixed、absolute和relative的区别和用法

fixed(固定定位) 相对于浏览器窗口进行定位

absolute(绝对定位)相对于 static 定位以外的第一个父元素进行定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#navbar {
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}

#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}

结果页

codepen

待解决

让导航a标签垂直排列

  • Post title:制作一个技术文档页面
  • Post author:Willem Zhang
  • Create time:2021-03-29 02:39:31
  • Post link:https://ataraxia.top/2021/03/28/制作一个技术文档页面/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments