前一篇文章中用div布局了豆瓣东西的页面，如果用html代码表示的话大概是这个样子的

  1. <!DOCTYPE html>
    <html>
    <head>
    </head>
  2.  
  3. <body>
  4.  
  5. <div><!--banner-->
        <div></div><!--banner1-->
        <div></div><!--banner2-->
    </div>
  6.  
  7. <div></div><!--ad-->
  8.  
  9. <div><!--hierarchy-->
        <div></div><!--left-->
        <div></div><!--right-->
    </div>
    <div><!--goods-->
        <div></div>
        <div></div>
        <div></div>
    </div>
  10.  
  11. </body>
    </html>

把上面那段代码保存为1.html，打开之后发现啥也显示出来。

这是为什么？因为我们指定了div，但却没告诉浏览器这块div大小、颜色等属性，那么怎么实现这些呢？CSS啦。

怎么加入css代码呢？用style元素即可，比如下面这样:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5.  
  6. <body>
  7. <style>
  8.  
  9. 	div{
  10.  
  11. 		background:red;
  12. 	}
  13.  
  14. </style>
  15.  
  16. <div><!--banner-->
  17. 	<div></div><!--banner1-->
  18. 	<div></div><!--banner2-->
  19. </div>
  20.  
  21. <div></div><!--ad-->
  22.  
  23. <div><!--hierarchy-->
  24. 	<div></div><!--left-->
  25. 	<div></div><!--right-->
  26. </div>
  27. <div><!--goods-->
  28. 	<div></div>
  29. 	<div></div>
  30. 	<div></div>
  31. </div>
  32.  
  33. </body>
  34. </html>

用浏览器打开发现还是啥也没有，为什么？因为没有指定div的高度、宽度，你怎么可以给一个没有大小的东西填充颜色呢？好，我们给div元素一个大小。

变成下面这样:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5.  
  6. <body>
  7. <style>
  8.  
  9. 	div{
  10.  
  11. 		height:200px;
  12. 		width:100px;
  13. 		background: red;
  14. 	}
  15.  
  16. </style>
  17.  
  18. <div><!--banner-->
  19. 	<div></div><!--banner1-->
  20. 	<div></div><!--banner2-->
  21. </div>
  22.  
  23. <div></div><!--ad-->
  24.  
  25. <div><!--hierarchy-->
  26. 	<div></div><!--left-->
  27. 	<div></div><!--right-->
  28. </div>
  29. <div><!--goods-->
  30. 	<div></div>
  31. 	<div></div>
  32. 	<div></div>
  33. </div>
  34.  
  35. </body>
  36. </html>

用浏览器打开之后发现时一个红色的竖条，为什么呢？因为我们上面通过css对所有的div都设置了背景色是红色，怎么能更个性化一些呢？让某个div是红色，某个div是蓝色？可以的，可以给div起一个名字，然后再css代码中指定对应div的名字，这样就针对性的对某个div设置css属性了，好我们再改一下就变成了下面这样：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5.  
  6. <body>
  7. <style>
  8.  
  9. 	#banner{
  10.  
  11. 		height:200px;
  12. 		width:100px;
  13. 		background: red;
  14. 	}
  15. 	#ad{
  16. 		height: 200px;
  17. 		width:100px;
  18. 		background:blue;
  19. 	}
  20. 	#hierarchy{
  21. 		height: 200px;
  22. 		width:100px;
  23. 		background: green;
  24. 	}	
  25.  
  26. 	#goods{
  27. 		height:200px;
  28. 		width:100px;
  29. 		background: yellow;
  30. 	}
  31.  
  32. </style>
  33.  
  34. <div id="banner"><!--banner-->
  35. 	<div id="banner1"></div><!--banner1-->
  36. 	<div id="banner2"></div><!--banner2-->
  37. </div>
  38.  
  39. <div id="ad"></div><!--ad-->
  40.  
  41. <div id="hierarchy"><!--hierarchy-->
  42. 	<div></div><!--left-->
  43. 	<div></div><!--right-->
  44. </div>
  45. <div id="goods"><!--goods-->
  46. 	<div id="goods1"></div>
  47. 	<div id="goods2"></div>
  48. 	<div id="goods3"></div>
  49. </div>
  50.  
  51. </body>
  52. </html>

