作为一个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. tensorflow 安装升级

    对于已经安装过的tensorflow,执行以下命令升级到最新版: pip3 install -U tensorflow 目前最新版本1.4

  2. java 之 单例模式（大话设计模式）

    笔者记得去面试时曾被问起这个模式,当时还没有看过设计模式,对设计模式基本上一无所知,不过可以肯定的是笔者用过单例模式.当时回答的风马牛不相及,很尴尬. 也是从那时起,开始学习设计模式.今天所说的就是单 ...

  3. Spring Cloud Zuul

    新建Spring Boot工程,命名为zuul 1.pom.xml添加依赖 <?xml version="1.0" encoding="UTF-8"?&g ...

  4. day8、 显示Linux路由表、各列信息

    要用到的命令是 route route 命令    显示和设置Linux路由表 -A:设置地址类型: -C:打印将Linux核心的路由缓存: -v:详细信息模式: -n:不执行DNS反向查找,直接显示 ...

  5. js 继承的简单易懂小例子

    js 继承 今天主要说原型链继承.构造继承.组合继承三种常用继承方式,分享一下我的理解. 原型链继承例子1 //原型继承function A(name){ this.name = name;}func ...

  6. Ajax中的JSON格式与php传输过程的浅析

    在Ajax中的JSON格式与php传输过程中有哪些要注意的小地方呢? 先来看一下简单通用的JSON与php传输数据的代码 HTML文件: <input type="button&quo ...

  7. CentOS安装java and javac(java执行环境和开发环境)

    [root@localhost usr]# yum install java Loaded plugins: fastestmirror, refresh-packagekit, security R ...

  8. redmine工作流程总结

    1.需求调研员和測试员新建问题,问题跟踪为支持,指派给产品经理 2.产品经理对收到的问题进行分类处理,功能类型的,改动跟踪状态为功能,指派给自己.是bug类型的,将跟踪类型改动错误类型,指派给技术经理 ...

  9. mysql数据表最高速迁移,mysql的存储引擎为:myisam

    本文链接:http://blog.csdn.net/u010670689/article/details/41346689 需求: 开发产品过程中,有个项目分支,数据库须要带数据拷贝,可是表的数据非常 ...

  10. EularProject 43: 带条件约束的排列组合挑选问题

    Sub-string divisibility Problem 43 The number, 1406357289, is a 0 to 9 pandigital number because it ...