007.前端开发知识,前端基础CSS(2020-01-28)
一、布局
一列固定宽度且居中 两列左窄右宽型 通栏平均分布型
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)的更多相关文章
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- 前端开发概述+JS基础细节知识点
一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...
- Vue.js高效前端开发知识 • 【目录】
持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...
- 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破
我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
- 003.前端开发知识,前端基础CSS(2020-01-07)
一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...
- 006.前端开发知识,前端基础CSS(2020-01-21)
来源:第五天 01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...
随机推荐
- UML-逻辑架构精化
向下请求:Facade模式 向上返回:观察者模式 不局限于上图中指定的层使用相应模式,其他层也可以使用. 另外,尽量不要出现“公共业务模块”,设计时尽量做好系统拆分.否则,一旦修改公共代码,可能会影响 ...
- shell中sparksql语句调试、执行方式
1.命令方式执行sparksql查询 SQL="use mydatatable;;select count(1) from tab_videousr_onlne where p_regiio ...
- linux 离线安装mysql7或者8
安装方式:官网下载压缩包进行安装 1.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-download ...
- 收藏基本Java项目开发的书
一.Java项目开发全程实录 第1章 进销存管理系统(Swing+SQL Server2000实现) 第2章企业内部通信系统(Swing+JavaDB实现) 第3章 企业人事管理系统( Swing+H ...
- 阿里云ECSLinux系统下挂载磁盘
最近公司服务器老是提示磁盘空间不足,原因是以前的业务负责人开了Tomcat的debug日志并且没有做日志轮询,所以日志量非常大.当我做了日志切割轮询后发现磁盘还是太小才40G,按理外网服务器怎么可能这 ...
- Linux 配置单机yum源--ISO镜像做源
前提:防火墙关闭.SElinus关闭 1.上传ISO镜像(建议传到home目录下) [root@localhost home]# ls iso/ CentOS-.iso 2.挂载目录 [root@lo ...
- 初学C#之运算符和关系表达式
㈠运算符和关系表达式 一元运算符++.-- 前加和后加区别,事例++在后如下: ; ; //结果age=19 说明age++在表达式中age的值也+1.结果sum=8,原因age++,++在后用age ...
- PAT Advanced 1096 Consecutive Factors (20) [数学问题-因子分解 逻辑题]
题目 Among all the factors of a positive integer N, there may exist several consecutive numbers. For e ...
- 中国文化产业基金越来越多,但IP变现难题为何仍未解决?
自始至终,中国商界领域的态势就有一个很明显的特征--哪里是风口.哪里是热点,企业就会蜂拥而至并集体掘金.一直到决出胜负,或者把整个风口"做烂"才罢休.很典型的案例就是电商领域已经呈 ...
- python——print函数
.print()函数概述 print() 方法用于打印输出,是python中最常见的一个函数. 该函数的语法如下: print(*objects, sep=' ', end='\n', file=sy ...