CSS学习笔记--Div+Css布局实战(入门)
基本页面布局
1.第一部，先创建上下左右4个DIV
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css" > </style>
<title></title>
</head>
<body>
<div class="main">
<div class="top">顶部</div> <div class="left">左边</div>
<div class="right">右边</div>
<div class="bottom">底部</div>
</div>
</body>
</html>
2.设置body的margin属性
body{
margin:0;
}
3.设置页面顶部
.top{
width:900px;
height: 100px;
background-color: red;
}
效果如下：
4.设置左边DIV元素
.left{
float:left;
width:200px;
height: 600px;
background-color: green;
}
效果如下:
5.设置右边DIV元素
同上，通过float属性，把右边DIV也向左漂浮
.right{
float:left;
left: 200px;
width:700px;
height: 600px;
background-color: pink;
}
效果如下：
6.设置底部DIV
.bottom{
float: left;
width:900px;
height: 200px;
background-color: blueviolet;
}
效果如下：
7.最终代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css" > body{
margin:0;
}
.top{
width:900px;
height: 100px;
background-color: red;
}
.left{
float:left;
width:200px;
height: 600px;
background-color: green; } .right{
float:left;
left: 200px;
width:700px;
height: 600px;
background-color: pink;
} .bottom{
float: left;
width:900px;
height: 200px;
background-color: blueviolet;
}
</style>
<title></title>
</head>
<body>
<div class="main">
<div class="top">顶部</div> <div class="left">左边</div>
<div class="right">右边</div>
<div class="bottom">底部</div>
</div>
</body>
</html>
如果需要做精确定位，最好加上position属性，然后用top,left,right,bottom这几个来设置定位，可以用浮动元素位置固定
CSS学习笔记--Div+Css布局实战(入门)的更多相关文章
- CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- css学习笔记 --初学 css代码风格、布局误区
初学css,记录下初学者需要注意的事项. 一.css 代码风格 1.css 命名语义化. 如类名: main 主体 container 内容 footer 站底 right.center ...
- DIV+CSS学习笔记（CSS）
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
- HTML+CSS学习笔记 (11) - CSS盒模型
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- HTML+CSS学习笔记 (15) - css样式设置小技巧
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- poj3471 - 倍增+LCA+树上差分
题意:一张n节点连通无向图,n-1条树边,m条非树边.若通过先删一条树边,再删一条非树边想操作 将此图划分为不连通的两部分,问有多少种方案. 利用LCA整好区间覆盖,dfs用来求前缀和 需要注意的是, ...
- ELK学习实验013：ELK的一个完整的配置操作
前面做了关于ELK组件的各个实验,但是并没有真正的把各个组件结合起来做一个实验,现在使用一个脚本简单的生成日志,模拟生产不断产生日志的效果 一 流程说明 使用脚本产生日志,模拟用户的操作 日志的格式 ...
- 【题解】Leyni，罗莉和队列(树状数组)
[题解]Leyni,罗莉和队列(树状数组) HRBUST - 1356 将整个序列reverse一下,现在就变成了从高到低的排队.题目就变成了,定位一个妹子,问这个妹子前面的比这个妹子小的妹子中,下标 ...
- vue 源码 学习days8-比较两个对象的方法
// 在面试中可能会遇到, 思想重要 // 比较两个对象是否是相等的 两个对象 // 1. js 中对象是无法使用 == 来比较的, 比是地址 // 2. 我们一般会定义如果对象的各个属性值都相等 那 ...
- 「2018-12-02模拟赛」T3 约束排列 解题报告
3.约束排列(place.pas/cpp/in/out) 问题描述: 给出 n 个互不相同的小写字母,表示出现的字符类型,以及 k 个约束关系: .....,表示 ai 必须出现在 bi 前面(ai, ...
- 用实例理解设计模式——代理模式（Python版）
代理模式:为其他对象提供一种代理以控制对这个对象的访问. 在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式分为: 静态代理 动态代 ...
- 5.pycharm中导入第三方模块的方法
最近刚入门学习python,网上查找了一些资料,发现python编程用的软件pycharm还是比较多的,于是就跟随大众,学习使用pycharm,在学习的过程中,想要导入第三方模块pyperclip,但 ...
- C# 把文件夹下所有文件添加到集合中
private List<string> FindFile(string Path) { List<string> list=new List<string>(); ...
- 修饰符new与override
new:在作为修饰符时,可以隐藏从父类的继承的成员. override:修改父类的方法.属性. 上代码比较清楚: using System; using System.Collections.Gene ...
- Serverless 微服务实践-移动应用包分发服务
背景 阿里云函数计算是事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.函数计算会为您准备好计算资源,以弹性.可靠的方式运行您的代码,并提供日志查询.性能监控.报 ...