`
xufei0110
  • 浏览: 110663 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

div 布局

JSPWebCC++C# 
阅读更多
css 代码
  1. @charset "utf-8" ;   
  2.   
  3. body {   
  4.     padding: 0px;   
  5.     margin: 0px;   
  6.     font-size: 12px;   
  7.     line-height: 16px;   
  8.     TEXT-ALIGN: center;   
  9. }   
  10.   
  11.   
  12.   
  13. #header{   
  14.     /*float: left;*/  
  15.     clear: both;   
  16.     border:1px solid #000;   
  17.     text-align: center;   
  18.     margin-top: 2px;   
  19.     margin-right: auto;   
  20.     margin-left: auto;   
  21.     width : 800;   
  22.     height:100px;   
  23. }   
  24.   
  25. #footer {   
  26.     clear: both;   
  27.     border:1px solid #000;   
  28.     text-align: center;   
  29.     width: 800;   
  30.     margin: 3;   
  31.     margin-right: auto;   
  32.     margin-left: auto;   
  33.     font-size: 12px;   
  34.     color: #999999;   
  35. }   
  36.   
  37. /* 这个让元素居中*/  
  38. #container {   
  39.     position:relative;   
  40.     width: 812px;   
  41.     height: 800px;   
  42.     border:1px solid #000;   
  43.     margin-right: auto;   
  44.     margin-left: auto;   
  45.     TEXT-ALIGN: center;   
  46. }   
  47.   
  48.   
  49.   
  50. #left {   
  51.     border:1px solid #000;   
  52.     float: left;   
  53.     width: 150px;   
  54.     margin: 3px;   
  55.     margin-right: auto;   
  56.     margin-left: 3px;   
  57.     background-color: red;   
  58. }   
  59. #right {   
  60.     border:1px solid #000;   
  61.     float: rightright;   
  62.     width: 150px;   
  63.     margin-top: 3px;   
  64.     margin-right: 3px;   
  65.     margin-left: auto;   
  66.     background-color: green;   
  67. }   
  68. #middle {   
  69.     width: 490;   
  70.     border:1px solid #000;   
  71.     padding: 0px 160px 5px 160px;   
  72.     margin-top: 3px;   
  73.     margin-right: auto;   
  74.     margin-left: auto;   
  75.     background-color: silver;   
  76. }  
页面
html 代码
  1.     <DIV id="container">  
  2.        
  3.     <c:import url="/jsp/web/include/head.jsp">c:import>  
  4.     <DIV id="left" align="center">Port side text...    
  5.     <BR/><A name="ll" href="jsp/web/include/juzhong.jsp"> juzhong A>g   
  6.     <BR/>  
  7.     <BR/>  
  8.     <BR/>  
  9.     <BR/>  
  10.     <BR/>  
  11.     <BR/>  
  12.        
  13. DIV>  
  14.     <DIV id="right" align="center">  
  15.         Starboard side text...   
  16.        
  17.     DIV><DIV id="middle" align="center">  
  18.         Middle column text...   
  19.     DIV>  
  20.   
  21.     <c:import url="/jsp/web/include/footer.jsp">c:import>  
  22.     div>     
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div布局软件-主要用于div对网页进行前期的布局

    **网页布局技术——Div布局详解** 网页布局是网站设计中的核心环节，它决定了网页内容的展示方式和用户体验。Div布局，全称为“Division布局”，是HTML中一种常用的布局方法，常用于创建复杂且灵活的网页结构。本篇...

    css+div布局源码模板

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

    div布局测试页面

    自己写的div布局测试页面，希望与大家多多分享。谢谢

    css+div布局实例

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

    DIV布局，网页结构

    ### DIV布局：网页结构 在网页设计与开发领域，DIV布局是一种非常常见且重要的布局方式。DIV（Division）是HTML中的一个元素，被广泛应用于页面布局、内容分组等方面。通过CSS（层叠样式表）控制DIV元素的位置、...

    div布局，网页制作

    在网页制作中，`div`布局是一种至关重要的...通过下载提供的"div布局"文件，你可以进一步实践和研究这些概念，从而提升网页设计和开发的技能。记住，实践是最好的老师，不断尝试和改进，才能真正掌握`div`布局的精髓。

    Apache服务器配置大全及DIV布局.zip

    Apache服务器配置大全及DIV布局.zip这个压缩包文件包含的主题涵盖了两个重要的方面：Apache服务器的配置以及前端网页设计中的DIV布局。接下来，我们将深入探讨这两个关键领域的详细知识点。 首先，让我们来了解一下...

    几十套 CSS+DIV 布局模板

    在IT行业中，CSS（Cascading Style Sheets）和DIV元素是构建网页布局的重要工具。CSS是一种样式表语言，用于描述HTML或XML（包括各种XML方言，如SVG、MathML等）文档的呈现。而DIV（Division）是HTML中的一个通用...

    首页CSS+DIV布局模板

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

    EXT Window 通过DIV布局(源代码)

    Ext.Window 通过DIV布局，通过DIV填充window内容，带Ext所需文件。

    css+div布局练习

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

    Div CSS网站布局视频教程第10课_理解CSS定位与div布局

    本教程将深入讲解CSS定位与div布局，这是创建复杂网页结构的关键技能。在第10课中，我们将详细探讨以下知识点： 1. **CSS盒模型**：理解CSS盒模型是掌握布局的基础。每个HTML元素都是一个矩形的盒子，包括内容区域...

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

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

    采用flash+div布局精美网页

    这个名为"采用flash+div布局精美网页"的项目，显然展示了如何利用这两种技术来创建一个具有吸引力和互动性的网页。现在我们来深入探讨一下Flash和Div在网页设计中的应用及其相关知识点。 Flash，全名Adobe Flash，...

    CSS详解-DIV布局！！

    在"CSS详解—DIV网页样式与布局"的压缩包中，你将找到更多关于CSS和DIV布局的详细示例和教程，帮助你进一步掌握这些核心概念和技术。通过实践和学习，你将能够熟练地运用CSS和DIV构建出美观、功能完善的网页。

    html div 布局 弹出层 大全

    2. **Flexbox布局**：现代浏览器支持的Flexbox提供了一种更为强大的方式来处理div布局。通过设置父元素的`display: flex`，我们可以轻松实现弹性容器，其中的子元素可以根据需要自动调整大小和排列。此外，`justify-...

    Table2CSS表格转CSS+DIV布局工具

    CSS+DIV布局也更利于搜索引擎优化（SEO），因为搜索引擎通常对CSS结构化的网页内容有更好的理解和索引能力。 【标签】中，“Table2 CSS”表明了软件的主要功能，即处理表格并转换为CSS；“表格”是转换的对象，HTML...

    网页制作精明布局Flas Ps图片制作div布局

    在这个主题中，"网页制作精明布局Flas Ps图片制作div布局" 提到了几个关键的元素：Flash、Photoshop（Ps）以及div布局。这些都是网页设计中的核心概念，下面将逐一详细阐述。 1. **Flash**：Flash曾是网页动态内容...

Magicbox
Global site tag (gtag.js) - Google Analytics