CSS样式案例(1)-文字的排版
本篇介绍的是小窗文字内容的排版，通过该篇文章可以让小伙伴们熟悉以下几个知识点:
word-space、overflow、text-overflow。
最终的展示效果如下:
参考步骤:
1. 建立html文档，并使用dl,dt,dd元素将内容放进去。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本排版</title>
</head>
<body>
<dl>
<dt>收藏新闻</dt>
<dd>钱币|5盎司彩银虎币价值几何 三连8豹子钞市值达千元 </dd>
<dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd>
<dd>藏界|地产商谈收藏：跟拿地异曲同工拾垃圾的老外</dd>
<dd>轶闻|最潮兵马俑亮相西安 藏友发现日军内参书籍</dd>
</dl>
</body>
</html>
此时页面效果如下：
2. 添加CSS样式，设置dl的长度、宽度以及边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本排版</title>
<style type="text/css">
dl{
width:300px; /*设置宽度*/
height:120px; /*设置长度*/
border:1px solid red; /*设置边框样式*/
}
dt{
/*待补充*/
}
dd{
/*待补充*/
}
</style>
</head>
<body>
<dl>
<dt>收藏新闻</dt>
<dd>钱币|5盎司彩银虎币价值几何 三连8豹子钞市值达千元 </dd>
<dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd>
<dd>藏界|地产商谈收藏：跟拿地异曲同工 拾垃圾的老外</dd>
<dd>轶闻|最潮兵马俑亮相西安 藏友发现日军内参书籍</dd>
</dl>
</body>
</html>
效果如下:
3. 分别设置dt,dd的字体的大小、颜色，以及其他属性，上下内容省略，只显示样式部分。
<style type="text/css">
dl{
width:300px; /*设置宽度*/
height:120px; /*设置长度*/
border:1px solid red; /*设置边框样式*/
}
dt{
font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */
color:#71790c; /*设置文字颜色*/
}
dd{
font:13px "宋体"; /*设置字体大小13px,宋体字 */
}
</style>
效果如下:
4. 设置正文内容中字体的格式为不换行，这里用到的属性是white-space.
<style type="text/css">
dl{
width:300px; /*设置宽度*/
height:120px; /*设置长度*/
border:1px solid red; /*设置边框样式*/
}
dt{
font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */
color:#71790c; /*设置文字颜色*/
}
dd{
font:13px "宋体"; /*设置字体大小13px,宋体字 */
white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
line-height:20px; /*设置每行的高度*/
}
</style>
效果如下:
5. 引入两张背景图片，分别用于设置标题栏的背景，以及正文内容的前面的小标题图标。
<style type="text/css">
dl{
width:300px; /*设置宽度*/
height:120px; /*设置长度*/
border:1px solid red; /*设置边框样式*/
}
dt{
font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */
color:#71790c; /*设置文字颜色*/
background:url(img/green.gif) repeat-x; /*设置标题的背景,并且以横坐标X轴铺满*/
}
dd{
font:13px "宋体"; /*设置字体大小13px,宋体字 */
white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
line-height:20px; /*设置每行的高度*/
background:url(img/icon.gif) no-repeat; /*设置内容的背景，不拉伸，此时图标在文字下面重叠的，需要调整*/
}
</style>
效果如下:
6. 设置新闻标题(dt)的上右下左边距、行高以及外边框。
dt{
font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */
color:#71790c; /*设置文字颜色*/
background:url(img/green.gif) repeat-x; /*设置标题的背景,并且以横坐标X轴铺满*/
padding:2px 2px 2px 10px; /*设置标题的上右下左的边距*/
line-height:25px; /*设置标题的行高为25px*/
border:1px solid #efefef; /*添加标题的边框*/
}
效果如下:
7. 现在开始处理正文内容(dd)的样式，调整正文内容的样式，使被遮住的背景图标显示出来。
dd{
font:13px "宋体"; /*设置字体大小13px,宋体字 */
white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
line-height:20px; /*设置每行的高度*/
background:url(img/icon.gif) no-repeat left 45%; /*设置内容的背景，添加背景图的位置为靠左，并且距离上边距为45% */
padding-left:20px; /*调整内边框左边距离为20px，这样背景图片就显示出来。*/
margin-left:10px; /*调整外边框的左边距10px */
margin-top:2px; /*调整外边框的上边距为2px*/
}
效果如下:
8. 现在开始处理超出边框范围的字体。
dd{
font:13px "宋体"; /*设置字体大小13px,宋体字 */
white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
line-height:20px; /*设置每行的高度*/
background:url(img/icon.gif) no-repeat left 45%; /*设置内容的背景，不拉伸，此时图标在本字下面重叠的，需要调整*/
padding-left:20px; /*调整内边框左边距离为20px，这样背景图片就显示出来。*/
margin-left:10px; /*调整外边框的左边距10px */
margin-top:2px; /*调整外边框的上边距为2px*/
overflow:hidden; /* 将超出边框范围的文字内容隐藏*/
text-overflow:ellipsis; /*将超长的部分以...形式显示*/
}
最终显示效果如下:
9. 完整的html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本排版</title>
<style type="text/css">
dl{
width:300px; /*设置宽度*/
height:120px; /*设置长度*/
border:1px solid red; /*设置边框样式*/
}
dt{
font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */
color:#71790c; /*设置文字颜色*/
background:url(img/green.gif) repeat-x; /*设置标题的背景,并且以横坐标X轴铺满*/
padding:2px 2px 2px 10px; /*设置标题的上右下左的边距*/
line-height:25px; /*设置标题的行高为25px*/
border:1px solid #efefef; /*添加标题的边框*/
}
dd{
font:13px "宋体"; /*设置字体大小13px,宋体字 */
white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
line-height:20px; /*设置每行的高度*/
background:url(img/icon.gif) no-repeat left 45%; /*设置内容的背景，不拉伸，此时图标在本字下面重叠的，需要调整*/
padding-left:20px; /*调整内边框左边距离为20px，这样背景图片就显示出来。*/
margin-left:10px; /*调整外边框的左边距10px */
margin-top:2px; /*调整外边框的上边距为2px*/
overflow:hidden; /* 将超出边框范围的文字内容隐藏*/
text-overflow:ellipsis; /*将超长的部分以...形式显示*/
}
</style>
</head>
<body>
<dl>
<dt>收藏新闻</dt>
<dd>钱币|5盎司彩银虎币价值几何 三连8豹子钞市值达千元 </dd>
<dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd>
<dd>藏界|地产商谈收藏：跟拿地异曲同工 拾垃圾的老外</dd>
<dd>轶闻|最潮兵马俑亮相西安 藏友发现日军内参书籍</dd>
</dl>
</body>
</html>
10. 样例的完整文件：文字的排版
CSS样式案例(1)-文字的排版的更多相关文章
- css样式-区域内文字不会被选中
要注意浏览器的兼容性: -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
- css学习の第二弹—文字格式化排版
1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{ ...
- CSS样式链接和文字常用属性
行内: <div style="color:red;"></div> 内嵌<style>div{background-color:red;}&l ...
- CSS样式案例(2)-制作一个简单的登录界面
首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承
1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...
- Html+CSS基础之CSS样式
认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ fo ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- css文字与排版
目录 文字与排版样式 `font文字样式 排版样式(text) 文字半透明 文字阴影 背景和颜色 基本 背景简写 背景透明 背景缩放 列表样式 表格样式 表格边框样式 折叠边框 设置宽度和高度 表格对 ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
随机推荐
- AngularJs $q 承诺与延迟
$q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式- ...
- Mysql备份还原数据库之mysqldump实例及参数详细说明
[root@localhost myexport]# mysqldump -h211.100.75.204 -uroot -p@^#coopen -P5029 --single-transaction ...
- asp.net mvc @Html.Raw 作用
转自:http://zhidao.baidu.com/link?url=unayXHAylQiUF0E3Rc9ej4gz_XBC7sbwInupVFuDnp_Cuqdz5NzMyUK5u-HiSfif ...
- java编程思想-java中的并发（三）
三.终结任务 1. 在阻塞时终结 线程状态 一个线程可以处于以下四种状态之一: 1)新建(new):当线程被创建时,他只会短暂的处于这种状态.此时,他已经分配了必须的系统资源,并执行了初始化.此刻线程 ...
- PHP 基本语法，字符串处理，正则
<?php //注释语法 /*多行注释*/ 输出语法 Echo "hello","worle"; //可以输出多个字符串 Print ...
- git push to nas
1 建nas目录 在nas的/volume1/git_repos目录下新建相关的目录,并在该目录下运行git init --bare cd /volume1/git_repos mkdir wifi_ ...
- centos 创建以日期为名的文件夹
[root@desk task]# mkdir $(date +%Y)$(date +%m)$(date +%d) [root@desk task]# mkdir `date +%Y``date +% ...
- 自然语言14.1_python实现PorterStemmer算法
QQ:231469242 欢迎喜欢nltk朋友交流 #https://tartarus.org/martin/PorterStemmer/python.txt #!/usr/bin/env pytho ...
- Latent Semantic Analysis (LSA) Tutorial 潜语义分析LSA介绍 一
Latent Semantic Analysis (LSA) Tutorial 译:http://www.puffinwarellc.com/index.php/news-and-articles/a ...
- 9月23日JavaScript作业----子菜单下拉
例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...