前端学习笔记（7）之页面构建的技巧扩充

空白空间的处理write-space

属性值：
pre
pre-wrap
pre-line
nowrap 不换行

溢出属性overflow

overflow的两个子属性 overflow-x overflow-y
属性值：
visible 默认值
scroll 产生滚动条
auto 自动
hidden 溢出隐藏
inherit 继承

单行文本溢出省略号显示

套餐用法，直接上这三行，注意容器必须要有宽度才能这么用。

    white-space:nowrap;     //保证文本不换行
    overflow:hidden;		 //溢出隐藏
    text-overflow: ellipsis;  //溢出部分以省略号显示

布局页面的前期规划

1：命名规划：
id名称：划分外围结构 -> 语义化 驼峰式 如：id=‘nav’
版心 ： class名称 连字符 如：class=‘nav-wrap’
内容块 ： class名称 下划线 如：class=‘news_title’

2：外部样式表的创建
a: 重置样式表 （ 对所有标签默认样式的清除 ）
b: 公共样式表
c: 针对每一个网页，都要创建一个属于自己的样式表

新闻列表流程

1：html结构：
如果新闻带有时间

             <li>
                 <a href="#">文本文本文本文本</a>
                 <span>时间</span>
             </li>

2: 给li添加宽和高 高度量取行高即可
3: 如果有时间 需要给a 和 span添加左右浮动
4: 给a 和 span设置文本样式（文字大小、文字颜色…）
5: 用背景图的形式给列表添加列表符合
6: 让背景图的位置上下居中并且 让文本上下居中
7: 给li添加padding-left 把文本往右挤，露出背景图

本文地址：https://blog.csdn.net/qq_42698576/article/details/107576722