网页排版时常用的5个CSS基础

介绍5个网页排版时常用的CSS基础,当然,包括图文混排,是怎样做到的。

本文给大家介绍在文章的排版中经常会用到的几个CSS基础,当然,包括图文混排,是怎样做到的。
1. 首行缩进
    你知道的,从小学,老师就教我们,段落的开头应该空两格。而你使用word的时候,也有首行缩进这个功能,但在html中你的空格键好像起不了作用了。当然,你可以用 来代替一个空格,但这不是理想的方式,用CSS吧,简单,有效:
<p style="text-indent:2em;">你的内容</p>
 这样的话,这个有style="text-indent:2em;"段落就会显示两个字符的缩进了。缩进更多? 修改2em, 2表示2个字符,你可以相应增加或者减少。
2. 图文混排
    在word中,我们可以用环绕来让文字显示在图片周围,而CSS,中,我们可以用float,来让文字在没有清理浮动的时候,显示在图片以外的空白处。如下所示

在下面的代码中,把float设置成left,图片会显示在左边,而right则显示在右边,而margin-right是为了不让文字和图片贴在一起需要写的,如果你设置的是float:right;刚相应应该是把 margin-right改成margin-left:
<img style="float:left;margin-right:15px;" src="图片地址" alt="图片说明" />
3. 设置背景色
    先来看一个示例,如果你有需要引用的内容,而主题中又没有设置,或者希望自己定制一下背景颜色。

   代码如下,如果你不知道颜色是如何定义的,你可以看看web216安全,换上相用的颜色代号就可以了,比如#faf7e8表示上面的浅黄色:
<p style="background:#faf7e8;border-top:1px dotted #a3a3a3;border-bottom:1px dotted #a3a3a3;text-align:center;">
4. 让文字居中
    如上例,只要在代码中加入text-align:center,就可以让文章在容器的宽度内水平居中。OH,容易哦?!
5. 显示一个边框
    边框我们会用到border,添加一个边框,只要加上style="border:1px dotted #080;"1px代码边框的大小,而dotted是边框的样式,常用的样式用三个:solid(实边) dashed(虚线) dotted(点状虚线). 就像上面实例的边框中,我使用的是dotted边。
 

时间: 2024-11-03 06:11:51

网页排版时常用的5个CSS基础的相关文章

网页设计时常用的30个jQuery插件

文章简介:你应该实现在网站上的30个jQuery插件. jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善于用,但我敢肯定你会发现他们在你未来的项目中使用! Nivo滑块 毫无疑问,这个插件是世界上最真棒jQuery的滑块图片,并配有超过15个过渡效果. Anything Slider 任何滑块从所有最通用的滑块.您可以添加绝对的东西,从视频到简单

[译] 使用 CSS 的 font-size-adjust 属性改善网页排版

本文讲的是[译] 使用 CSS 的 font-size-adjust 属性改善网页排版, 原文地址:Improve Web Typography with CSS Font Size Adjust 原文作者:Panayotis Matsinopoulos 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:lampui 校对者:sun.Yuuoniy CSS 中的 font-size-adjust 属性允许开发者基于小写字母的高度指定 font-size 

网页设计时遇到CSS BUG问题解决方法详解

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网页切片是网页设计过程中一个非常重要的技术,能够让网站在用户的浏览器里面下载的比较快,要不然需要用户浏览器下载完整个页面才能够打开,如果用户的脾气比较急的话,你的网站可能还没有打开,这些用户就等不及关闭了网站了!如果要使用到网页切片技术,就不可避免会遇到CSS BUG问题!对于很多站长而言,或者网页设计师而言,一旦出现了CSS BUG,往往会

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义

核心提示:DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义 ol 有序列表 <ol><li>--</li><li>--</li><li>--</li></ol> 表现为 1--2--3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul><li>--</li><li>--</li></ul> 很多人容

Dreamweaver教程-为什么要用CSS进行网页排版

 为了让大家明白CSS的作用,以及为什么要用CSS代替HTML表格进行网页排版,下面通过一个实例向大家讲解. 其中一个页面通过HTML进行格式化,另一个页面通过CSS进行格式化. HTML格式化实例 HTML代码如下所示: <body> <h1><font face="Verdana" size="5" color="green">下载吧</font></h1> <p> &l

Dreamweaver为什么要用CSS进行网页排版

 为了让大家明白CSS的作用,以及为什么要用CSS代替HTML表格进行网页排版,下面通过一个实例向大家讲解. 其中一个页面通过HTML进行格式化,另一个页面通过CSS进行格式化. HTML格式化实例 HTML代码如下所示: <body> <h1><font face="Verdana" size="5" color="green">下载吧</font></h1> <p> &l

网页排版经常用到的5个CSS

1. 首行缩进 你知道的,从小学,老师就教我们,段落的开头应该空两格.而你使用word的时候,也有首行缩进这个功能,但在html中你的空格键好像起不了作用了.当然,你可以用 来代替一个空格,但这不是理想的方式,用CSS吧,简单,有效: <p style="text-indent:2em;">你的内容</p> 这样的话,这个有style="text-indent:2em;"段落就会显示两个字符的缩进了.缩进更多? 修改2em, 2表示2个字符,

设计者在网页排版中应注意的一些问题

排版是一门艺术,也是一门技巧.我们每天都能在报纸,书籍等各种媒介上看到排版,或精美,或丑陋.如何能在准确传递信息的同时,又能排出精美的版面,这是设计师们值得深思的问题,因为这关系到读者的阅读感受.本文以网页排版为例,从几个方面阐述了成功的设计在排版中应该注意的问题和细节. 站长之家(CHINAZ.com)4月18日编译:大体上来说,排版是为了信息分享而重新将字体进行排列的一门艺术和技巧.也就是说,排版是为传递信息而进行的简单排列组合,然而,好的排版非常注重视觉精度和细节,甚至是很小的细节都不容忽

网页排版中10种致命的语义错误

这是来自于Steven D编写的WEB前端开发设计要点的内容. 虽然许多设计师已非常熟练的使用了Web标准,让人遗憾的是有很多细节的排版处理仍然和传统的屏幕印刷要求背道而驰.这里有10种致命的语义错误的演示,把它们公布出来以避免您在网页排版中继续使用: 1.使用连字符而不要用一个em的虚线 使用em的虚线是现在的WEB编辑非常流行的做法. 2.使用句点,而不是省略号 这是一个专门的印刷方面的省略号标记(特别是在西欧字符中),由三个点组成,区别于中文里面的省略符号.  3.使用正确的引号 在引用的