第五章 页面规划

页面规划
元素命名
　　id划分外围结构: id选用驼峰式命名法 语义化news/case
　　版心的命名: 连字符命名法 news-wrap
　　内部内容块的命名: 下划线 news_left/news_right
css外部样式表
　　1.每个页面都需要属于自己的样式表
　　2.一个网站，都拥有公共样式表
　　3.重置样式表。（清除所有默认样式）
分别为index.html index.css public.css reset.css

reset.css:重置样式表

@charset "utf-8";
/* 重置样式 */
/* 把所有标签默认的margin padding 清除 */
*{margin: 0; padding: 0;}
/* body */
body{
    font-family: "微软雅黑";
    font-size: 16px;
}
/* 列表符号 */
ul,ol,li{
    list-style: none;
}
/* b,strongj加粗清除 */
b,strong{
    font-weight: normal;
}
/* em i 清除倾斜*/
em,i{
    font-style:normal;
}
/* u a的下划线 */
a,u{
    text-decoration: none;
}
/* h1-h6清除默认加粗和字号 */
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
    font-size: 16px;
}
/* 清除input聚焦时的蓝色边框 */
input{
    outline: none;
}

 

注意！
　　1.如果版心两侧没有颜色平铺，可直接写版心区域
　　2.给按钮加边框时需注意。它的边框在元素内部
　　3.清除单行文本误差：通过line-height=文本大小
　　　　注：1）只要是单行文本都有误差需清除
　　　　　　2）需区分：盒子有高度时，line-height=盒子高度：意为文本上下居中
　　　　　　　　　　　  盒子无高度，由一行文本撑起来时，line-height=文本大小
　　　　　　　　　　　  为清除误差
　　4.a标签自带间距。添加浮动即可去掉
　　5.a默认添加不上宽高，如果a有浮动：有浮动的元素都能添加宽高。
　　6.所有非表单的按钮都用a标签模拟
　　7.给图片设置宽高百分百可适用所有的图片插入。
　　8.图片在默认情况下，给父元素添加text-align：；对图片起作用
　　9.添加浮动时不给宽度则是内容撑起宽度

新闻列表流程
　　1）结构：
　　　　a.如果新闻后有时间：
　　　　　　<li>
　　　　　　　　<a href="#">我是新闻</a>
　　　　　　　　<span>2020-03-25</span>
　　　　　　</li>
　　　　b.如果新闻后无时间：
　　　　　　<li>
　　　　　　　　<a href="#">我是新闻</a>
　　　　　　</li>
　　2）
　　　　给li添加宽高，高度量取的时候，量行高
　　　　给新闻内容a和时间的span添加一左一右浮动
　　　　设置文本样式
　　　　用添加背景图的形式给li添加列表符号
　　　　让背景图上下居中，文本上下居中
　　　　给li添加padding-left，把列表符号展示

文本溢出
　　1.空白空间的处理
　　　　white-spacing: ;
　　　　　　pre
　　　　　　pre-wrap
　　　　　　pre-line
　　　　　　inherit 继承
　　　　　　nowrap 不让文本换行
　　2.溢出属性（控制内容溢出时的显示方式）
　　　　overflow: ;
　　　　　　auto 自动 （内容超出时有滚动条，没超出时没有）
　　　　　　scroll 滚动 （添加滚动条）
　　　　　　hidden 隐藏 （溢出隐藏）
　　　　　　inherit 继承
　　　　拓展：
　　　　　　overflow-x:hidden; （横向隐藏）
　　　　　　overflow-y:hidden; （纵向隐藏）
　　3.text-overflow:ellipsis/clip
　　　　ellipsis: 省略号显示
　　　　clip：没有省略号

 

控制单行文本， 溢出，省略号显示：
　　1.white-spacing:nowrap; 不换行
　　2.overflow:hidden; 溢出隐藏
　　3.text-overflow:ellipsis；溢出的内容省略号显示
　　4.容器必须有宽度！