作为一个PHPer，在前端方面javascript、jquery这些的日常工作还搞的定。可对于div+css这些东西可就头疼了，所以现在开始学习CSS

跟着燕十八的教程开始从最基础学起，首先练习一个简单首页的布局

 <html>
     <head>
         <title>首页布局</title>
         <style>
             #container {
                 width: 1200px;
                 background-color: blue;
             }
             #header {
                 width: 1200px;
                 height: 100px;
                 background: red;
             }
             #main {
                 width: 1200px;
                 height: 500px;
                 background: black;
             }
             #four {
                 width: 580px;
                 height: 230px;
                 background: green;
                 float: left;
                 margin: 10px;
             }
             #footer {
                 width: 1200px;
                 height: 100px;
                 background: blue;
             }

         </style>
     </head>

     <body>
         <div id="container">
             <div id="header">
             </div>
             <div id="main">
                 <div id="four"></div>
                 <div id="four"></div>
                 <div id="four"></div>
                 <div id="four"></div>
             </div>
             <div id="footer">
             </div>
         </div>
     </body>
 </html>

显示效果：

CSS学习之首页简单布局的更多相关文章

  1. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. CSS学习笔记：flex布局

    目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...

  3. CSS学习笔记：grid布局

    目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...

  4. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  5. CSS学习笔记06 简单理解line-height

    在制作页面的时候,经常会遇到文本图片需要居中的情况,这时候,只要设置下文本的line-height属性等于包裹该文本的元素的高度即可让文本居中显示了,先来看看这个现象. <!DOCTYPE ht ...

  6. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  7. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  8. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  9. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

随机推荐

  1. Foxmail 7.0破解版，拷贝到新机器后，发送邮件乱码问题

    申请了新机器,挺开心,键盘和鼠标也好用了,但是新机器也随之而来一些不便,以前存储的数据需要重新拷贝.还有一些邮件,有些邮件标记了*号. Foxmail7.0绿色版本还挺好用,直接拷贝到新机器上就能直接 ...

  2. JAVA9模块化详解（一）——模块化的定义

    JAVA9模块化详解 前言 java9已经出来有一段时间了,今天向大家介绍一下java9的一个重要特性--模块化.模块化系统的主要目的如下: 更可靠的配置,通过制定明确的类的依赖关系代替以前那种易错的 ...

  3. QWT与QT Designer

    QWT是一套非常不错的开发库,它能结合QT开发,做出非常好的曲线,刻度,表盘等效果来.  qwt的下载以及动态链接库的编译等这里就不做介绍了.在源码目录下可以找到designer目录,其中有插件的源码 ...

  4. js二级事件模型的处理细节

    一.纠正网络上的一个误传--“IE不支持事件捕获” 可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在 ...

  5. 酷狗歌曲缓存kgtemp转mp3工具

    一直用网易音乐听歌,不过网易的歌曲版权确实是少了一些,在酷狗上可以找到,但收费歌曲只能试听不能下载. 寻找方案 从设置里可以看出,酷狗会设置缓存目录,试听的歌曲存放到这个缓存里. 打开缓存目录: 可以 ...

  6. Cocos2d-X 精灵、动作效果

    命名空间宏: USING_NS_CC; 感觉事实上挺鸡肋的. NS_CC_BEGIN. == using namespace cocos2d{ NS_CC_END ; } 推断一个精灵被点击: 1.层 ...

  7. JDBC中的Statement和PreparedStatement的差别

    以Oracle为例吧 Statement为一条Sql语句生成运行计划, 假设要运行两条sql语句 select colume from table where colume=1; select col ...

  8. lufylegend练习（1）帧速率

    近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 可是没有基础的同学.看起来费劲.所以打算边学边记笔记,说明都在凝视中 <!DOCTYPE html> ...

  9. BestCoder Round #75 King&#39;s Cake 模拟&amp;&amp;优化 || gcd

    King's Cake Accepts: 967 Submissions: 1572 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 6553 ...

  10. USACO Section 2.1 Healthy Holsteins

    /* ID: lucien23 PROG: holstein LANG: C++ */ #include <iostream> #include <fstream> #incl ...