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通用块元素

<div style="background: #FF8888;height: 100px;width: 300px">我是div通用块元素</div>

我是标题
我是导航栏
我是iframe内联框架
我是尾部
 <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元素与布局的更多相关文章

  1. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  2. HTML 布局 - 使用<div> 元素

    网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样).高佣联盟 www.cgewang.com 大多数网站可以使用 <div> 或者 <table> 元素来创建多列 ...

  3. HTML布局--使用<div>元素

    div元素是用于分组HTML元素的块级元素 上图代码示例如下: <!DOCTYPE html> <html lang="en"> <head> ...

  4. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  6. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  7. 第九十四节,html5+css3移动手机端流体布局,旅游部分,媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  8. 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  9. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

随机推荐

  1. 【设计模式】工厂方法(FactoryMethod)模式

    看不见PPT的请自行解决DNS污染问题. 相关类的代码: namespace FactoryPatternConsole.Model { public class Address { public s ...

  2. Java排序算法(三):直接插入排序

    [基本思想] 关键:在前面已经排好序的序列中找到合适的插入位置 步骤: 1. 从第一个元素開始,该元素能够觉得已经排好序. 2. 取出下一个元素.在已经排好序的元素序列中从后往前扫描进行比較. 3. ...

  3. linux驱动开发重点关注内容--摘自《嵌入式Linux驱动模板精讲与项目实践》

    本文摘自本人拙著 <嵌入式Linux驱动模板精讲与项目实践> 初步看起来Linux设备驱动开发涉及内容非常多,而须要实现驱动的设备千差万别.事实上做一段时间驱动之后回首看来主要就是下面几点 ...

  4. VirtualBox 笔记

    VirtualBox 笔记p=111" target="_blank"> http://www.youi5.com/?p=111 VirtualBox 虚拟机,由I ...

  5. iOS中 扫描二维码/生成二维码具体解释 韩俊强的博客

    近期大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 指示根视图: se ...

  6. Msfvenom 学习笔记与总结

    平台:Android,可用Payload: android/meterpreter/reverse_http Run a meterpreter server on Android. Tunnel c ...

  7. Oracle更新时间字段

    update field set BEGINDATE=to_date('2015-05-03 10:30:20','yyyy-mm-dd hh24:mi:ss') where NOO='01'  

  8. FileInputStream 的读取操作

    package xinhuiji_day07; import java.io.File;import java.io.FileInputStream;import java.io.FileNotFou ...

  9. Array容易被忽略的join

    var lists, items = '', i; lists = [{ Fruits:'苹果' },{ Fruits:'香蕉' },{ Fruits:'菠萝' }]; /*items += '< ...

  10. Ubuntu/CentOS下源码编译安装Php 5.6基本参数

    先确认安装libxml2 apt-get install libxml2 libxml2-dev或者yum install libxml2 libxml2-dev ./configure --pref ...