精通CSS.DIV网页样式与布局(二)—— 段落
我们在上一个文章中详细的阐述了CSS是如何控制文字的显示效果的,接下来,为了需要,我们继续来完善CSS对段落的控制的显示效果。
我们看看段落的水平对齐方式:
看一段代码:
<html>
<head><title>水平对齐</title>
<style>
<!--
p{ font-size:12px; }
p.left{ text-align:left; } /* 左对齐 */
p.right{ text-align:right; } /* 右对齐 */
p.center{ text-align:center; } /* 居中对齐 */
p.justify{ text-align:justify; } /* 两端对齐 */
-->
</style></head><body> <p class="left">这个段落采用左对齐的方式,text-align:left,因此文字都采用左对齐。<br>床前明月光,疑是地上霜。<br>举头望明月,低头思故乡。<br>李白</p><p class="right">这个段落采用右对齐的方式,text-align:right,因此文字都采用右对齐。<br>床前明月光,疑是地上霜。<br>举头望明月,低头思故乡。<br>李白</p><p class="center">这个段落采用居中对齐的方式,text-align:center,因此文字都采用居中对齐。<br>床前明月光,疑是地上霜。<br>举头望明月,低头思故乡。<br>李白</p><p class="justify">这个段落采用左对齐的方式,text-align:justify,因此文字都采用左对齐。床前明月光,疑是地上霜。举头望明月,低头思故乡。<br>李白</p>
</body>
</html>
代码里边使用了text-align来达到水平对齐。我们看看显示效果:
我们再看看垂直的方式:代码如下:
<html>
<head><title>垂直对齐</title>
<style>
<!--
td.top{ vertical-align:top; } /* 顶端对齐 */
td.bottom{ vertical-align:bottom; } /* 底端对齐 */
td.middle{ vertical-align:middle; } /* 中间对齐 */
-->
</style></head><body>
<table cellpadding="2" cellspacing="0" border="1"><tr><td><img src="02.jpg" border="0"></td><td class="top">垂直对齐方式,top</td></tr><tr><td><img src="02.jpg" border="0"></td><td class="bottom">垂直对齐方式,bottom</td></tr><tr><td><img src="02.jpg" border="0"></td><td class="middle">垂直对齐方式,middle</td></tr>
</table>
</body>
</html>
我们使用图片仅仅是将表格拆开。我们看效果:
那么我们这里是使用了:vertical来达到这个目的。
我们继续来看一下首字放大的效果:
我们从代码出发:
<html>
<head>
<title>首字放大</title>
<style>
<!--
body{background-color:black; /* 背景色 */
}
p{font-size:15px; /* 文字大小 */color:white; /* 文字颜色 */
}
p span{font-size:60px; /* 首字大小 */float:left; /* 首字下沉 */padding-right:5px; /* 与右边的间隔 */font-weight:bold; /* 粗体字 */font-family:黑体; /* 黑体字 */color:yellow; /* 字体颜色 */
}
</style></head>
<body><p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼·春官》记载,周代已有“中秋夜迎寒”、“中秋献良裘”、“秋分夕月(拜月)”的活动;汉代,又在中秋或立秋之日敬老、养老,赐以雄粗饼。晋时亦有中秋赏月之举,不过不太普遍;直到唐代将中秋与储娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起,使之充满浪漫色彩,玩月之风方才大兴。</p><p>北宋,正式定八月十五为中秋节,并出现“小饼如嚼月,中有酥和饴”的节令食品。孟元老《东京梦华录》说:“中秋夜,贵家结饰台榭,民间争占酒楼玩月”;而且“弦重鼎沸,近内延居民,深夜逢闻笙芋之声,宛如云外。间里儿童,连宵婚戏;夜市骈阗,至于通晓。”吴自牧《梦梁录》说:“此际金凤荐爽,玉露生凉,丹桂香飘,银蟾光满。王孙公子,富家巨室,莫不登危楼,临轩玩月,或开广榭,玳筵罗列,琴瑟铿锵,酌酒高歌,以卜竟夕之欢。</p>
</body>
</html>
也准备到中秋了,所以这个例子不错。我们看看效果:
我们这里body里边设置了背景色;然后p标签里边设置了文字大小与颜色;span里边设置了首字的大小、下沉、……。效果非常的吸引人。
我们来模拟一下百度搜索:
我们在百度输入框输入:陈宗毅 csdn
就能出来这些。
然后我们来模拟一下,效果图如下:
代码这么来写:
<html>
<head>
<title>段落实例:Baidu搜索</title>
<style>
<!--
p{margin:0px;font-family:Arial; /* 定义所有字体 */
}
p.title{padding-bottom:0px;font-size:16px;
}
p.content{padding-top:3px; /* 标题与内容的距离 */font-size:13px; /* 内容的字体大小 */line-height:18px;
}
p.link{font-size:13px;color:#008000; /* 网址颜色 */padding-bottom:25px;
}
span.search{color:#c60a00; /* 关键字颜色 */
}
span.quick{color:#666666; /* 快照颜色 */text-decoration:underline; /* 快照下划线 */
}
p.title span.search{text-decoration:underline; /* 标题处关键字的下划线 */
}
-->
</style></head>
<body><p class="title"><a href="#"><span class="search">陈宗毅</span> 廊坊师范学院信息技术提高班第八期 - 博客频道 - <span class="search">CSDN</span>.NET</a></p><P class="content"><span class="search">陈宗毅</span> 廊坊师范学院信息技术提高班第八期 目录视图 摘要视图 订阅 用开源IaaS构建自己的云——OpenStack征稿启事 不用买彩票,就有408万! <span class="search">CSDN</span>博客频道“移动开发...</P><p class="link">blog.csdn.net/yi_zz 2012-6-28 <span class="quick">百度快照</span></p><P class="title"><a href="#">2011年11月存档 - <span class="search">陈宗毅</span> 信息技术提高班 - 博客频道 - <span class="search">CSDN</span>.NET</a></P><p class="content"><span class="search">陈宗毅</span> 信息技术提高班目录视图 摘要视图 订阅 <span class="search">CSDN</span>新版个人空间介绍之二——个人主页 免费下载《SKC易云解决方案》 HTML5群组诚募管理员,“活跃之星”活动火热进行...</p><p class="link">blog.csdn.net/yi_zz/article/ ... /11 2012-3-5<span class="quick">百度快照 </span></p>
</body>
</html>
那么段落我们就在这里结束,自己动手敲敲,收获巨大。稍后继续完善我的博客,请大家继续关注。
精通CSS.DIV网页样式与布局(二)—— 段落相关推荐
- 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
- 精通CSS.DIV网页样式与布局(四) ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调.我们这回主要来学习如何用CSS来设置背景颜色.背景图片. 背景颜色:CSS设置背景颜 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- 精通 CSS+DIV 网页样式与布局 62
式并允许将样式信息与网页内容分离的一种标记性语言.CSS 是 1996 年由 W3C 审核通过,并且推荐使用的.简单的说 CSS 的引入就是为了使得 HTML 能够更 好的适应页面的美工设计.它以 H ...
- 精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
- 精通CSS+DIV网页样式与布局——CSS文字效果
一.文字样式 1.1字体 font-family:黑体; 1.2字体大小. font-size: 0.5px; 1.3字体颜色. color:#333333; 1.4文字粗细. font-weight ...
- 精通 CSS+DIV 网页样式与布局 57
且走."开始狄青不信,后来宋军先锋与南侬智高的兵交战,不机回合,智高战 败并逃入大理国.何仙姑经常手持荷花.</p> <p class="title2" ...
- 精通 CSS+DIV 网页样式与布局 55
老者传授锺离权"长真决",及金丹火候和青龙剑法.锺离汉后来遇见华阳真人, 又遇上仙王玄甫,学得"长生决".最后在崆峒山紫金四皓峰居住,得到"玉匣 秘诀 ...
- 精通 CSS+DIV 网页样式与布局 54
margin:0px; } img{ border:1px solid #664a2c; /* 图片边框 */ } img.pic1{ float:left; /* 左侧图片混排 */ margin- ...
最新文章
- python拼音怎么写-python: 拼音处理模块
- SpringBoot中使用hikariCP
- awk----基本用法
- c++椭圆最小二乘法原理_c++ 椭圆拟合之最小二乘法(图像处理)
- 计算机网络配置调试综合实验,计算机网络设备配置与调试课程标准.doc
- 百度安全DDoS攻击年度报告出炉 企业防护有新招!
- nmon Analyser分析仪
- 代码块_Dynamo?Get 7.1 什么是代码块
- MySQL 递归查询 当前节点及子节点
- MySQL NULL与空值
- python 获取路径
- 死锁——哲学家就餐问题
- 【AE教程】AI文件导入AE方法
- [DEFCON全球黑客大会] CTF(Capture The Flag)
- vue+ElementUI实现订单页动态添加产品效果
- Android Tips - 填坑手册
- “马”道微信:全面拆解微信营销模式
- 腾讯安全发布《2020年上半年手机安全报告》,揭示手机安全四大趋势
- C++ 请以pass-by-reference-to-const替换pass-by-value
- ASP.NET + adminLTE (一)