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元素 & ...
随机推荐
- SLF4J的好处
原来我们使用log4j去打印日志,如果我们要更改日志记录器,比如用comms-Logging,那我们在代码里面还要改每个类的引用包,但是如果用slf4j的话只要在配置的时候改下,代码完全用slf4j的 ...
- HDU 5738 Eureka
传送门 题目大意: 给出平面上的$n$个点,每个点有唯一的标号($\text{label}$),这$n$个标号的集合记作$S$,点可能重合.求满足下列条件的$S$的子集$T$的数目: 1. $|T|\ ...
- 使用dom4j解析XML文档
dom4j的包开源包,不属于JDK里面,在myeclipse中要单独导入在项目中,这里不累赘了 做这个过程,很慢,因为很多方法没用过不熟悉,自己得去查帮助文档,而且还得去试,因为没有中文版,英文翻译不 ...
- POJ1080Human Gene Functions（LCS变形）
题目链接 题目:给出两个串,每匹配一种有一种权值,求权值最大的匹配串 就是 最长公共子序列的 的思想: 首先对于 i 和 j 来比较, 一种情况是i和j匹配,此时 dp[i][j] = dp[i - ...
- 9.22 JS脚本语言DOM
通用:onclick 鼠标单击ondblclick 鼠标双击onmouseover 鼠标放上onmouseout 鼠标离开onmousemove 鼠标移动 表单:onchang 表单的值改变onblu ...
- sql 行转 列， 列转行
行列互转 复制代码 create table test(id ),quarter int,profile int) insert into test values(,,) insert into te ...
- electron photobooth.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Mysql事务，并发问题，锁机制
.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库正确地改变状态后,数据库的一致性约束 ...
- Wget命令下载、备份博客
-np http://www.cnblogs.com/memory4young/p/ 参考资料: http://www.cnblogs.com/memory4young/p/wget-backup-b ...
- PHP----Ajax异步请求
需要两个PHP页面:1.php是发出请求和接受请求结果的.2.php是处理请求的结果. 1.php中代码: <a href="#" onclick="sendAja ...