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 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- 原生JS数组方法实现(一）————push()、unshift()、pop()和shift()
push 向数组末尾添加一个或多个元素,并返回数组新的长度 ```javascript function push(){ for(let i=0;i<arguments.length;i++){ ...
- $bzoj3872\ [Poi2014]\ Ant\ colony$ 二分+$dp$
正解:二分+$dp$ 解题报告: 传送门$QwQ$ 一年过去了依然没有头绪,,,$gql$的$NOIp$必将惨败了$kk$. 考虑倒推,因为知道知道除数和答案,所以可以推出被除数的范围,然后一路推到叶 ...
- openlayers中实现点的拖拽（modify）,在layer中增加修改删除point。
最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置 ...
- MicroPython TPYBoard v702实现HTTP应用功能
[Micropython]TPYBoard v702 HTTP应用功能 转载请注明文章来源,更多教程可自助参考docs.tpyboard.com,QQ技术交流群:157816561,公众号:Micro ...
- 1027 打印沙漏 (20 分)C语言
题目描述 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * *** ***** 所谓"沙漏形状" ...
- HTTP1.1
读了一本图解http,总结一下子. 1 .重要的头部 1.TCP/IP 通信传输流 五层模型 先盗个图,重点说明每过一层都会加个头,头很重要啊!其中https 就是在传输层搞事,把本来明文的数据包 ...
- 简单的 FFT 变形 - BZOJ 2194
「BZOJ2194」快速傅立叶之二 2015年4月29日3,8300 Description 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 ...
- dp-最大连续子序列的和
https://www.felix021.com/blog/read.php?1587 什么是最大连续子序列和呢 ? 最大连续子序列和是所有子序列中元素和最大的一个 . 问题 : 给定一个序列 { - ...
- 使用vscode运行python出现中文乱码的解决方法
前提:自己安装了code runner的插件 快捷键Ctrl+Shift+P,打开设置Open Settings (JSON):
- KVM虚拟化基础
关于虚拟化 什么是虚拟化 在计算机技术中,虚拟化(技术)或虚拟技术(英语:Virtualization)是一种资源管理技术,是将计算机的各种实体资源(CPU.内存.磁盘空间.网络适配器等),予以抽象. ...