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 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- DEVOPS技术实践_12:创建持续集成的管道
持续集成不仅包含了Jenkins或者相关其它的CI工具,也包含了包含代码如何控制,采用的什么分支策略等.不同的组织可能采用不同的类型的策略来完成CI,策略类型和项目的类型的有很大的关系. 一 分支策略 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Java高级特性——流
以上就是这段时间学习完流的知识以后我的总结,.mmap文件可以去我的github上获取:https://github.com/xiaozhengyu/StudyNotes.git
- JAVA字节码文件之常量池
一.常量池的内容 一个java类中定义的很多信息都是由常量池来维护和描述的,可以将常量池看作是class文件的资源仓库,比如java类中定义的方法与变量信息.常量池中主要存储两类常量:字面量(文本字符 ...
- Java：Excel文件上传至后台
之前的项目中有遇到上传Excel文件的需求,简单说就是解析一个固定格式的Excel表格,然后存到数据库对应的表中,表格如下: 项目采用SSM架构,mvc模式,显而易见,这个Excel表需要拆成两个表, ...
- 基于CentOS 7 部署MySQL 5.7的基本操作
关闭selinux # sed -i '/SELINUX/s/enforcing/disabled/' /etc/selinux/config重启后生效# sestatus 修改提示符配置# vi / ...
- Java和JavaScript之间的区别
1.简介 通过优锐课核心java学习笔记中,我们可以看到,Java和JavaScript之间的区别.我们将在本文中比较Java语言和JavaScript语言.JavaScript由Netscape开发 ...
- docker+mysql 更改配置后重启不了的解决方案
docker+mysql 更改配置后重启不了的解决方案 前提:在最近的项目中,决定将项目改造成数据库读写分离的架构,于是擅自更改生产环境的数据库的配置文件my.cnf,由于我是用docker进行部署的 ...
- （一）Angular+spring-security-cas前后端分离（基于ticket）认证时序图
一.静态资源认证时序图 2. ajax请求认证拦截时序图 3.退出登录时序图
- Qt中设置窗口图标
转:https://blog.csdn.net/weiren2006/article/details/7438028 1.通过qtcreator新建一个文件filename.qrc,将图片添加到fil ...