`
f002489
  • 浏览: 273140 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

div +css 网页排版

阅读更多

http://zw7534313.iteye.com/blog/511149

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.border{
 border: 1px solid black;
}
.align-center{
 margin:0px auto;
 width:800px;
 text-align:center;
}
</style>

</HEAD>

<BODY class="align-center">
 <div class="border" style="width:800px;height:100px;">1</div>
 <div class="border" style="width:800px;height:30px;line-height: 30px;">2</div>
 <div class="border" style="width:800px;height:30px; ">3</div>
 <div class="border" style="width:800px;height:30px; ">4</div>
 
 <div class="border" style="width:800px;">
 <div class="border" style="width:560px; margin-top:5px;float:left;">
  <div class="border" style="width:560px;height:300px;">
   <div  class="border" style="width:260px;height:300px;float:left;">5</div>
   <div  class="border" style="width:288px;height:300px;float:right;">6</div>
  </div>
  <div style="margin-top:5px;">
   <div class="border" style="width:160px;height:300px;float:left;">7</div>
   <div class="border" style="width:392px;float:right;margin-left:5px;">
    <div class="border" style="width:193px;height:200px;float:left;">8</div>
    <div class="border" style="width:192px;height:200px;float:right;">9</div>
    <div class="border" style="height:94px;margin-top:5px;"></div>
   </div>
  </div>
  <div style="margin-top:5px;height:400px;width:560px;" class="border">
   <div class="border" style="width:160px;height:160px;float:left;">10</div>
   <div class="border" style="width:392px;height:200px;float: right;">
    <div class="border" style="width:192px;height:200px;float:left;">11</div>
    <div class="border" style="width:192px;height:200px;float:right;">12</div>
   </div>
   <div class="border" style="width:160px;height:236px;float:left;margin-top:5px;">13</div>
   <div class="border" style="width:392px;height:194px;float:left;float:right;margin-top:5px;">14</div>
  </div>
  
 </div>
 <div class="border" style="width:231px;height:1000px;float:left;margin-left:5px;margin-top:5px;">15</div>
 </div>
 
 <div class="border" style="width:800px;height:160px;margin-top:5px;">16</div>
 <div class="border" style="width:800px;height:30px;margin-top:5px;">17</div>
 <div class="border" style="width:800px;height:160px;margin-top:5px;">18</div>
 
</BODY>
</HTML>

分享到:
评论

相关推荐

    Div+CSS网页模板

    "Div+CSS网页模板"是一种常见的网页设计方法,它结合了HTML中的&lt;div&gt;标签和CSS(层叠样式表)来实现网页布局和样式的控制。这种方法的优势在于将内容与表现分离,使得网页设计更加灵活、可维护性更强,同时提高了...

    全国“创新杯”计算机类说课大赛一等奖作品:《DIV+CSS布局网页》教学设计方案.pdf

    因此,课程设计的目标是使学生能够熟练运用CSS对网页元素进行精确排版,灵活应用DIV+CSS进行网页布局,并通过团队协作提升他们的责任感和职业素养。 教学目标分为知识目标、技能目标和情感目标。知识目标包括理解和...

    div+csspdf版

    在IT行业中,网页设计是至关重要的一个领域,而"Div+CSS"是构建现代网页布局的基础。本资源包“div+csspdf版”显然聚焦于这个主题,包含了两个关键文件:`css2.0中文手册.chm`和`DIV+CSS布局大全.pdf`。这两个文件都...

    10天精通DIV+CSS

    DIV+CSS 基础知识点 在本节课中,我们将学习 XHTML 和 CSS 的基础...传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用 CSS 排版后,就是通过由 CSS 定义的大小不一的盒子和盒子嵌套来编排网页。

    经典全套DIV+CSS实例

    【标题】"经典全套DIV+CSS实例"涵盖了网页设计领域中的核心知识点——使用HTML的`div`元素结合CSS(层叠样式表)进行布局和样式设计。这一实例集旨在教授如何构建高效、灵活且响应式的网站页面,尤其适用于首页设计...

    DIV+CSS课件

    DIV+CSS作为一种网页布局方法,通过合理的标记和样式定义,可以像盖房子一样构建出结构清晰的网页。 本章还强调了编写CSS代码时需要遵循的语法规则,比如使用小写字母,合理使用标记(如h2, p等),以及一些HTML的...

    一个不错的DIV+CSS排版

    标题"一个不错的`DIV+CSS`排版"表明这是一个关于如何有效利用`DIV`和`CSS`进行网页布局的教学资源,适用于初学者。描述中的重复信息强调了这份资料对于初学者的价值。 首先,`DIV`是HTML中的一个块级元素,它用于将...

    2天掌握DIV+CSS网页制作技术

    【网页技术】——快速掌握DIV+CSS网页制作技术 网页制作技术中,"DIV+CSS"是一个常见的术语,但它实际上并不准确。正确的表述应该是xHTML+CSS,这是一套遵循Web标准的页面构建方法,旨在将内容(结构)、样式(表现...

    漂亮的后台系统管理页面DIV+CSS

    DIV+CSS是网页布局的主流方法,它将内容(Div)与样式(CSS)分离,使得页面结构清晰,易于维护,同时也利于搜索引擎优化。 【描述】:“这是一款漂亮的后台系统管理页面,可以用在各大网站的后台系统中使用,欢迎...

    div+css排版常用代码下载

    通过以上分析可以看出,DIV+CSS布局方式对于构建现代化、响应式的网页非常重要,而HTML标签和JavaScript脚本则是实现这一布局方式的关键技术之一。掌握这些基础知识和技术对于成为一名合格的Web开发者至关重要。

    DIV+CSS入门教程

    传统的网页布局方式多采用Table(表格)进行排版,而随着Web标准的发展,DIV+CSS逐渐成为主流。然而,“DIV+CSS”这一称谓忽略了布局的核心——xHTML与CSS的结合。xHTML代表了网页的结构,而CSS则负责网页的表现样式...

    CSS基础知识《Div+CSS 布局大全》 (PDF)值得一看!

    在HTML(超文本标记语言)的基础上,通过CSS可以实现网页元素的精美排版和响应式设计。本篇文章将重点围绕Div和CSS布局展开,探讨相关知识点。 首先,Div是HTML中的一个块级元素,全称为“division”,意为“分隔”...

    div+css排版学习与提高

    "div+css排版学习与提高"这个主题旨在帮助初学者和进阶者掌握这一关键技术,以实现更加符合W3C标准的网页布局。 首先,Div(Division)是HTML中的一个区块容器元素,常用来对网页内容进行分组和布局。通过设置不同...

    div+css博客

    "div+css博客"是一个基于HTML的网页设计项目,它主要利用了`div`元素和CSS(层叠样式表)来构建一个包含照片展示、论坛功能以及多个小栏目的在线平台。这种技术栈的选择旨在实现网页布局的灵活性和可维护性,同时也...

    摄影作品div+css网页模板

    在这个“摄影作品div+css网页模板”中,我们可以深入探讨几个关键知识点,这些知识点对于任何想要构建或优化网页的人都至关重要。 首先,我们要理解“div+css”。Div(Division)是HTML中的一个布局容器元素,用于...

    精通DIV+CSS3网页布局与样式源代码

    《精通DIV+CSS3网页布局与样式源代码》是一份深度学习和实践Web前端开发的宝贵资源,它涵盖了DIV和CSS3在构建高效、响应式网页布局中的核心技术和实践方法。这一压缩包文件包含了实现各种网页布局和样式的源代码示例...

    Div+Css实现网站首页

    div+css实现网站首页排版,这样可以制作好网站首页

    我学习的div+css作品

    在网页设计领域,`div+css`是一种常见的布局方式,它以其灵活性、可维护性和强大的样式控制能力,成为了网页开发者的重要工具。本文将围绕“我学习的div+css作品”这一主题,深入探讨其设计理念、实现方法以及在实际...

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

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

    33套DIV+CSS简历模版.rar

    【标题】"33套DIV+CSS简历模版.rar"所涵盖的知识点主要集中在网页布局技术和前端设计领域,特别是利用CSS(层叠样式表)和DIV(定义文档结构的HTML标签)来创建简历模板。这一资源集合提供的是33个不同的简历设计...

Global site tag (gtag.js) - Google Analytics