前端学习笔记2017.6.12 CSS控制DIV
前一篇文章中用div布局了豆瓣东西的页面，如果用html代码表示的话大概是这个样子的
<!DOCTYPE html>
<html>
<head>
</head> <body> <div><!--banner-->
<div></div><!--banner1-->
<div></div><!--banner2-->
</div> <div></div><!--ad--> <div><!--hierarchy-->
<div></div><!--left-->
<div></div><!--right-->
</div>
<div><!--goods-->
<div></div>
<div></div>
<div></div>
</div> </body>
</html>
把上面那段代码保存为1.html，打开之后发现啥也显示出来。
这是为什么？因为我们指定了div，但却没告诉浏览器这块div大小、颜色等属性，那么怎么实现这些呢？CSS啦。
怎么加入css代码呢？用style元素即可，比如下面这样:
<!DOCTYPE html>
<html>
<head>
</head> <body>
<style> div{ background:red;
} </style> <div><!--banner-->
<div></div><!--banner1-->
<div></div><!--banner2-->
</div> <div></div><!--ad--> <div><!--hierarchy-->
<div></div><!--left-->
<div></div><!--right-->
</div>
<div><!--goods-->
<div></div>
<div></div>
<div></div>
</div> </body>
</html>
用浏览器打开发现还是啥也没有，为什么？因为没有指定div的高度、宽度，你怎么可以给一个没有大小的东西填充颜色呢？好，我们给div元素一个大小。
变成下面这样:
<!DOCTYPE html>
<html>
<head>
</head> <body>
<style> div{ height:200px;
width:100px;
background: red;
} </style> <div><!--banner-->
<div></div><!--banner1-->
<div></div><!--banner2-->
</div> <div></div><!--ad--> <div><!--hierarchy-->
<div></div><!--left-->
<div></div><!--right-->
</div>
<div><!--goods-->
<div></div>
<div></div>
<div></div>
</div> </body>
</html>
用浏览器打开之后发现时一个红色的竖条，为什么呢？因为我们上面通过css对所有的div都设置了背景色是红色，怎么能更个性化一些呢？让某个div是红色，某个div是蓝色？可以的，可以给div起一个名字，然后再css代码中指定对应div的名字，这样就针对性的对某个div设置css属性了，好我们再改一下就变成了下面这样：
<!DOCTYPE html>
<html>
<head>
</head> <body>
<style> #banner{ height:200px;
width:100px;
background: red;
}
#ad{
height: 200px;
width:100px;
background:blue;
}
#hierarchy{
height: 200px;
width:100px;
background: green;
} #goods{
height:200px;
width:100px;
background: yellow;
} </style> <div id="banner"><!--banner-->
<div id="banner1"></div><!--banner1-->
<div id="banner2"></div><!--banner2-->
</div> <div id="ad"></div><!--ad--> <div id="hierarchy"><!--hierarchy-->
<div></div><!--left-->
<div></div><!--right-->
</div>
<div id="goods"><!--goods-->
<div id="goods1"></div>
<div id="goods2"></div>
<div id="goods3"></div>
</div> </body>
</html>
人家豆瓣东西那个banner是布满整个浏览器的，而且你几个div的大小也和豆瓣东西的不一样，再调整一下，怎么看出人家height和width用了几个像素呢？我是截图之后放到PS里面用选区工具框选一下，然后再信息窗口里面看一下这个选区的长width和height，然后再看下图像的分辨率，为了方便，切换成像素/厘米 这样就能算出占用几个像素了，调整一下，最后代码变成了这样：
<!DOCTYPE html>
<html>
<head>
</head> <body>
<style> #banner{ height:90px; background: red;
}
#ad{
height: 99px;
width:924px;
background:blue;
}
#hierarchy{
height: 476px;
width:924px;
background: green;
} #goods{
height:488px;
width:924px;
background: yellow;
} </style> <div id="banner"><!--banner-->
<div id="banner1"></div><!--banner1-->
<div id="banner2"></div><!--banner2-->
</div> <div id="ad"></div><!--ad--> <div id="hierarchy"><!--hierarchy-->
<div></div><!--left-->
<div></div><!--right-->
</div>
<div id="goods"><!--goods-->
<div id="goods1"></div>
<div id="goods2"></div>
<div id="goods3"></div>
</div> </body>
</html>
效果如下:
div的大小布局差不多了，可是豆瓣东西里面的div有几个事居中的，那怎么实现呢？可以用margin来实现，margin它是属于盒模型里面的一个概念，margin是指元素边框到元素外边之间的距离，比如：margin : 10px 0px 15px 5px;
它的意思是元素边框距离元素外边的距离分别是上边是10像素、右边是0像素、下边是15像素、左边是5像素，按照上右下左的顺序来写的，如果遇到margin的简写比如margin:0px auto; 这种虽然有两个值，但是我们可以把它“转化为”四个值，按照上右下左的顺序
第一个是0px 第二个是auto，第三个没有了吗？不，返回去，还是0，第四个是auto，这样，所以最后的结果是margin:0px auto 0px auto
<!DOCTYPE html>
<html>
<head>
</head> <body>
<style> #banner{ height:90px; background: red;
}
#ad{
height: 99px;
width:924px;
background:blue;
margin: 2px auto 2px auto; }
#hierarchy{
height: 476px;
width:924px;
background: green;
margin: 2px auto 2px auto; } #goods{
height:488px;
width:924px;
background: yellow;
margin: 2px auto 2px auto;
} </style> <div id="banner"><!--banner-->
<div id="banner1"></div><!--banner1-->
<div id="banner2"></div><!--banner2-->
</div> <div id="ad"></div><!--ad--> <div id="hierarchy"><!--hierarchy-->
<div></div><!--left-->
<div></div><!--right-->
</div>
<div id="goods"><!--goods-->
<div id="goods1"></div>
<div id="goods2"></div>
<div id="goods3"></div>
</div> </body>
这样就居中啦。
前端学习笔记2017.6.12 CSS控制DIV的更多相关文章
- 前端学习笔记2017.6.12 DIV布局网页
DIV的功能就是把网页划分成逻辑块的. 看下豆瓣东西页面的布局,我们来分析下. 按照先从上到下的原则,把这个页面分成几个块: 首先是最顶端的这个条,这是一个DIV,我们给它起个名字,叫banner 然 ...
- 前端学习笔记2017.6.12 HTML的结构以及xhtml、html、xml的区别
HTML的结构 一个HTML文档可分为几个部分,如下图所示: DOCTYPE部分.head部分和body部分 DOCTYPE部分,这个很重要,可以理解为不同的DOCTYPE意味着不同的html标准,因 ...
- 前端学习笔记2017.6.21-html和浏览器的关系以及开发工具
html文档是一种文件格式, 浏览器可以识别这种文件格式,并能把html文档里面的内容解析出来. 用更贴近程序员的话说就是:html相当于c语言,浏览器相当于c编译器. 开发工具用sublime te ...
- 前端学习笔记2017.6.21-html是个什么东西
html有两种意思,html语言和html格式 html语言是一种面向人类的计算机语言,这是啥意思?人类用html这种语言描述出一个网页的样子,浏览器解析这个语言并展示出来. html格式是一种文件格 ...
- 前端学习笔记2017.6.21-引入JS文件的方法
通过网络引入JS文件 <script src="https://www.xxx.com/aaa.js"></script> 如果是引入本地JS文件 < ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- STM32学习笔记（四）——串口控制LED（中断方式）
目录: 一.时钟使能,包括GPIO的时钟和串口的时钟使能 二.设置引脚复用映射 三.GPIO的初始化配置,注意要设置为复用模式 四.串口参数初始化配置 五.中断分组和中断优先级配置 六.设置串口中断类 ...
随机推荐
- Mac 系统安装redis服务
1.首先去http://www.redis.io/下载最新的redis文件,现在最新的是redis-2.8.19 2.进行解压缩 tar -zxvf redis-2.8.19.tar.gz 3.移动重 ...
- uva11729 - Commando War（贪心）
贪心法,执行任务的时间J越长的应该越先交待.可以用相邻交换法证明正确性.其实对于两个人,要让总时间最短,就要让同一时间干两件事的时间最长. #include<iostream> #incl ...
- 如何显示PHP运行错误
在运行文件的最前面加两行代码: error_reporting(E_ALL); ini_set('display_errors', '1'); 这样调试起来就方便多了
- np.unique 的实现
1. 简单实现 import numpy as np def unique(ar): perm = ar.argsort() aux = ar[perm] flag = np.concatenate( ...
- django的get_or_create
转:http://www.nanerbang.com/article/51/ get_or_create会根据条件从数据库里面查找符合条件的记录,如果没有符合条件的记录,则新创建一条记录
- [MySQL-MM] 生产环境自动恢复MM中一台M2库的过程，分享从零开始写的自动化重建脚本以及思路 （转)
必须是MM架构,而且一台主库M1是完好无损的,一台主库M2可以根据M1主库来进行重建:如果MS架构,自己可以稍微做一下脚本修改动作,也能使用,架构如下图所示: 3 总体思路,建立主脚本a_build ...
- iOS 【资源篇】
iOS9开发入门教程索引 Objective-C视频教程 O-c Blog 社区 畅游 http://www.9ria.com/ 苹果中文开发社区 http://www.cocoachina.co ...
- GWT 中实现“CSS Sprite”
近段时间在弄GWT这一块,开发中遇到的一些不错的方法或者技巧,在此做个分享和记录,有不同见解可发表意见 互相切磋. 在web开发中,必然涉及到网页中的图片,本地浏览网页,要下载在服务器端的图片,然后 ...
- C++字符集问题终极分析（可解决乱码问题）
最近研究vc,windows的东西真是很傻瓜,啥都给你做好,有个好处就是开发方便了. 有个弊端就是完全按微软的一套进行,规则都是它定的,你得知道它的很多api, 开发出来的代码效率不高,不过却可以比较 ...
- BIOS简单设置 解析“集成显卡”内存占用问题
很多使用集成显卡的用户会发现,在系统信息窗口中,内存容量和实际不一样.比如系统内存显示4GB,可用3.48G之类.这不可用的一部分内存到哪去了? 其实减少的这部分内存是被集成显卡占用当做显存使用了.而 ...