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元素 & ...
随机推荐
- codevs 1432 总数统计
1432 总数统计 时间限制: 1 s空间限制: 128000 KB题目等级 : 钻石 Diamond 题目描述 Description 给出n个数,统计两两之和小于k的方案数之和. 输入描述 I ...
- JSP+JavaBean+Servlet+Oracle新增功能中对Date类型的字段的处理
Oracle库中userinfo表borth字段是Date类型,age年纪字段是int类型.age字段要根据borth来自动计算 先说一下我遇到的问题: insert into的时候遇到日期转换类型错 ...
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- JavaBean简单示例
本示例说明: 从Login.jsp中输入用户名和密码,提交,在NewFile.jsp中显示信息. ----- 类要放在一个包中!!! UserB 类文件 package model; public c ...
- C#----使用WindowsMediaPlayer 同时播放多个声音
使用Windows Media Player 其实就是使用组件AxWindowsMediaPlayer. 添加两个引用:Interop.WMPLib.dll和AxInterop.WMPLib.dll. ...
- C语言生成服从均匀分布, 瑞利分布, 莱斯分布, 高斯分布的随机数
用c语言 产生服从均匀分布, 瑞利分布,莱斯分布,高斯分布的随机数 一,各个分布对应的基本含义: 1. 均匀分布或称规则分布,顾名思义,均匀的,不偏差的.植物种群的个体是等距分布,或个体之间保持一 ...
- CSS书写建议参考
总结一些CSS书写建议提供大给家参考,这些是参考了一些文章以及我的个人经验总结出来. 1.能缩写的就尽量缩写吧,毕竟谁都不想多些一些也可以提高阅读体验.包括类名.颜色和css属性.
- SPL--spl_autoload_register
spl_autoload_register() : 调用未定义类时,系统会按顺序调用注册到spl_autoload_register()函数的所有函数,而不是调用__autoload函数. 解决问题: ...
- AutoMapper不用任何配置就可以从dynamic（动态）对象映射或映射到dynamic对象。
http://www.cnblogs.com/farb/p/4934476.html#pz