html页面布局技巧二列布局,DIV+CSS三行两列经典布局

最新推荐文章于 2023-07-15 23:02:26 发布
最新推荐文章于 2023-07-15 23:02:26 发布
阅读量500 收藏 1
点赞数
文章标签： html页面布局技巧二列布局
本文介绍了一个由阿捷在2004年的《网页设计师》分享的、适用于IE、Firefox和Opera的居中自适应布局，包含代码示例和关键元素如`header`, `mainbg`, `right`, `left`, 和 `footer`的详细样式。同时提及了SEO优化技巧。
摘要由CSDN通过智能技术生成

这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在《网页设计师 》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下(在原代码的基础上作了一定规范整理)：

SEO参考:XHTML之经典三行两列布局- seobbs.net

body {

background: #999;

text-align: center;

color:#333;

font-family:Verdana,Arial, Helvetica, sans-serif;

}

a:link,visited {color:#004592;text-decoration:none;}

a:hover {color:#004592;text-decoration:underline;}

a:active {color:#004592;text-decoration:none;}

img {border:0px;}

#header {

margin-right: auto;

margin-left: auto;

padding: 0px;

width: 776px;

background: #EEE;

height: 60px;

text-align: left;

}

#contain {

margin-left: auto;

margin-right: auto;

width: 776px;

}

#mainbg {

float: left;

padding: 0px;

width: 776px;

background: #60A179;

}

#right {

float:right;

margin: 2px0px 2px0px;

padding: 0px;

width: 574px;

background: #ccd2de;

text-align:left;

}

#left {

float: left;

margin: 2px 2px0px0px;

padding: 0px;

background: #F2F3F7;

width: 200px;

text-align:left;

}

#footer {

clear:both;

margin-right: auto;

margin-left: auto;

padding: 0px;

width: 776px;

background: #EEE;

height: 60px;

}

.text {margin:0px;padding:20px;}

left

效果如图：

71ac860313b2d63dded2bbecc317b358.png

