作为一个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. PHP扩展安装方法

    php扩展安装方法极简单. 也遵循3大步.但多出一个phpize的步骤. 1.pecl.php.net  在右上解的输入框 中输入需要的扩展    比如 redis 2.搜索完成后会看到两个蓝色的框 ...

  2. linux下php7安装memcached、redis扩展

    linux下php7安装memcached.redis扩展 1.php7安装Memcached扩展 比如说我现在使用了最新的 Ubuntu 16.04,虽然内置了 PHP 7 源,但 memcache ...

  3. CentOS6 图形界面（gnome）安装,使用vnc进行远程连接

    CentOS6相对于CentOS5的安装有了不少的进步,有不少默认的选项可以选择,如: Desktop :基本的桌面系统,包括常用的桌面软件,如文档查看工具. Minimal Desktop :基本的 ...

  4. 关于hue安装后出现KeyError: "Couldn't get user id for user hue"的解决方法

    首先说明出现此问题的原因是因为你使用的root用户安装了hue,然后在root用户下使用的build/env/bin/supervisor,如下图所示那样: 知道了原因,就容易解决问题了.首先要创建个 ...

  5. AngularJS 控制器通信

    指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承 ...

  6. webrc视频数据发送处理流程详解

  7. Spring3.0官网文档学习笔记（二）

    1.3 使用场景 典型的成熟的spring web应用 spring使用第三方框架作为中间层 远程使用场景 EJB包装 1.3.1 依赖管理.命名规则(包)     spring-*.jar *号代表 ...

  8. JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  9. CentOS7给终端配置快捷键【转发】

    1.打开Applications,选择System Tools 2.选择Setting进入如下面界面,选择Keyboard 3.选择Keyboard,进入如下面界面,再点击Shortcuts 4.再点 ...

  10. CentOS7系统卸载自带的OpenJDK并安装SUNJDK

    安装说明 系统环境: CentOS 7 安装方式: rmp安装 软件: jdk-8u111-linux-x64.rpm 下载地址: Oracle JDK 官网下载地址 卸载CentOS默认安装的Ope ...