【html笔记 横向两列布局】的更多相关文章

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-…

CSS布局——横向两列布局

1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>横向两列布局</title> <style type=&…

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <…

DIV+CSS 网页布局之：两列布局

1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以给受到影响的元素设置 clear:both,即清除元素两侧的浮动,也可以设置具体清除哪一侧的浮动:clear:left 或 clear:right,但必须清楚的知道到底是哪一侧需要清除浮动的影响.也可以给浮动的父容器设置宽度,或者为 100%,同时设置 overflow:hidden,溢出隐藏也可以…

慕课笔记利用css进行布局【两列布局】

<html> <head> <title>两列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*两列的布局样式*/ /*float:left向左浮动*/ .content{width:920px;margin:0 auto} .left{width:20%;height:500px;background:#f00;fl…

CSS读书笔记（1）---选择器和两列布局

(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red"></div> 作者编写的CSS文件 <link href='xx.css'> 用户浏览网页在浏览器中设置的样式 浏览器默认的样式 对于ID选择器.类选择器等,其优先级从大到小分别是: 直接在标签中写入样式<div style="color:red"&g…

bootstrap的栅格布局与两列布局结合使用

在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适应,这个时候我就想到了两列布局,将左右设置float,左边设置固定宽度,右边的宽度为calc(100% - 左边的宽度),把这两种布局结合使用就可以实现效果.…

css之页面两列布局

两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left"></div> <div class="right"></div> css部分 .left { position: absolute; /*这可以换成float:left,都可以使其脱离文档流*/ height: 100px; width:…

css布局之两列布局

我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两列之自适应布局</title> </head> <style> .left{ float: left; width: 20%; heig…

css两列布局，一边固定宽度，另一边自适应

<!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" />        <title>css两列布局,一边固定宽度,另一边自适应</title>    </head>    <style>        a, body, center, cite, code, dd, del, div, dl, dt, e…