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标签,层级关系如下

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>  <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> ...

随机推荐

Docker概念学习系列之Docker与传统虚拟机差异（4）
不多说,直接上干货! 见[博主]撰写的https://mp.weixin.qq.com/s/YihjPONUcUi4b_7RC8oLYw 传统虚拟化是在硬件层面实现虚拟化,需要有额外的虚拟机管理应 ...
idea terminal 修改为git bash 不支持中文
1.idea terminal 修改为git bash 由于IDEA自带的Terminal工具是Windows命令窗口cmd,在开发过程中需要用到一些常用的命令操作时要不断的在IDEA和git bas ...
Charles抓包实战详解
访问我的博客前言通过上一篇文章,想必你已经掌握了如何正确安装抓包神器 Charles,如果还是抓不了包,可以再看看. 今天要做是抓包实战,因为我在做网络文学的公司就职,所以就拿网络文学的 APP ...
面试：vector类的简单实现
vector类的简单实现 #include <vector> #include <iostream> #include <cstring> #include < ...
Leetcode 759. Employee Free Time
思路:区域覆盖问题.一个自然的想法是将每个员工的工作时间段看做一个木棒,每个木棒的长度就是这个时间段的时长.然后按照木棒的起始位置升序排列,接着由低位置向高位置一个木棒一个木棒的看过去.如果当前木棒的 ...
Python常见问题
1. 处理中文时出现的错误'ascii' codec can't decode byte 0xe9 in position 0: ordinal not in range(128)" 解决方 ...
CRM项目hellokitty部分交互界面
登录界面实现密码的不显示,验证码的跟换员工管理界面完成所有的功能学校统计界面完成所有的功能班级管理差一个手风琴组件其他功能也完成了
SpringMvc RequestMappingHandlerMapping
RequestMappingHandlerMapping是SpringMvc中一个比较核心的类,查看下它的类结构图: InitializingBean是个很神奇的接口,在Spring每个容器的bean ...
switch-case最容易忽视的一点
switch语句是常用的一种java语法,但是往往最基本的,总是最容易被人们忽略. 首先,看下switch语句的基本结构: switch(表达式){ case 常量1: 语句1; break; cas ...
.3-浅析webpack源码之预编译总览
写在前面: 本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂. 既然是浅析,那么案例就不必太 ...

css+div页面布局

css+div页面布局的更多相关文章

随机推荐

热门专题