div元素是用于分组HTML元素的块级元素

上图代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="container" style="width: 500px">

    <div id="header" style="background-color: aqua">

        <h2 style="margin-bottom: 0;">Mr Shao</h2>

    </div>

    <div class="menu" style="background-color: cornflowerblue;height: 200px;width: 100px;float:left">

        <b>菜单</b><br>

        <p>HTML</p>

        <P>CSS</P>

        <P>Javascript</P>

    </div>

    <div class="content" style="background-color: yellow;height: 200px;width: 400px;float: left">

        内容部分

    </div>

    <div class="footer" style="background-color: cadetblue;clear: both;text-align: center">

        版权@shaojf.com

    </div>

</div>

</body>

</html>

HTML布局--使用<div>元素的更多相关文章

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

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

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

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

  3. html5--1.18 div元素与布局

    1.18 div元素与布局 1.元素的分类2.div元素与布局 1.元素的分类 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行:通常可以作为容器在内部添加其他元素. 已经学过的块元素有: ...

  4. 两个非空的<div>元素inline-block化后出现空白部分解决办法

    在涉及到两个<div>元素并列显示的效果时,一般有两种方法: 1.使用float元素让元素并联显示: 2.将块状的<div>元素display设置为inline-block,使 ...

  5. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  6. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  7. 使 div 元素看上去像一个按钮

    使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...

  8. js动态删除div元素

    在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...

  9. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. FastDFS安装详解

    1.安装环境 os:centos6.5 Fastdfs版本:FastDFS_v5.08.tar.gz 下载地址:https://sourceforge.net/projects/fastdfs/fil ...

  2. android打包library

    最近在做开发时,遇到一个需求,就是要自定义一个控件,最后需要将其打包成android library库,然后供以后其他需求使用,由于以前很少打包library,所以这次特地学了下怎么打包. 首先先随便 ...

  3. 日期类Date

    Java在日期类中封装了有关日期和时间的信息,用户可以通过调用相应的方法来获取系统时间或设置日期和时间.Date类中有很多方法在JDK1.0公布后已经过时了,在8.3中我们将介绍JDK1.0中新加的用 ...

  4. 对Linux命令进一步学习

    root@wuheng-virtual-machine:/home/wuheng# ls -ltotal 44drwxr-xr-x 2 wuheng wuheng 4096 Mar  3 01:30 ...

  5. 蓝桥杯 第三届C/C++预赛真题（2） 古堡算式（数学题）

    福尔摩斯到某古堡探险,看到门上写着一个奇怪的算式: ABCDE * ? = EDCBA 他对华生说:“ABCDE应该代表不同的数字,问号也代表某个数字!” 华生:“我猜也是!” 于是,两人沉默了好久, ...

  6. Vimium、CrxMouse配置信息

    每次使用别的地方的Chrome的时候,虽然Vimium插件能同步过来,但是配置信息不在,所以先记录在整理以备不时之需. 这个是Vimium的配置信息,然后我还会把搜索引擎改为http://www.ba ...

  7. 虚拟机安装Ubuntu过程记录

    1.WMware中新建虚拟机 2.选择安装程序光盘镜像iso 3.个性化Linux(全名.用户名.密码等) 4.指定虚拟机名称以及安装位置 5.指定虚拟机磁盘容量大小 6.完成虚拟机配置 安装过程.. ...

  8. manacher算法处理最长的回文子串（二）

    在上篇<manacher算法处理最长的回文子串(一)>解释了manacher算法的原理,接着给该算法,该程序在leetcode的最长回文子串中通过.首先manacher算法维护3个变量.一 ...

  9. [HEOI2015]兔子与樱花[贪心]

    4027: [HEOI2015]兔子与樱花 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1043  Solved: 598[Submit][Stat ...

  10. Python 日志模块的定制

    Python标准logging模块中主要分为四大块内容: Logger: 定义应用程序使用的接口 Handler: 将Loggers产生的日志输出到目的地 Filter: 对Loggers产生的日志进 ...