`

CSS+DIV做一个这样的表格

阅读更多
CSS+DIV做一个这样的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
body{ padding:100px; font-size:12px; line-height:1.8}
div,dl{ background:#FFFF99; border:1px solid #FF9900; width:200px; margin-top:-1px;}
dl{ border:none; border-bottom:1px solid #FF9900;}
dd{ width:129px; background:#FFCC00; float:left; border-right:1px solid #FF9900}
dt{ width:70px; background:#FFCC00; float:right;}
</style>
</head>
<body>
<div>
  <dl>
    <dd>001</dd>
    <dt>002</dt>
  </dl>
  <span>003</span>
</div><div>
  <dl>
    <dd>001</dd>
    <dt>002</dt>
  </dl>
  <span>003</span>
</div><div>
  <dl>
    <dd>001</dd>
    <dt>002</dt>
  </dl>
  <span>003</span>
</div><div>
  <dl>
    <dd>001</dd>
    <dt>002</dt>
  </dl>
  <span>003</span>
</div><div>
  <dl>
    <dd>001</dd>
    <dt>002</dt>
  </dl>
  <span>003</span>
</div><div>
  <dl>
    <dd>001</dd>
    <dt>002</dt>
  </dl>
  <span>003</span>
</div><div>
  <dl>
    <dd>001</dd>
    <dt>002</dt>
  </dl>
  <span>003</span>
</div>
</body>
</html>
  • 大小: 14.8 KB
分享到:
评论

相关推荐

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...

    css+div网页模板整站

    本资料集合包含了一个完整的网站模板,由十个不同页面组成,旨在为网页设计师提供实用的参考和学习资源。下面,我们将详细探讨这些知识点,并分析它们在实际应用中的重要性。 首先,CSS是控制网页样式和布局的首选...

    css+div控制表格 标签代码

    `div`元素常作为容器,通过CSS的`position`属性(如`relative`、`absolute`、`fixed`)配合`top`、`right`、`bottom`、`left`属性,可以实现表格的绝对定位,从而实现浮动表格或其他特殊布局效果。 最后,我们还...

    CSS+div网站模板

    3. **CSS+div布局**:CSS+div布局方式摒弃了传统的表格布局,采用更灵活的流式布局,使得网页可以适应不同屏幕尺寸和设备,增强了响应式设计的能力。这种布局方式可以实现像素级精确控制,同时提高了页面加载速度和...

    《精通CSS+DIV网页样式与布局》光盘源码

     第6章 用CSS设置表格与表单的样式   6.1 控制表格   6.2 表格实例一:隔行变色   6.3 表格实例二:鼠标经过时变色的表格   6.4 表格实例三:日历   6.5 CSS与表单   6.6 综合实例一:直接输入...

    css+div 闪闪发光的表格

    css+div + js 十分动感的闪闪发光的表格

    jsp css+div 后台框架

    "jsp css+div 后台框架"是一种常见的前端与后端技术组合,用于构建高效、美观且用户友好的Web应用程序。这种框架结合了Java...总的来说,选择一个合适的“jsp css+div 后台框架”对于开发高质量的Web项目至关重要。

    Table2CSS表格转CSS+DIV布局工具

    综上所述,Table2CSS工具是一个强大且实用的网页设计辅助工具,它简化了从传统表格布局向CSS+DIV布局的转换过程,提高了网页设计的质量和效率。对于那些希望优化网页性能、提升用户体验以及便于维护的设计师来说,这...

    css+div模板技术

    Div可以被看作是页面上的一个“框”,可以包含文本、图片、表格等其他元素。 三、CSS+Div模板技术的应用 1. 布局控制:通过CSS+Div,我们可以实现流式布局、网格布局、响应式布局等多种复杂的页面结构。Div元素作为...

    HTML+CSS+DIV网页设计与布局(第2版)(微课版)-教案.docx

    HTML+CSS+DIV 网页设计与布局 本教案旨在教授学生 HTML+CSS+DIV 网页设计与...通过本教案,学生将掌握 HTML+CSS+DIV 网页设计与布局的基本技术和概念,能够独立设计和开发一个基本的网页,具备了基础的网页开发能力。

    CSS+DIV 网页设计

    2. **样式化**:由于&lt;div&gt;本质上是一个无语义的容器,所以可以方便地通过CSS添加样式,实现各种布局需求。 3. **布局划分**:通过&lt;div&gt;,我们可以将页面划分为多个区域,每个区域都有独立的样式和内容,增强了网页的...

    黑色css+div实用模板

    【标题】:“黑色css+div实用模板”是指一种基于CSS...总的来说,“黑色css+div实用模板”是一个集美观、实用和可定制于一身的网页设计资源,对于想要快速建立具有专业黑色风格网站的开发者来说,是一个理想的选择。

    css+div视频教程,可以帮助大家尽快的了解层叠样式表,

    “html+css1-40讲”和“html+css1-31讲”的文件名表明这是一个逐步讲解的教程,可能涵盖了CSS和Div的基本概念、选择器、盒模型、定位、浮动、Flexbox和Grid布局等内容。通过学习这些课程,你可以系统地掌握CSS和Div...

    css+div设计精美网上书店

    在这个"css+div设计精美网上书店"项目中,我们将深入探讨如何利用这两种技术创建一个吸引人的在线图书销售平台。 首先,CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它允许...

    网页设计模板css+div

    "css+div"布局模式取代了早期基于表格的布局,通过定义CSS规则,可以更轻松地调整页面元素的位置、大小、颜色和样式。Div元素是HTML中的一个通用容器,可以容纳其他HTML元素,通过CSS控制其样式,实现页面布局的模块...

    100css+div模版

    CSS和HTML是构建网页布局和设计的核心技术,而div是HTML中的一个常用元素,用于创建网页布局的容器。 1. CSS(层叠样式表):CSS是一种用于表现HTML或XML(包括如SVG、MathML等各种XML方言)文档的样式语言。它允许...

    自己做的CSS+DIV模板,很不错。

    以上代码展示了一个简单的CSS+DIV布局,包含头部、主要内容区域(包含侧边栏)和底部。通过CSS,我们可以调整各个部分的样式,实现所需的设计效果。 总的来说,CSS+DIV模板是现代网页设计的基础,它允许开发者创建...

    精通CSS+DIV样式和布局详细源码

    随着Web 2.0的大潮席卷而来,网页标准化CSS+DIV的设计方式正逐渐取代传统的表格布局模式,对CSS的学习也成为设计人员的必修课。  本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行...

    css+div和table+css的比较

    `div` 是 HTML 中的一个块级元素,用于组织文档的大块内容。它是一个容器,可以容纳其他 HTML 元素,并可以通过 CSS 样式来控制其布局和样式。div 的主要优点是灵活性高,代码简洁,易于维护,特别适合用于页面的...

Global site tag (gtag.js) - Google Analytics