厚泉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
html三行两列布局,div+css经典三行两列布局
weixin_36429993的博客
06-20 3219
写在前面在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：代码闲来无事，就自己动手实现了一下，代码如下：1 23 4 5 6 首页7 8 * {9 margin: 0;10 padding: 0;11 ...
【前端】前端必会的三种DIV+CSS布局
m0_64210833的博客
07-15 3202
要开发网页，必须要搞懂这三种div+css布局技术！（1）左右两列布局；（2）1行3列；（3）1行多列或多行多列布局；只要你掌握了这三种布局方式，那搭建一个完整的网页框架肯定是一点问题都没有。
在html中将多个div进行多行多列分布时
qq_69413049的博客
03-14 2228
通过改变各部分的宽高来设置div在盒子中的分布
Web前端开发之CSS学习笔记7—多列布局
qq_45709187的博客
05-20 975
目录 1.column-count：指定列数 2.column-gap：指定的列之间的差距 3.column-rule：设置列之间的宽度，样式和颜色 4.column-width：指定列的宽度 5.column-span：指定横跨列数 6.columns：设置列宽和列数 7.column-fill：指定如何填充列 多列布局的属性： 属性 说明 column-count 指定列数 column-width 指定列宽 columns column-wid.
用DIV+CSS实现国内经典式三行两列布局
05-18
### 用DIV+CSS实现国内经典式三行两列布局 #### 布局概述 在Web设计领域，有一种常见的布局方式被称为“三行两列”布局，这种布局广泛应用于企业站点和其他展示类网站中。典型的特征包括：顶部通常放置大型导航栏...
学习DIV+CSS网页布局之三列布局
09-24
1. **基本原理**：宽度自适应的三列布局基于两列布局的原理，通过增加一列并调整各列的宽度来实现。这种布局方式允许网页在不同屏幕尺寸下保持良好的展示效果，适应各种设备。 2. **实现方法**：在HTML中，我们可以...
CSS布局实例代码 两列布局实例
09-25
下面我们将详细讲解CSS两列布局、CSS三列布局、CSS等高布局等多种布局方式。 一、CSS两列布局 CSS两列布局是指在一个容器中，左侧和右侧各占据一部分的空间，左右两侧的宽度可以是固定的，也可以是一侧固定另一侧...
一些常用的DIV+CSS的网页布局所用的代码段
09-25
6. **三行两列布局**： 增加底部部分，结构与两行两列类似，只是多了一个`footer`部分。 ```css #header, #bodycenter, #footer { width: 700px; margin: 0 auto; } #bodycenter #dv1 { float: left; width: ...
HTML5笔记+案例
sumuqi的博客
06-29 3168
HTML 一 . html简介 1.HTML是什么？ HTML:hyper text makrup language超文本标记（标签）语言由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接来检查信息 使用表单获取用户数据，实现交互 3.版本 W3C:world wide web consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是由W3C制定的标准 两个版本：HTML 4.0.1、
前端学习（539）：全屏布局得实现
歌谣的博客
03-14 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全屏布局</t...
HTML两栏布局和三栏布局
m0_59225791的博客
02-02 1119
HTML两栏布局和三栏布局
html+css两栏布局的三种方法
苟日新 日日新 又日新
07-11 2669
html+css两栏布局的三种方法
html上下两个div布局,常见上下两列div+css布局技巧整理【转载】
weixin_42129300的博客
06-10 6018
在百度搜索‘左右布局’，发现好多朋友在问这个问题，特将上周学到的左右布局技巧整理分享给大家：)常见的左右两列div+css布局分为以下两种：一、左右定宽布局：在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。常用的清除浮动有两种方式：a、通过在浮动元素的父级元素上添加清除浮动...
html两列布局,浅析两列自适应布局的3种思路
weixin_34282589的博客
06-05 451
前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。思路一: float在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值，所以在两列都是自适应的布局中就不再适用。而float和overflow配合可实...
HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例
yunduanaoligei的博客
11-04 500
HTML实现2列布局，左侧宽度固定，右侧自适应 实现一： ​​<​​​​style​​​​>​​ ​​body, html{padding:0; margin:0;}​​ ​​// 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列​​ ​​div:nth-of-type(1){​​ ​​float: left; //利用浮动​​ ​​// postion: absolute; //利用绝对定位​​ ​​// top: 0;​​ ​​//
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
热门推荐
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
html两列布局
weixin_33756418的博客
12-14 2803
2019独角兽企业重金招聘Python工程师标准>>> ...
html三行两列div布局
最新发布
09-09
这个HTML三行两列的布局是由著名网页设计师阿捷在2004年发布在《网页设计师》杂志上的，被称为XHTML1标准的DIV CSS布局。它是一个非常经典的布局，可以在IE、Mozilla和Opera浏览器中实现居中和高度自适应。完整的代码如下所示： ```html <!-- 双飞翼布局 --> <div class="container"> <div class="middle"> <div class="inner">中间自适应</div> </div> <div class="left">左边固定宽度200px</div> <div class="right">右边固定宽度200px</div> </div> ``` 对应的CSS代码如下所示： ```css <style> * { margin: 0; padding: 0; } .container { min-width: 600px; height: 300px; background: pink; } .middle { float: left; width: 100%; height: 300px; background-color: turquoise; } .middle .inner { margin: 0 200px; } .left { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: teal; } .right { float: left; width: 200px; height: 300px; margin-left: -200px; background-color: seagreen; } </style> ``` 这种布局的主要特点是中间的自适应部分被嵌套在一个新的父级块中，通过设置左右外边距来实现布局调整。左边和右边的固定宽度部分则通过负外边距进行布局。这种布局可以有效地实现三行两列的效果。注意，这种布局方式增加了一层DOM树节点，可能会增加渲染树生成的计算量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值