一、布局

一列固定宽度且居中                              两列左窄右宽型                                通栏平均分布型

1、一列固定宽度且居中布局
<body>

    .top+.banner+.main+.footer  按Tab键，得到下框中代码
    <div class="top"></div>

    <div class="banner"></div>

    <div class="main"></div>

    <div class="footer"></div>
</body>
2、两列左窄右宽型布局
<body>
　　.top+.banner+(.main>.left+.right)+.footer  按Tab键，得到下框中代码
    <div class="top"></div>

    <div class="banner"></div>

    <div class="main">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div class="footer"></div>
</body>
完整代码
/* 1、一列固定宽度且居中布局  */
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .box {  /*把各div重复代码抽取出来*/

        width: 900px;

        background-color: #eee;

        border: 1px dashed #ccc;

        margin: 0 auto;

    }

    .top {

        height: 80px;

    }

    .banner {

        height: 120px;

        margin: 5px auto;

    }

    .main {

        height: 500px;

    }

    .footer {

        height: 100px;

        margin: 5px auto 0;  /*上5px,左右居中,下是0px*/

    }

    </style>

</head>

<body>

    <div class="top box">top</div>

    <div class="banner box">banner</div>

    <div class="main box"></div>

    <div class="footer box"></div>

</body>

</html>

----------------------------------------

<div class="top"></div><div class="banner"></div><div class="main"><div class="left"></div><div class="right"></div></div><div class="footer"></div>

007.前端开发知识，前端基础CSS（2020-01-28）的更多相关文章

  1. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  3. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  4. 前端开发概述+JS基础细节知识点

    一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...

  5. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  6. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单：google 一个关键词你能看到十几篇优秀的博文，再这些博文中寻找新的关键字，直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  7. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  8. 003.前端开发知识，前端基础CSS（2020-01-07）

    一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...

  9. 006.前端开发知识，前端基础CSS（2020-01-21）

    来源:第五天  01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...

随机推荐

  1. Vue-router的介绍

    1.路由基础介绍 (1)什么是前端路由: 路由是根据不同的URL地址展示不同的内容或页面. 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做.之前是通过服务端根据URL的不同返回不同的页面 ...

  2. [CQOI2016]K远点对（KD-Tree）

    暴力的做法应该是这样的,维护大小为k的堆,每次插入两点间距离并弹出堆顶. 然后这个做法显然是可以KD-Tree优化的,建立KD-Tree,然后如果该平面内最远点小于堆顶,则直接退出.就当做是复习很久没 ...

  3. win10编译libpng

    libpng在windows的编译. ligpng的官网介绍如下: libpng is the official PNG reference library. It supports almost a ...

  4. Git 小课堂 002——别名

    昨天我们聊了聊 Git 的文件存储,今天我们聊聊 Git 的别名.不知道你是不是熟悉别名,如果你经常使用命令行做一些事情,有一些复杂的命令,或者是一些简单的操作,往往用一些别名方法就很方便很容易,下面 ...

  5. MST(最小生成树)——Prim算法——HDU 1879-继续畅通工程

    Prim算法很好理解,特别是学完了迪杰斯特拉算法之后,更加能理解Prim的算法思想 和迪杰斯特拉算法差不多,由于最后要形成连通图,故任意指定一个点,作为初始点,遍历所有点,以当前最小权值的点(和迪杰斯 ...

  6. html+css web storage课上笔记 2019.3.18

    存储 cookie cookie 使用文本来存储信息 使用时服务器发送cookie给客户端,下一次时,浏览器发送给服务器 web storage local storage 本地的硬件设备中,关闭后不 ...

  7. Serverless 公司的远程团队沟通策略

    本文系译文,Serverless 团队分散在全球各地,本文介绍我们如何管理沟通策略和远程协作. 原作者:FelixDesroches 译者:Aceyclee 首先向不了解我们的人说明一下,Server ...

  8. Python基础学习一

    Python基础学习一 1.变量与常量 变量名:大小写英文.数字.下划线的组合,数字不能开头 常量名:习惯上常量用大写字母命名,例如"PI" 2.多行输出 转义符:反斜杠(),如果 ...

  9. 对接memcache经验分享

    接口访问日志  数据结构 分享 apiname 接口名称 apiname[cnt]接口访问次数每访问一次增加一次 这里要处理并发问题 我还没有解决: apiname[cnt][n][spent_tim ...

  10. EL表达式和JSTL（三）——EL表达式

    在JSP的开发中,为了获取Servlet中存储的数据,通常需要很多的Java代码,这样的做法使的JSP页面非常混乱,为此,JSP2.0中提供了一种EL规范,是一种简单的数据访问语言. 1.初识EL E ...