欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

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

程序员文章站 2022-03-14 20:16:56
2个属性3个技巧空白空间的处理write-space溢出属性overflow单行文本溢出省略号显示布局页面的前期规划新闻列表流程空白空间的处理write-space属性值:prepre-wrappre-linenowrap 不换行溢出属性overflowoverflow的两个子属性 overflow-x overflow-y属性值:visible 默认值scroll 产生滚动条auto 自动hidden 溢出隐藏inherit 继承单行文本溢出省略号显示套餐用法,直接上...

空白空间的处理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

相关标签: css 前端 html