作为一个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. javascript设计模式——职责链模式

    前面的话 职责链模式的定义是使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止.职责链模式的名字非常形象,一 ...

  2. poj 1035KINA Is Not Abbreviation

    题目链接:http://poj.org/problem?id=4054 本题的题意是在下面那部分待检验的单词中找到与之相对应的正确的代词,包含几种情况,一是全部字母相同,二是有一个字母不相同,三是多一 ...

  3. 单点登录（SSO）的设计

    一.前言 什么是SSO? SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...

  4. ORACLE-015：ora-25153 暂时表空间为空，ora01652 无法通过128

    写了一个复杂的select语句,突然oracle就报了:ora-25153 暂时表空间为空,这个错误,于是网上查了下.发现了例如以下解决方法:创建一个新的暂时表空间. 首先要有system权限.登录进 ...

  5. 将CSS放头部，JS放底部，可以提高页面的性能的原因

    css不阻止dom的解析 js阻止dom的解析 css js都会阻止dom的渲染 原因: js有可能影响dom的解析,比如在js里面新增dom等这些操作 css不能影响dom的解析 而 dom的渲染 ...

  6. Clang-Format: Visual Studio Style

    PointerAlignment: Left UseTab: Never IndentWidth: 4 BreakBeforeBraces: Allman AllowShortIfStatements ...

  7. js原生的轮播，原理以及实践

    轮播,无论是文字轮播还是图片轮播,他们的原理是一样的,都是通过定时器执行循环展示和影藏. 一.手动轮播 (1)原理 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利 ...

  8. 【Java入门提高篇】Day7 Java内部类——局部内部类

    今天介绍第二种内部类--局部内部类. 局部内部类是什么?顾名思义,那就是定义在局部内部的类(逃).开玩笑的,局部内部类就是定义在代码块.方法体内.作用域(使用花括号"{}"括起来的 ...

  9. 基于.NET的弹性及瞬间错误处理库Polly

    本文基本是官方说明的翻译和总结(https://github.com/App-vNext/Polly) 什么是Polly? Polly是一款基于.NET的弹性及瞬间错误处理库, 它允许开发人员以顺畅及 ...

  10. Natas Wargame Level25 Writeup(头部注入+POST/GET注入)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArsAAAC8CAYAAAB4+WYTAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF