发表于： 2018-05-23 23:44:53
1 602
今天完成的事情
- # 任务8首页页眉和导航条的修改以及添加下拉菜单;
- # 合作企业页面主体的制作,职位列表的制作;
明天计划的事情
- # 实现任务8三个页面的互相跳转,测试和重构任务8的代码,提交任务8
遇到的问题
已解决
# 用css样式实现下拉菜单
- 解决思路:关键技能:hover选择器/display:none | block/,即只有经过右侧汉堡菜单时才在下方显
- 示子菜单.
- 思路一:在导航栏下方直接把子菜单的样式画出来,之后:hover选择器始终无法把导航栏内部的汉堡图标与导航栏外的子菜单联系起来,之后查阅资料得知,:hover选择器只有对父子元素和兄弟元素才会起作用.
- 思路二:在明白:hover选择器的局限之后,接下来的事情就在可控的范围内了.将子菜单放入导航栏内部,使子菜单与汉堡图标成为兄弟元素,然后通过绝对定位摆放到导航栏下方即可.
- 注意事项:在两个兄弟元素中使用需要注意的一点是,放在前面的元素可以控制后面的元素,反之不能.这个:hover选择器告诉了我们:老子管儿子,哥哥管弟弟,别家的事情完全不相干;
未解决
# 在使用bootstrap的栅格系统之后,内部的padding值溢出了内容边框.
思路:官方文档有提到类似的问题,但是一笔带过,网上的资料提到了负边距这个概念,还没来的及深究,
收获
- # 隐藏元素的四种方法:
Opacity:0;
opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。
Visibility:hidden;
第二个要说的属性是 visibility。将它的值设为 hidden 将隐藏我们的元素。如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏
Display:none;
display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
Position:absolute; top:9999px;left:9999px;
假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。
# 有关文本处理与换行的思考总结:
强制不换行
p { white-space:nowrap; }自动换行
p { word-wrap:break-word; }强制英文单词断行
p { word-break:break-all; }*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
超出显示省略号
p{text-overflow:ellipsis;overflow:hidden;}white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
word-break: normal|break-all|keep-all;word-break 属性用来标明怎么样进行单词内的断句。
normal：使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行
返回列表
评论