作为一个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. js 数组去重复的方法

    数组去重复是js中常用的方法,归纳了四种如下: 1. for + indexOf  去重复 var arr = [3,5,5,4,1,1,2,3,7,2,5]; var target = []; fo ...

  2. windows10版本1709 在桌面和文件中点击右键，会引起卡顿

    windows自动升级到1709版本后出现的问题,而之前是没有这种问题的. 最终解决办法:(需要设置注册表) 运行:快捷键Win+R regedit 路径:可直接复制后粘贴+回车 HKEY_CLASS ...

  3. Windows_server_2012-r2_x64安装教程

    版本: Windows_server_2012-r2_x64 工具: VMware vSphere Client 镜像地址: http://www.xpgod.com/soft/10718.html( ...

  4. recover all files with git

    leon@DGLIRUAN2 /F/linux/android/leon/workspace/AngoWidget (master) $ git log commit 2f847e3a858ecb2f ...

  5. vim配置分享(持续更新中)

    作者:zhanhailiang 日期:2014-10-24 set nocompatible set nu   "" 自己主动缩进 syntax on set autoindent ...

  6. 接触HTML和CSS心得体会

    1.HTML 它负责网页的三个要素之中的结构: HTML使用标签的形式来标识网页中的不同组成部分 <!DOCTYPE html> <html> <head> < ...

  7. tools: idea 2017 激活

    1.下载并安装ideaIU (https://www.jetbrains.com/idea/download/#section=windows ,下载Ultimate版)2.下载 JetbrainsC ...

  8. ligerUI---ligerGrid分页排序的使用(从后台获取数据显示)

    写在前面: 最近项目的前框框架用的是ligerUI,里面用到了ligerGrid表格,下面就来说说从后台获取数据并在前台页面进行完美展示.啊哈哈哈..(天啦,坐我旁边的丽姐貌似炒股 一个月可以搞几十万 ...

  9. BCryptPasswordEncoder加密及判断密码是否相同

    项目中用到了BCryptPasswordEncoder对密码进行二次加密,需要注意的是,加密后的字符串比较长,数据库的长度至少为60位. 通过BCryptPasswordEncoder的加密的相同字符 ...

  10. android 串口开发第一篇:搭建ndk开发环境以及第一个jni调用程序

    一:ndk环境搭建 1:开发环境 我使用的是android studio 2.3.3版本,搭建ndk开发环境比较简单,打开File----Settings----Appearance&Beha ...