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 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- 洛谷$P$2522 $Problem\ b\ [HAOI2011]$ 莫比乌斯反演
正解:莫比乌斯反演 解题报告: 传送门! 首先看到这个显然就想到莫比乌斯反演$QwQ$? 就先瞎搞下呗$QwQ$ $gcd(x,y)=k$,即$gcd(\left \lfloor \frac{x}{k ...
- $[SHOI2007]$ 园丁的烦恼 二维数点/树状数组
\(Sol\) 设一个矩阵的左上角为\((x_1,y_1)\),右下角为\((x_2,y_2)\),\(s_{x,y}\)是到\((1,1)\)二维前缀和,那么这个矩阵的答案显然是\(s_{x_2,y ...
- 02_jQuery 验证密码是6位或者8位纯数字
var reg = new RegExp(/^\d{8}$/); //工作密码必须是8位数字 if(!reg.test("12544444").val())) { alert(&q ...
- iSO垂直滑动条VerticalSlider
由于项目需要实现一个垂直的Slider,滑动条使用UIlabel实现,按钮使用UIButton,按钮可以设置背景图片,代码如下 VerticalSlider.h // // VerticalSlide ...
- 利用 Hexo 或者 hugo 搭建个人博客
我们无法选择生活的样子,但我们可以记下来. 博客的开始 其实,一切都是为了更好的装逼.好吧,我着相了. 最开始想做一个自己博客,主要是因为看到了很多人都有,觉得自己没有太 Low 了.于是申请了 CS ...
- SEATA 分布式事务入门DEMO
Simple Extensible Autonomous Transacation Architecture,seata是简单的.可扩展.自主性高的分布式架构 SEATA Server Configu ...
- TCP/IP协议与HTTP协议（一）
1.什么是TCP/IP 如果要了解一个人,可以从他归属的集体聊起来.我们的HTTP协议就属于TCP/IP协议家族中的一员,了解HTTP协议再整个网络流程中的地位,也能更加充分的理解HTTP协议. 要 ...
- 史上最简约的vi教程，复制和粘贴
上一篇博客,讲了"新手"如何"入门"vi,解决了"两眼一抹黑"的情况.知道在vi下如何进行基本的操作,如部署在Linux下的项目,修改配置文 ...
- restframework 视图
重要知识点 as_view()获取的是view方法名,当url配版成功,执行view方法 一.逻辑封装(mixins, generics) path('author/', views.AuthorVi ...
- 痞子衡嵌入式：ARM Cortex-M内核那些事（3.2）- 安全模块看特性(M23/33/35P)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M功能模块,不过侧重点是三款安全特性处理器. ARM Cortex-M处理器家族发展至今(2020),已有8代产品 ...