人家豆瓣东西那个banner是布满整个浏览器的，而且你几个div的大小也和豆瓣东西的不一样，再调整一下，怎么看出人家height和width用了几个像素呢？我是截图之后放到PS里面用选区工具框选一下，然后再信息窗口里面看一下这个选区的长width和height，然后再看下图像的分辨率，为了方便，切换成像素/厘米 这样就能算出占用几个像素了，调整一下，最后代码变成了这样：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5.  
  6. <body>
  7. <style>
  8.  
  9. 	#banner{
  10.  
  11. 		height:90px;
  12.  
  13. 		background: red;
  14. 	}
  15. 	#ad{
  16. 		height: 99px;
  17. 		width:924px;
  18. 		background:blue;
  19. 	}
  20. 	#hierarchy{
  21. 		height: 476px;
  22. 		width:924px;
  23. 		background: green;
  24. 	}	
  25.  
  26. 	#goods{
  27. 		height:488px;
  28. 		width:924px;
  29. 		background: yellow;
  30. 	}
  31.  
  32. </style>
  33.  
  34. <div id="banner"><!--banner-->
  35. 	<div id="banner1"></div><!--banner1-->
  36. 	<div id="banner2"></div><!--banner2-->
  37. </div>
  38.  
  39. <div id="ad"></div><!--ad-->
  40.  
  41. <div id="hierarchy"><!--hierarchy-->
  42. 	<div></div><!--left-->
  43. 	<div></div><!--right-->
  44. </div>
  45. <div id="goods"><!--goods-->
  46. 	<div id="goods1"></div>
  47. 	<div id="goods2"></div>
  48. 	<div id="goods3"></div>
  49. </div>
  50.  
  51. </body>
  52. </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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5.  
  6. <body>
  7. <style>
  8.  
  9.     #banner{
  10.  
  11.         height:90px;
  12.  
  13.         background: red;
  14.     }
  15.     #ad{
  16.         height: 99px;
  17.         width:924px;
  18.         background:blue;
  19.         margin: 2px auto 2px auto;
  20.  
  21.     }
  22.     #hierarchy{
  23.         height: 476px;
  24.         width:924px;
  25.         background: green;
  26.         margin: 2px auto 2px auto;
  27.  
  28.     }  
  29.  
  30.     #goods{
  31.         height:488px;
  32.         width:924px;
  33.         background: yellow;
  34.         margin: 2px auto 2px auto;
  35.     }
  36.  
  37. </style>
  38.  
  39. <div id="banner"><!--banner-->
  40.     <div id="banner1"></div><!--banner1-->
  41.     <div id="banner2"></div><!--banner2-->
  42. </div>
  43.  
  44. <div id="ad"></div><!--ad-->
  45.  
  46. <div id="hierarchy"><!--hierarchy-->
  47.     <div></div><!--left-->
  48.     <div></div><!--right-->
  49. </div>
  50. <div id="goods"><!--goods-->
  51.     <div id="goods1"></div>
  52.     <div id="goods2"></div>
  53.     <div id="goods3"></div>
  54. </div>
  55.  
  56. </body>

这样就居中啦。

