`
leon1509
  • 浏览: 536798 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS+DIV布局

阅读更多
部分参考了http://k.pconline.com.cn/question/1250175.html网页源代码

html:
<style>
	.qnbox_l3 {border:1px solid #6FA7D4;background:#F2F7FB;margin:3px;padding:8px}
	.f12px{font-size:12px;}
	.w1 {width:expression((document.body.offsetWidth-60) / 3 + "px");height:expression((document.body.offsetHeight-45) / 2 + "px")}
	.ln24{line-height:24px;}.ln25{line-height:25px;}
	.fleft{float:left;}
	.box_con {margin:0 auto;background:#FFF;padding:10px 20px;}
</style>
<body>
	<div>
		<div class="w1 qnbox_l3 f12px fleft">水果
			<div class="box_con ln24">
				<h3>水果</h3>
				<ol>
					<li>桔子</li>
					<li>苹果</li>
					<li>香蕉</li>
				</ol>
			</div>
		</div>
		<div class="w1 qnbox_l3 f12px fleft">交通工具
			<div class="box_con ln24">
				<h2>交通工具</h2>
				<ol>
					<li>汽车</li>
					<li>火车</li>
					<li>轮船</li>
				</ol>
			</div>
		</div>
		<div class="w1 qnbox_l3 f12px fleft">水果
			<div class="box_con ln24">
				<h1>水果</h1>
				<ol>
					<li>桔子</li>
					<li>苹果</li>
					<li>香蕉</li>
				</ol>
			</div>
		</div>
		<div class="w1 qnbox_l3 f12px fleft">水果
			<div class="box_con ln24">
				<h3>水果</h3>
				<ol>
					<li>桔子</li>
					<li>苹果</li>
					<li>香蕉</li>
				</ol>
			</div>
		</div>
		<div class="w1 qnbox_l3 f12px fleft">交通工具
			<div class="box_con ln24">
				<h2>交通工具</h2>
				<ol>
					<li>汽车</li>
					<li>火车</li>
					<li>轮船</li>
				</ol>
			</div>
		</div>
		<div class="w1 qnbox_l3 f12px fleft">水果
			<div class="box_con ln24">
				<h1>水果</h1>
				<ol>
					<li>桔子</li>
					<li>苹果</li>
					<li>香蕉</li>
				</ol>
			</div>
		</div>
	</div>
</body>


效果:


  • 大小: 19.8 KB
分享到:
评论

相关推荐

    css+div布局源码模板

    《CSS+Div布局源码模板解析与应用》 在网页设计领域,CSS+Div布局已经成为了主流的网页构造方式,其优点在于结构清晰、样式分离、易于维护和响应式设计。本篇将深入探讨“css+div布局源码模板”的核心知识点,并...

    Table2CSS表格转CSS+DIV布局工具

    【标题】"Table2CSS表格转CSS+DIV布局工具"是一款专为网页设计者打造的实用软件,旨在帮助用户将传统的HTML表格布局转换为更现代、更灵活的CSS(层叠样式表)与DIV(定义文档结构的HTML元素)布局。这种转换能够提升...

    CSS+div 布局

    下面我们将深入探讨CSS+div布局的相关知识点。 一、CSS简介 CSS是一种样式表语言,用于描述HTML或XML(包括SVG、XHTML等)文档的呈现。它允许开发者将样式与结构分离,使得网页设计更加灵活和易于维护。CSS规则由...

    首页CSS+DIV布局模板

    【首页CSS+DIV布局模板】是一种常见的网页设计技术,它主要依赖于CSS(层叠样式表)和HTML中的&lt;div&gt;元素来实现页面的结构化和美化。这种布局方式相较于早期的表格布局,具有更高的灵活性、可维护性和搜索引擎优化...

    css+div 布局

    CSS+div布局技术使得网页设计者能够更精细地控制页面元素的排列和展示,从而实现复杂的网页结构。本文将深入探讨如何运用CSS+div来实现流行的tab表单功能。 首先,理解CSS的基础概念至关重要。CSS是一种样式表语言...

    css+div布局实例

    CSS+DIV布局实例是学习网页布局时不可或缺的一部分,它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式,实现灵活多变的设计效果。 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等...

    css+div网页模板整站

    CSS+Div布局的优势在于其灵活性和可维护性,使得网页结构清晰,代码更易于管理和修改。这种布局方式相比传统的表格布局,能更好地实现响应式设计,适应不同设备的屏幕尺寸。 Div元素,全称为“division”,即分区,...

    CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例

    本案例“CSS+DIV布局赏析案例”主要展示了如何通过这两种技术来实现高效、美观且易于理解的网页结构。下面我们将深入探讨CSS和DIV布局的相关知识点。 首先,CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、...

    css+div布局练习

    下面将详细介绍CSS+div布局的重要概念、技巧以及实践应用。 一、CSS简介 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它允许我们将样式(颜色、字体、间距、布局等)与...

    css+div布局和css教程和css的api

    本篇将深入探讨CSS+Div布局的概念、CSS教程的重要性以及CSS API的相关知识。 首先,CSS+Div布局是利用CSS来控制HTML中的Div元素进行页面布局的技术。Div元素是一个通用的容器,可以容纳其他HTML元素,通过CSS我们...

    经典导航 CSS+DIV布局

    在网页设计领域,CSS(Cascading Style Sheets)与DIV布局是构建网页结构的重要技术,而JavaScript(JS)则是实现动态交互的关键。本主题聚焦于"经典导航"的设计,特别是利用CSS+DIV布局以及JS来创建高效、美观的...

    css+div布局教程

    首先,我们要了解CSS+Div布局的基本结构。一个标准的网页通常由框架组成,包括头部(Head)、主体(Main)和尾部(Foot)。对于某些复杂的网站,如Tudou.com,可能还会有一个菜单(Menu)区域位于头部之下。这种框架...

    经典CSS+DIV布局模板

    在"经典CSS+DIV布局模板"中,你可能会看到各种布局结构,如: - **一栏布局**:适用于内容较少或者主要内容居中的网站。 - **两栏布局**:通常分为侧边栏和主内容区,常见于博客和新闻网站。 - **三栏布局**:多...

    css+div布局经典案例

    本资源“css+div布局经典案例”提供了丰富的示例,帮助开发者深入理解和掌握这一技术。下面将详细阐述CSS+div布局的核心概念、常见模式以及案例中的应用。 首先,CSS是用于描述HTML或XML(包括SVG、MathML等各种XML...

    CSS+DIV 布局网站实例

    《CSS+DIV布局网站实例详解》 在网页设计领域,CSS(Cascading Style Sheets)与HTML(Hypertext Markup Language)的结合使用是构建现代网站布局的基础。本实例主要探讨如何利用CSS+DIV技术来实现高效、灵活的网页...

    CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例

    "CSS+DIV布局案例"的标题和描述多次强调了这一主题,表明这可能是一个关于如何有效使用CSS和DIV来实现网页布局的教学资源或示例集合。 首先,我们需要理解CSS的核心概念。CSS是一种样式表语言,用于描述HTML或XML...

    Dreamweave 精彩CSS+Div布局

    "Dreamweave 精彩CSS+Div布局"这个主题涵盖了如何利用Dreamweave高效地创建和管理CSS样式,以及通过Div来组织网页内容,实现美观且功能丰富的网站。 首先,让我们深入了解一下CSS。CSS是一种样式表语言,用于描述...

Global site tag (gtag.js) - Google Analytics