`
qq17906
  • 浏览: 54196 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

三、CSS内容排版

CSS 
阅读更多

文字排版
 1.通栏排版:将段落文字放置于p或其他对象中,在对段落文字间距、行距、字号等样式控制。
 2.分栏排版:


图文混合排版
 不规则文字环绕:使用多个div来完成不规则图形。

 

全图排版
      <style type="text/css">
            #layout div{border:1px solid

#aaa;margin:3px;float:left;padding:2px;width:126px;text-align:center;height:126px;overflow:hidden;}
     h2,h3{font-size:11px;font-family:arial;margin:0px;padding:0px;}
     h3{font-weight:normal;color:#777;}
</style>

 

<body>
   <div id="layout">
        <div>
          <img src="images/medium(1).jpg" width="100" height="69" />
          <h2>Title:ldld</h2>
          <h3>Date:2009-2-15</h3>
       </div>
       <div>
          <img src="images/medium(1).jpg" width="100" height="69" />
          <h2>Title:ldld</h2>
          <h3>Date:2009-2-15</h3>
       </div>
       <div>
          <img src="images/medium(1).jpg" width="100" height="69" />
          <h2>Title:ldld</h2>
          <h3>Date:2009-2-15</h3>
       </div>
</div>
</body>

 

表格排版
 表格标签
  caption:定义表格名称
  tbody:定义表格内容区,如果一个表格由多个内容区构成,可以使用多个tbody组合
  thead:定义表头
  tfoot:定义表格页脚
  th:定义表头的单元格

分享到:
评论

相关推荐

    css排版技巧 实用

    ### CSS排版技巧详解 #### 一、引言 随着网页设计标准的不断提升与浏览器兼容性的改善,越来越多的网站设计者开始放弃传统的表格布局方法,转而采用更加灵活且易于维护的CSS(层叠样式表)进行网页排版。本文将...

    css中文排版心得

    在CSS世界中,中文排版是一项特殊的挑战,因为中文字符的特性与西文有很大区别。以下是一些关于CSS中文排版的重要...理解并熟练运用这些CSS属性,可以帮助我们更好地处理中文内容的布局和样式,提升网页的阅读体验。

    用CSS排版的一个例子

    是用CSS做一个简单的排版,对初学者可能会有些帮助吧~~

    关于css排版的几点心得

    在CSS(层叠样式表)布局中,排版是网页设计的核心部分,它决定了元素如何在页面上组织和对齐。以下是我从个人学习中总结的一些...实践是检验真理的唯一标准,理论结合实际操作,相信你能在CSS排版的道路上越走越远。

    CSS图片和文字排版教程

    CSS图片和文字排版教程 本教程旨在帮助初学阶段的学员掌握CSS图片和文字排版的知识,通过详细讲解各种图像与文字的混合排版方式,帮助学员快速掌握CSS图片和文字排版的技能。 1. CSS文字样式设置 CSS提供了多种...

    英文怎么排版整齐,CSS代码

    本文将详细介绍如何利用CSS(层叠样式表)中的属性来实现英文文本的整齐排版,帮助开发者更好地掌握这一技巧。 ### CSS中的text-align: justify 属性 在CSS中,`text-align` 属性用于设置或检索块元素中的文本对齐...

    div + css 实现不同排版的40个实例(页面内容一致,通过CSS控制布局)

    XHTML 40个例子显示的内容一样,通过CSS实现不一样的布局效果, 是学习div + css排版的绝佳教程.body标签内的内容如下: &lt;div id="header"&gt;&lt;h1&gt;Header&lt;/h1&gt;&lt;/div&gt; &lt;p&gt;&lt;strong&gt;1) Content here.&lt;/strong&gt; column ...

    自动更新的DIV+CSS排版电影小偷.rar

    【标题】"自动更新的DIV+CSS排版电影小偷.rar"所涉及的知识点主要集中在网页设计和开发领域,特别是关于动态更新、响应式布局以及前端框架的应用。这个压缩包可能包含一个使用了DIV和CSS技术来构建的电影信息展示...

    轻量级的纯CSS字体排版库Tipograf.zip

    TipografTipograf 是一款轻量级的纯 CSS 字体排版库。特点完全使用相对单位来编写可调式轻量(gzip 压缩时只有680字节) 标签:Tipograf CSS框架

    CSS的各种排版样式

    三、排版样式 1. 浮动:`float`属性用于元素的浮动布局,常见的值有`left`和`right`,常用于创建多列布局。 2. 定位:`position`属性(如`static`、`relative`、`absolute`、`fixed`)控制元素的定位方式,`z-index`...

    jQuery和css3文字排版动画效果

    本文将深入探讨如何使用jQuery和CSS3来实现动态的文字排版动画效果。 首先,jQuery是一个轻量级的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果的创建。通过使用jQuery,开发者可以编写简洁、易于理解...

    css|排版|美工|提供免费资源,供求各大朋友下载,学习

    总之,这个免费资源包对于那些想要提升CSS排版和美工技巧的学习者来说是一份宝贵的资料。通过下载和探索其中的内容,你可以了解到如何使用CSS进行有效的网页布局、美化设计以及实现交互效果。记得实践是检验真理的...

    div+css排版常用代码下载

    - DIV+CSS布局方式的优势在于能够清晰地分离内容与样式,提高页面的可维护性和可读性,同时也有利于搜索引擎的优化。 #### 2. **DIV+CSS布局的特点** - **内容与表现分离**:通过CSS来控制页面的布局和样式,使得...

    IE6浏览器兼容问题总结及CSS排版注意地方

    IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码

    CSS3用户文章内容排版特效.zip

    【CSS3用户文章内容排版特效】是一种网页设计技术,主要关注如何使网站中的文本、图像和其他内容在视觉上更具吸引力且易于阅读。CSS3,即层叠样式表第三版,是目前Web开发中用于控制网页表现的重要工具,它允许...

    网页制作简单排版的CSS

    网页制作中比较简单排版的CSS文件,出来呈现的效果是分栏,还有文字的。

    CSS实现的网页中文字排版的几种方式

    CSS实现的网页中文字排版的几种方式,希望对大家有帮助

    牛津高阶英语学习词典第八版+ css美观排版层叠样式表

    此次提供的版本更是结合了现代化的技术,附带了CSS(Cascading Style Sheets)美观排版规则文件,旨在提升电子版阅读体验。 CSS,即层叠样式表,是网页设计中用于控制网页元素布局、颜色、字体等视觉表现的关键技术...

    DivCSS网站布局视频教程第11课 使用CSS页面排版

    在本节“DivCSS网站布局视频教程第11课 使用CSS页面排版”中,我们将深入探讨如何利用CSS(层叠样式表)技术来构建高效、灵活且响应式的网页布局。CSS是网页设计的核心,它负责控制网页元素的外观、布局和结构。尤其...

Global site tag (gtag.js) - Google Analytics