前端学习笔记2017.6.12 CSS控制DIV的更多相关文章

  1. 前端学习笔记2017.6.12 DIV布局网页

    DIV的功能就是把网页划分成逻辑块的. 看下豆瓣东西页面的布局,我们来分析下. 按照先从上到下的原则,把这个页面分成几个块: 首先是最顶端的这个条,这是一个DIV,我们给它起个名字,叫banner 然 ...

  2. 前端学习笔记2017.6.12 HTML的结构以及xhtml、html、xml的区别

    HTML的结构 一个HTML文档可分为几个部分,如下图所示: DOCTYPE部分.head部分和body部分 DOCTYPE部分,这个很重要,可以理解为不同的DOCTYPE意味着不同的html标准,因 ...

  3. 前端学习笔记2017.6.21-html和浏览器的关系以及开发工具

    html文档是一种文件格式, 浏览器可以识别这种文件格式,并能把html文档里面的内容解析出来. 用更贴近程序员的话说就是:html相当于c语言,浏览器相当于c编译器. 开发工具用sublime te ...

  4. 前端学习笔记2017.6.21-html是个什么东西

    html有两种意思,html语言和html格式 html语言是一种面向人类的计算机语言,这是啥意思?人类用html这种语言描述出一个网页的样子,浏览器解析这个语言并展示出来. html格式是一种文件格 ...

  5. 前端学习笔记2017.6.21-引入JS文件的方法

    通过网络引入JS文件 <script src="https://www.xxx.com/aaa.js"></script> 如果是引入本地JS文件 < ...

  6. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  9. STM32学习笔记（四）——串口控制LED（中断方式）

    目录: 一.时钟使能,包括GPIO的时钟和串口的时钟使能 二.设置引脚复用映射 三.GPIO的初始化配置,注意要设置为复用模式 四.串口参数初始化配置 五.中断分组和中断优先级配置 六.设置串口中断类 ...

随机推荐

  1. JavaWeb学习总结（二） Servlet

    本文目录 一.Servlet概述 二.Servlet接口 三.GenericServlet 四.HttpServlet 五.Servlet细节 六.ServletContext 回到顶部 一.Serv ...

  2. angular复选框式js树形菜单（一）

    treeView.html <ul class="tree-view"> <li ng-repeat="item in treeData" n ...

  3. linux 缺少libxxx.a 静态链接库

    首先去官方网站下载gdb的源码包,我下载的7.4.1版本的源码包,解压开来,进入到源码包的根目录下.对于一个源码包,拿到手里首先要阅读的就是README,然后看一下INSTALL文件,这个文件里编译源 ...

  4. MongoDB shell基本操作

    shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用JavaScript脚本完成操作的.使用shell 命令,需要启动mongo.exe.mongodb百科 常用shel ...

  5. mac外接键盘修饰键设置

    command 和 control 互换,option保持不变即可,差不多可以做到类似windows快捷键的使用习惯.

  6. UVA - 1471 Defense Lines (set/bit/lis)

    紫薯例题+1. 题意:给你一个长度为n(n<=200000)的序列a[n],求删除一个连续子序列后的可能的最长连续上升子序列的长度. 首先对序列进行分段,每一段连续的子序列的元素递增,设L[i] ...

  7. LeetCode 369. Plus One Linked List

    原题链接在这里:https://leetcode.com/problems/plus-one-linked-list/ 题目: Given a non-negative number represen ...

  8. C++对C语言的拓展（2）—— inline内联函数

    C语言中有宏函数的概念.宏函数的特点是内嵌到调用代码中去,避免了函数调用 的开销.但是由于宏函数的处理发生在预处理阶段,缺失了语法检测和有可能带来的语意差错. 1.内联函数基本概念 C++提供了 in ...

  9. Linux 优秀软件

    本文由Suzzz原创,发布于 http://www.cnblogs.com/Suzzz/p/4038925.html ,转载请保留此声明 一些Linux下的优秀软件,个人非常喜欢.都在Ubuntu14 ...

  10. 第十篇 javascript基础语法

    1)基本概念 a) 语句(statement)是为了完成某种任务而进行的操作,语句以分号结尾,一个分号就表示一个语句结束.:如:var a = 1; b) 表达式(expression),指一个为了得 ...