一、布局

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

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. UVA - 10934 Dropping water balloons（装满水的气球）（dp）

    题意:有k个气球,n层楼,求出至少需要多少次实验能确定气球的硬度.气球不会被实验所“磨损”. 分析: 1.dp[i][j]表示第i个气球,测试j次所能确定的最高楼层. 2.假设第i-1个气球测试j-1 ...

  2. 51nod 1346：递归

    1346 递归 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 函数f(n,m) { 若n=1或m=1返回a[n][m]; 返回f(n-1,m)异或 ...

  3. 自己编写DLL并导出函数

    sub.c #include<windows.h> #include"sub.h" int WINAPI DllMain(_In_ HANDLE _HDllHandle ...

  4. VC++ DLL 3 动态链接库

    前面先介绍了静态链接库的方式提供了函数结构的方法,现在就来说下,如果用非MFC的动态链接库要怎么实现,这个过程稍微复杂一点点,但是基本也都是一个套路下来. 1.新建一个工程: 2.编写cpp文件和头文 ...

  5. 洛谷 P1709 隐藏口令

    题目描述 有时候程序员有很奇怪的方法来隐藏他们的口令.Binny会选择一个字符串S(由N个小写字母组成,5<=N<=5,000,000),然后他把S顺时针绕成一个圈,每次取一个做开头字母并 ...

  6. 代码review还是需要再仔细点-一次crash异常分析的总结

    版本发布之后,外网新增了一些crash, 从mini dump看,的确是有异常的,619行crash了. 代码如下: 奔溃的地方如下 可以看到是Zip add的时候指针空了, 为什么呢? 结合代码,可 ...

  7. ES系列之Promise async 和 await

    概述 promise是异步编程的一种解决方案,比传统的解决方案—回调函数和事件—更合理更强大. 所谓的promise就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作的结果). Pro ...

  8. [极客大挑战 2019]BuyFlag

    0x00 知识点 php中的strcmp漏洞 说明: int strcmp ( string $str1 , string $str2 ) 参数 str1第一个字符串.str2第二个字符串.如果 st ...

  9. SpringMVC在使用JSON时报错信息为：Content type 'application/json;charset=UTF-8' not supported

    直接原因是:我的(maven)项目parent父工程pom.xml缺少必要的三个jar包依赖坐标. 解决方法是:在web子模块的pom.xml里面添加springMVC使用JSON实现AJAX请求. ...

  10. 一个简单WebApp的全程

    开始前,我先给出上一篇选项卡的demo链接http://xqhuadou.com/demo1/index.html.相信看着应该很带感,不过这个是之前经过修改的. 制作过程我就不多说了,可以直接看源码 ...