成像 个性化 logs 一个 style 切换 back 成了
前一篇文章中用 div 布局了豆瓣东西的页面,如果用 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>
前端学习笔记 2017.6.12 CSS 控制 DIV
来源: http://www.bubuko.com/infodetail-2116008.html