html笔记 横向两列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
#wrap{width:960px;margin:0 auto;background:#00C;} #header{background:#FF3300;width:100%;}
#mainbody{background:#FC0;width:100%;overflow:hidden; }
.left{width:820px;height:400px;background:#36C;float:left;margin-right:20px;}
.right{width:120px;height:600px;background:#0F3;float:right;}
#footer{background:#60C;clear:
both;}
</style>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left">left</div>
<div class="right">right</div> </div>
<div id="footer"> 脚注</div>
</div> </body>
</html> 浮动会动mainbody和footer影响,分别采取
1.width:100%;overflow:hidden;
2.clear:both;
html笔记 横向两列布局的更多相关文章
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- DIV+CSS 网页布局之:两列布局
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- CSS读书笔记(1)---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- css两列布局,一边固定宽度,另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
随机推荐
- Win10 查看IE的临时目录
C:\Users\YOUR_NAME\AppData\Local\Microsoft\Windows\INetCache
- 并发编程之--ConcurrentSkipListMap
概要 本章对Java.util.concurrent包中的ConcurrentSkipListMap类进行详细的介绍.内容包括:ConcurrentSkipListMap介绍ConcurrentSki ...
- create a C# context menu from code
I try the one of your approach, it works well in my computer. Below is my code: public void AddConte ...
- Poj 2081 Recaman's Sequence之解题报告
...
- error C2065:未声明的标识符错误
原文地址:http://blog.sina.com.cn/s/blog_8216ada701017evx.html 在VS2010下进行VC++调试时,出现这样一种错误:error C2065:未声明 ...
- tomcat Connector 连接器
连接器的核心功能,本文去除非核心功能,留下整个程序的框架,便于理解. 1.接受连接请求 2.创建request,和response. 3.调用容器对应的Invoke方法, 首先看类的依赖结构. 1.C ...
- 【转】C++类中对同类对象private成员访问
私有成员变量的概念,在脑海中的现象是,以private关键字声明,是类的实现部分,不对外公开,不能在对象外部访问对象的私有成员变量. 然而,在实现拷贝构造函数和赋值符函数时,在函数里利用对象直接访问了 ...
- Magento输入正确的登陆名和密码无法进入后台
请找到 这个文件夹: app\code\core\Mage\Core\Model\Session\Abstract 然后修改Varien.php这个文件: 找到代码(大约88行): $cookiePa ...
- Send email alert from Performance Monitor using PowerShell script (检测windows服务器的cpu 硬盘 服务等性能,发email的方法) -摘自网络
I have created an alert in Performance Monitor (Windows Server 2008 R2) that should be triggered whe ...
- ubuntu下PHP支持cURL
公司项目需要,注册需要验证手机号码,其中需要LAMP支持cURL.由于事先安装平台的时候,并没有注意到这一点,所以编译PHP5的时候,并没有使用参数--with-curl.后来需要的时候,查一些参考方 ...