html5--1.18 div元素与布局
1.18 div元素与布局
1.元素的分类
2.div元素与布局
1、元素的分类
- 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行;通常可以作为容器在内部添加其他元素。
已经学过的块元素有:
h1~h6;hr;ul;ol;p;table.........
- 内联元素:不会产生换行效果,会和其他元素并联排列;
已经学过的内联元素有:
b;i;br;img;.........
2、div元素和布局
- div元素是通用的块元素,内部可以包含其他各种元素包括其他div元素;并且可以通过CSS设置样式来完成复杂的页面的布局
- 通过一个简单的实例了解div布局是如何实现的
div示例:
<div style="background: #FF8888;height: 100px;width: 300px">我是div通用块元素</div>
<div style="width: 70%;height: 300px;border: 2px;background: #FFAAAA">
<div style="background: #88FF88;width: 100%;height: 10%">我是标题</div>
<div style="background: #987654;width: 30%;height: 80%;float: left;">我是导航栏</div>
<div style="background: #456789;width: 70%;height: 80%;float: left;">我是iframe内联框架</div>
<div style="background: #8888FF;width: 100%;height: 10%;clear: left;">我是尾部</div>
</div>
html5--1.18 div元素与布局的更多相关文章
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- HTML 布局 - 使用<div> 元素
网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样).高佣联盟 www.cgewang.com 大多数网站可以使用 <div> 或者 <table> 元素来创建多列 ...
- HTML布局--使用<div>元素
div元素是用于分组HTML元素的块级元素 上图代码示例如下: <!DOCTYPE html> <html lang="en"> <head> ...
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 第九十四节,html5+css3移动手机端流体布局,旅游部分,媒体查询
html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- 【转载】CSS + DIV 实现整理布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
随机推荐
- 【设计模式】工厂方法(FactoryMethod)模式
看不见PPT的请自行解决DNS污染问题. 相关类的代码: namespace FactoryPatternConsole.Model { public class Address { public s ...
- Java排序算法(三):直接插入排序
[基本思想] 关键:在前面已经排好序的序列中找到合适的插入位置 步骤: 1. 从第一个元素開始,该元素能够觉得已经排好序. 2. 取出下一个元素.在已经排好序的元素序列中从后往前扫描进行比較. 3. ...
- linux驱动开发重点关注内容--摘自《嵌入式Linux驱动模板精讲与项目实践》
本文摘自本人拙著 <嵌入式Linux驱动模板精讲与项目实践> 初步看起来Linux设备驱动开发涉及内容非常多,而须要实现驱动的设备千差万别.事实上做一段时间驱动之后回首看来主要就是下面几点 ...
- VirtualBox 笔记
VirtualBox 笔记p=111" target="_blank"> http://www.youi5.com/?p=111 VirtualBox 虚拟机,由I ...
- iOS中 扫描二维码/生成二维码具体解释 韩俊强的博客
近期大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 指示根视图: se ...
- Msfvenom 学习笔记与总结
平台:Android,可用Payload: android/meterpreter/reverse_http Run a meterpreter server on Android. Tunnel c ...
- Oracle更新时间字段
update field set BEGINDATE=to_date('2015-05-03 10:30:20','yyyy-mm-dd hh24:mi:ss') where NOO='01'
- FileInputStream 的读取操作
package xinhuiji_day07; import java.io.File;import java.io.FileInputStream;import java.io.FileNotFou ...
- Array容易被忽略的join
var lists, items = '', i; lists = [{ Fruits:'苹果' },{ Fruits:'香蕉' },{ Fruits:'菠萝' }]; /*items += '< ...
- Ubuntu/CentOS下源码编译安装Php 5.6基本参数
先确认安装libxml2 apt-get install libxml2 libxml2-dev或者yum install libxml2 libxml2-dev ./configure --pref ...