`

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元素作为...

    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文件中的颜色值和字体样式,即可实现整体风格的转变。 总的来说,"网页设计模板css+div"不仅仅是一种网页设计方法,更是一...

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

    网站的定义不仅仅是几个网页的简单堆砌,而是一个有组织的、可以被用户访问的信息集合。学生将从网页设计概述入手,理解网页的基本构成元素,以及网站的建设流程。网站开发软件作为实现这一切的工具,也被纳入到课程...

    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进行...

Global site tag (gtag.js) - Google Analytics