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元素 & ...
随机推荐
- ubuntu nginx 安装以及配置文件详解
1.到nginx官网下载源码包.最好下载稳定版本,nginx官网http://www.nginx.org/ 2.安装nginx依赖包运行命令: sudo apt-get install libssl- ...
- import_site
http://kfd.me/ https://google.kfd.me/webhp?newwindow=1&safe=active http://googlebridge.com/searc ...
- auto dock
http://mgltools.scripps.edu/ http://mgltools.scripps.edu/downloads/previous-releases/mgltools-1-5.4/ ...
- javascript序列化
JSON.stringify() JSON.parse() toJSON() var person={"cardId":"546651353435"}; con ...
- WinForm------SplitContainerControl的窗体调用控件方法
Frm_Books窗体(窗体里面有个按钮跳转Frm_Book_Select窗体) private void Add_Book_ItemClick(object sender, DevExpress.X ...
- 提取hdfs文件名的方法
#!/bin/bash #------------------------------------------------------------- # 把目录中的所有文件getmerge到本地 # ...
- Linux查看CPU和内存使用情况
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...
- C# 判断 当前设备的IP地址、默认网关、子网掩码在不在同一网段内
要判断两个IP地址是不是在同一个网段,就将它们的IP地址分别与子网掩码做与运算,得到的结果一网络号,如果网络号相同,就在同一子网,否则,不在同一子网. 例:假定选择了子网掩码255.255.254.0 ...
- PHP_php.ini_说明详解
这个文件必须命名为''php.ini''并放置在httpd.conf中的PHPIniDir指令指定的目录中.最新版本的php.ini可以在下面两个位置查看:http://cvs.php.net/vie ...
- 图片延迟加载jquery插件imgLazyLoad(三)
此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...