事例图片：

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;">王浩</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">

        版权@wanghaohao.com

    </div>

</div>

</body>

</html>
 
 
 

HTML之前端操作div标签布局的更多相关文章

  1. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  2. 前端HTML div标签的用法 盒子模型

    盒子模型 边框 border -外边距 margin- 内容与边框距离padding[会撑大div边框]- 宽width-高height. div的奇特玩法 1.把div弄成圆形 [css设置bord ...

  3. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  4. 前端09 /jQuery标签操作、事件、补充

    前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...

  5. 前端08 /jQuery标签操作、事件

    前端08 /jQuery标签操作.事件 目录 前端08 /jQuery标签操作.事件 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 ...

  6. 前端修炼の道 | <div> 标签简介

    <div> 标签是最基本的,同时也是最常用的标签. 该标签是一个双标签,出现在主体区域中,主要作为一个容器标签来使用,在 <div> 标签中可以包含除 <body> ...

  7. HTML列表（组标签）+div（布局标签）与span

    一.列表 HTML中常见的列表有三种,分别是: 1.无序列表,是一组描述列表语义的组标签,列表中每个项之间没有先后顺序:如图: 1)组标签:组标签就是由多个标签组成的一个整体,它们之间共同存在:例如 ...

  8. 前端 HTML body标签相关内容 常用标签 盒子标签 div

    盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...

  9. web前端之 HTML标签详细介绍

    html标签的分类 点我查看完整的html标签介绍 在html中,标签一般分为块级标签和行内标签 块级标签:块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签"p& ...

随机推荐

  1. 关于子线程更新UI

    大家都了解的子线程不能更新UI,所以普通青年比方我,遇到耗时操作用到线程时.不得不立刻想到了用handler传递来解决UI更细的问题. 普通青年的做法: 方案:使用Thread+handler方式,h ...

  2. Ansible@一个高效的配置管理工具--Ansible configure management--翻译（一）

    未经书面许可,请勿转载 ---      Ansible is the simplest way to automate apps and IT infrastructure 这是Ansible官方站 ...

  3. Vue深度学习（3）

    基础 Vue.js允许自定义指令,实质上是让你教 Vue一些新技巧:怎样将数据的变化映射到 DOM 的行为.可以使用 Vue.directive(id, definition) 的方法传入指令 id  ...

  4. laravel会话驱动扩展—连接自定义会话管理系统

    laravel 版本:5.3.* 用laravel开发公司信息系统过程中,由于业务或安全问题的考虑,会有一些特殊的用户会话管理方面的需求,如多个子系统会话统一管理或A系统业务操作导致B系统中某些在线用 ...

  5. spring boot部署系统--morphling简介

    Morphling 简介 Morphling是一套基于Spring Boot 1.5开发的部署系统,依赖简单,一套Mysql即可运行,操作简单明了,适用于百台规模几下机器的运维操作 功能概述 系统部署 ...

  6. Android查缺补漏（View篇）--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0？

    在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...

  7. Confluence 持续集成平台部署记录

    1.1 Confluence简介 Confluence是一个专业的企业知识管理与协同软件,也可以用于构建企业wiki.使用简单,但它强大的编辑和站点管理特征能够帮助团队成员之间共享信息.文档协作.集体 ...

  8. 图片验证码(Struts2中使用)

    写在前面: 最近在项目中做了一个登录页面,用到了图片验证码的功能,所以记录一下.方便之后再有用到,直接拿来用即可.其实图片验证码的生成都是有固定步骤的,网上也有很多的例子,有的时候,如果不想深究,都是 ...

  9. Error Running Git Empty git --version output:IDEA关联GitHub时出现这个错误

    刚刚学习使用idea中,想要把自己的项目上传到github,遇到这样一个问题,先记录下来,到时候解决了在把方法贴出来. ---------------------------------------- ...

  10. Linux根目录详解-转自鸟哥的私房菜

    转自:http://myhat.blog.51cto.com/391263/107931/   *根目录(/)的意义与内容: 根目录是整个系统最重要的一个目录,因为不但所有的目录都是由根目录衍生出来的 ...