WEB前端学习日志第二周 Day3
今日总结:今天的学习内容主要是昨天没有完成的网页的制作,外加一些写网页时的附加知识,例如空白空间的处理、溢出属性等。
空白空间
1:空白空间的处理
white-space:;
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
溢出属性
2:溢出属性(控制内容溢出时候的显示方式):
overflow属性:
auto 当内容超出的时候有滚动条,没有超出的时候没有滚动条
scroll 添加滚动条
hidden 溢出隐藏!
inherit 继承!
省略号显示
3:text-overflow:ellipsis/clip
ellipsis 省略号显示
clip 没有省略号
在网页中单行文本溢出时:
控制单行文本,溢出 省略号显示:
1:white-space:nowrap; 不换行
2:overflow:hidden; 溢出的内容隐藏。
3:text-overflow:ellipsis 溢出的内容省略号显示
4:容器要有宽度!!!
网页制作
继续昨天的代码,该写网页的案例部分和新闻板块儿
代码如下
新闻板块儿的新闻用超链接a来写,并通过建立无序列表来实现
新闻板块儿的新闻用超链接a来写,并通过建立无序列表来实现
用css进行修饰
后续链接部分和底部与上面的方法基本一致最终得到的效果如图(原网页被缩小后的展示)