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 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- Jenkins配置QQ邮箱发送邮件
1.登陆QQ邮箱 2. 在“帐户”里开启“POP3/SMTP”并获取授权码 3. 发送短信验证验证后得到下面验证码 aeoygabszxfecbdj #验证吗 点击确定之后,服务已经开启 4. Jen ...
- 第 426 期 Python 周刊
文章,教程和讲座 端到端机器学习:从数据收集到模型部署 链接: https://ahmedbesbes.com/end-to-end-ml.html 在本文中,我们将完成构建和部署机器学习应用程序的必 ...
- 1.2 UML带来了什么（学习笔记）
需求->需求分析->设计->开发 uml 编号 uml元素 对于语言理解 1 元模型 基本词汇 2 表示法或视图 语法 3 RUP 方法(统一软件开发过程) 方法 4 控制类 定语 ...
- Revealjs网页版PPT让你复制粘贴另类装逼，简洁优雅又低调，不懂编程也看过来
Revealjs网页版PPT让你复制粘贴另类装逼,简洁优雅又低调,不懂编程也看过来 要了解一个新知识我们可以从三个方面入手:是什么,有什么用,怎么用.下面我们就从这三个方面进行讲解Reveal.js噢 ...
- 「USACO11NOV」牛的障碍Cow Steeplechase 解题报告
题面 横的,竖的线短段,求最多能取几条没有相交的线段? 思路 学过网络流的童鞋在哪里? 是时候重整网络流雄风了! 好吧,废话不多说 这是一道最小割的题目 怎么想呢? 要取最多,那反过来不就是不能取的要 ...
- 06_URL参数截取
1:如何获取URL传给子页面的参数: //获得参数(只对字母数字等有效,参数值为中文则不能传) function getQueryString(name) { var reg = new RegExp ...
- 深度学习论文翻译解析（六）：MobileNets：Efficient Convolutional Neural Networks for Mobile Vision Appliications
论文标题:MobileNets:Efficient Convolutional Neural Networks for Mobile Vision Appliications 论文作者:Andrew ...
- css常用单词
<!-- type = circle表示空心圆 --> <!-- type = disc 表示实心圆 --> <!-- type = square表示方块 ...
- JS获取时间戳的几种方法与区别
var today = new Date() Date.now()) Date.parse(today) today.valueOf()) today.getTime() 可以看出,第二种是精确到秒的 ...
- Helm, 在Kubernetes中部署应用的利器
一.背景 Kubernetes(k8s)是一个基于容器技术的分布式架构领先方案.它在Docker技术的基础上,为容器化的应用提供部署运行.资源调度.服务发现和动态伸缩等一系列完整功能,提高了大规模容器 ...