css+div页面布局
div标签是html页面中用于分组的块元素，是专门用于元素布局的标签。
标签的级别：
1、行级标签：可设置大小，但一行只能容下一个行级标签（默认宽度==页面宽度，默认高度==填充高度）
2、块级标签：可设置大小，多个块级标签占据一行（默认宽度==填充宽度，默认高度==填充高度）
CSS中与布局有关的常用属性：
| CSS属性 |
含义
|
可用值
|
含义
|
|
position
|
元素位置 |
absolute
|
相对屏幕位置
|
|
relative
|
相对父元素的位置
|
||
|
static
|
固定位置
|
||
|
direction
|
元素内容靠哪侧
|
ltr | 左 |
|
rtl
|
右
|
||
|
float
|
元素本身靠哪侧
|
left
|
左
|
| right |
右
|
||
| height |
高度
|
pt|px|%|em
|
像素、百分比
|
|
width
|
宽度
|
pt|px|%|em
|
像素、百分比
|
|
margin
|
边框外部填充
|
pt|px|%|em
|
像素、百分比
|
|
padding
|
边框内部填充 |
pt|px|%|em
|
像素、百分比
|
|
border
|
边框
|
pt|px|%|em
|
像素、百分比
|
1、我们先一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.container{background-color: gray;}
div.leftframe{background-color: #00ff99;}
div.rightframe{background-color: #88bb99;}
</style>
</head>
<body>
<div class="container">
<div class="leftframe">
<ul>
<li>班级列表</li>
<li>学生查询</li>
<li>成绩统计</li>
<li>学校信息</li>
</ul>
</div>
<div class="rightframe">页面主体内容</div>
</div>
</body>
</html>
body标签中三个div标签,层级关系如下
<div class="container">
<div class="leftframe">
<div class="rightframe">
head标签中通过内联方式，给三个标签上色，效果如下
2、我们设置一下各标签的宽度和高度
一些解释：
1、div父标签div.container的宽度设置为页面的90%，默认100%，高度为leftframe+rightframe
2、div子标签div.leftframe宽度设置为父标签的20%，默认100%，高度设置为固定值200px
3、div子标签div.rightframe宽度设置为父标签的50%，默认100%，高度设置为固定值200px
3、float的用法
float：专门针对div而生的用法，字面意思为浮动，实际含义为将子div标签从父div标签中抠出来，作为块级标签使用（此时不再占用父div的空间）
示例：(将leftrame设置float属性)
将rightframe设置float属性
4、margin:边框外部填充（四面填充）
margin-left：填充左侧
margin-right:填充右侧
margin-top:填充上方
magrin-button:填充下方
示例：
5、padding:内部填充（四面填充）
padding-left,
padding-rihgt,
padding-top,
padding-button
示例：
css+div页面布局的更多相关文章
- DIV页面布局，开局代码
DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...
- html div+css做页面布局
http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
- bootstrap+css进行页面布局
效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...
- 一个简单的模板了解css+div网页布局
直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equi ...
- css篇-页面布局-三栏布局
页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...
- div页面布局基本布局知识
页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 每天点滴的进行，css+div简单布局...布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- Spring mvc 4系列教程（三）—— Spring4.X的新特性
1.Spring4.0的新特性 从2004年Spring的1.0发布后,后面又发布了很多重要的版本:Spring2.0提供了XML命令空间和AspectJ的支持:Spring2.5提出了注解驱动(an ...
- logstash-2-插件配置
配置语法: Logstash必须有一个 input 和一个 output 1, 处理输入的input 1), 从文件录入 logstash使用一个名为 filewatch的 ruby gem库来监听 ...
- Linux下解决高并发socket最大连接数限制，tcp默认1024个连接
linux作为服务器系统,当socket运行高并发TCP程序时,通常会出现连接建立到一定个数后不能再建立连接的情况 本人在工作时,测试高并发tcp程序(GPS服务器端程序),多次测试,发现每次连接建立 ...
- 【IT笔试面试题整理】字符串转数组+数组转字符串
[试题描述]定义一个函数,字符串转数组数组转字符串 [参考代码] public static int strToInt(String str) { int i = 0, num = 0; char[] ...
- 简单实现Spring框架--注解版
自己写的Spring框架——简单实现IoC容器功能 前几天在网上看了篇帖子,是用xml的方式实现spring的ioc容器,觉得挺有意思的,这边自己试着用注解的形式造了一套轮子. 工程结构 codein ...
- 微信公众号开发笔记1-获取Access Token
获取你的Access Token a)可以采用网址的形式: 用appid和appsecert获得access token,接口为https://api.weixin.qq.com/cgi-bin/to ...
- CodeForces -977F(突破定式思维+map应用)
题目链接: https://cn.vjudge.net/problem/CodeForces-977F /* 问题 输入n和n个数的数列 计算并输出最长增量为1的上升子序列 解题思路 用n2的最长上升 ...
- 统计频率（map映照容器的使用）
问题描述 AOA非常喜欢阅读莎士比亚的诗,莎士比亚的诗中有种无形的魅力吸引着他!他认为莎士比亚的诗中之所以些的如此传神,应该是他的构词非常好!所以AOA想知道,在莎士比亚的书中,每个单词出现的频率各 ...
- Dockerfile构建镜像
Dockerfile构建镜像的步骤: 从基础镜像运行一个容器 执行一条指令,对容器做出修改 执行类似docker commit的操作,提交一个新的镜像层 再基于刚提交的镜像运行一个新的容器 执行Doc ...