`
hanjava
  • 浏览: 32379 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

DIV+CSS样式布局

 
阅读更多
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#main {
float: left;
height: auto;
width: 904px;
border: 1px solid #FF0000;
}
#left {
float: left;
height: 300px;
width: 600px;
border: 1px solid #00FF00;
}
#right {
float: right;
height: 300px;
width: 300px;
border: 1px solid #0000FF;
}
.left_div {
border: 1px solid #999999;
height: 100px;
}
.rt_div1 {
border: 1px solid #999999;
height: 200px;
}
.rt_div2 {
border: 1px solid #999999;
height: 100px;
}

}
-->
</style>
</head>

<body>
<div id="main">
<div id="left">
     <div id="left_1" class="left_div">left1</div>
        <div id="left_2" class="left_div">left2</div>
        <div id="left_3" class="left_div">left3</div>
    </div>
    <div id="right">
  <div id="rt_1" class="rt_div1">rt1</div>
  <div id="rt_2" class="rt_div2">rt2</div>

</div>
</div>

<table width="200" border="1">
  <tr>
    <td> 11111111</td>
    <td rowspan="2">11111 </td>
  </tr>
  <tr>
    <td>1111 </td>
  </tr>
  <tr>
    <td> 11111</td>
    <td> 1111</td>
  </tr>
</table>
</body>
</html>
分享到:
评论

相关推荐

    DIV+CSS网站布局从入门到精通源代码

    本教程系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页的方法。在实例制作过程中除了介绍CSS样式设计各方面的知识外,还结合实际网页制作中可能遇到的问题提供解决...

    table布局网页转换为div+CSS布局的转换软件

    3. **应用CSS样式**:接着,软件会给这些`div`添加适当的样式,如宽度、高度、边距等,以重现原有的表格布局。 4. **处理定位**:对于需要绝对或相对定位的部分,软件会应用相应的`position`属性,确保元素位置正确...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    变幻之美Div+CSS网页布局揭秘(案例实战篇).

    除此之外,书中每个案例都会按照实际操作的步骤进行讲解,包括效果图的分析、HTML代码的编写和CSS样式的实现,这种实践导向的教学方法可以帮助读者更好地理解和应用所学知识。 总的来说,《变幻之美Div+CSS网页布局...

    div+css页面布局,新手入门教材,2天学会div+css

    5. **CSS样式设置**:CSS用于控制网页的样式和布局,如设置宽度、高度、颜色、背景等属性。通过`id`选择器,可以对特定的`div`进行样式定义,如`#page-container`。 6. **网页布局**:常见的网页布局方法包括固定...

    Table转div+css工具

    在网页设计领域,布局方式的发展经历了从表格(Table)到层(Div)+CSS的转变。"Table转div+css工具"就是专为此目的而设计的一款实用软件,它能够帮助开发者将原有的基于表格的HTML代码转换成使用Div和CSS进行布局的...

    DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf

    * 需要使用CSS来定义页面的样式,包括字体、颜色、布局等。 * 需要注意网页的可读性和可用性,确保网页能够在不同的浏览器和设备上正确显示。 DIV+CSS网页布局是一种非常重要的网页设计技术,掌握了这些技巧和注意...

    div+css布局制作箭头步骤流程样式 - div+css教程

    在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...

    外国个性的DIV+CSS页面布局实例98个

    【标题】"外国个性的DIV+CSS页面布局实例98个"揭示了这是一份包含98个不同设计风格的国外网页布局实例集合,主要基于HTML的DIV元素和CSS(层叠样式表)进行构建。这些实例展示了如何利用这两者来创建独特、美观且...

    div+css网页布局学习

    div+css网页布局学习是指使用div标签和css样式来设计和布局网页的技术。下面是学习div+css网页布局的相关知识点: 一、XHTML基础知识 * XHTML是HTML的后继版本,提供了一些新的功能和改进 * XHTML的主要特点是严格...

    Div+CSS简单布局

    Div是HTML中的一个容器元素,用于组织页面结构,而CSS(Cascading Style Sheets)则负责控制这些Div元素的样式和布局。 在Div+CSS布局中,我们首先需要理解Div的基本用法。Div元素通常通过`&lt;div&gt;`标签来创建,可以...

    DIV+CSS网页布局商业案例精粹光盘源文件

    《DIV+CSS网页布局商业案例精粹光盘源文件》是一个集合了众多基于DIV和CSS技术的网页设计实例,旨在帮助读者深入理解并掌握这两种关键技术在实际商业项目中的应用。这个压缩包包含了丰富的源文件,提供了实践学习和...

    DIV+CSS网页布局案例

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并结合CSS(Cascading Style Sheets,层叠样式表)来实现灵活、可复用和易于维护的网页结构。本资源包提供了十几...

    经典DIV+CSS模板 经典DIV+CSS模板

    综上所述,这个压缩包提供的是一套基于Web标准的、使用&lt;div&gt;和CSS进行布局和样式的网页设计模板集合,涵盖了基本页面、博客、表格、笔记和表单等多种场景。通过学习和应用这些实例,开发者可以提升其在网页布局和...

    DIV+CSS布局练习

    在网页设计领域,`DIV+CSS`布局是构建网页结构和样式的重要技术。这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点: 1. **DIV元素**:`&lt;div...

    适合初学者的39个div+css网页布局例子

    在网页设计领域,Div+CSS是一种常见的网页布局技术,它将结构(HTML)与样式(CSS)分离,使页面设计更加灵活、可维护性更强。本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们...

    DIV+CSS 博客布局,

    在IT行业中,网页布局设计是构建网站不可或缺的一部分,而“DIV+CSS”技术则是实现这一目标的主流方式。本文将深入探讨DIV+CSS在博客布局中的应用,以及如何通过这种技术创造出简洁大气的网站。 首先,理解“DIV+...

    DIV+CSS网页布局商业案例精粹-配书源代码

    通过使用CSS,我们可以对这些DIV进行样式设置,实现灵活的布局控制。这使得网页设计者可以更加精准地控制页面的呈现方式,而不再依赖于表格等传统布局方式,从而提高了网页的可维护性和适应性。 CSS,即层叠样式表...

Global site tag (gtag.js) - Google Analytics