事例图片：

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. 两个port贴合七夕主题，百度输入法的“情感营销”策略

        一年一度的七夕佳节是情侣.夫妻之间传情达意.诉说衷肠的最佳时节.基于这一背景.一些传统企业.互联网公司也会针对性的推出一些营销策划,使产品和服务更贴近用户需求,更"接地气" ...

  2. 参照企业微信审批业务，在Winform开发框架中工作流模块的实现业务审批

    目前微信的企业号已经切换到企业微信里面,这个是一个APP程序,提供了很丰富的企业应用,其中包括了业务审批处理,审批业务包括请假.报销.费用.出差等很多个审批场景,在Winform开发框架中工作流模块这 ...

  3. 自学Zabbix3.10.1-事件通知Notifications upon events-媒介类型

    自学Zabbix3.10-事件通知Notifications upon events-媒介类型 zabbix触发器到了要发送通知的情况下,需要一个中间介质来接收并传递它的消息给运维们,以往用nagio ...

  4. springMVC上传错误StandardMultipartHttpServletRequest

    异常信息 java.lang.ClassCastException: org.springframework.security.web.servletapi.HttpServlet3RequestFa ...

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

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

  6. Android项目实战（三十八）：2017最新 将AndroidLibrary提交到JCenter仓库（图文教程）

    我们经常使用github上的开源项目,使用步骤也很简单 比如: compile 'acffo.xqx.xwaveviewlib:maven:1.0.0' 这里就学习一下如何将自己的类库做出这种可以供他 ...

  7. 【CSS3】动画animation-关键帧keyframes

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. go实例之函数

    1.可变参数 示例代码如下: package main import "fmt" // Here's a function that will take an arbitrary ...

  9. Jrebel简单的热部署一个web工程

    前言:博主最近在做Hybris开发,漫长的启动时间大大的拖累了项目的进度,而Jrebel的出现就是为了减少项目重启的时间或者说修改了代码后直接不用重启就可以看到修改的结果,但是Hybris的部署一直没 ...

  10. SuperSocket 最基础入门

    ---恢复内容开始--- SuperSocket 是什么? 首先我们明确一下SuperSocket 本质是什么? 网络框架 !  ok , 那么我们直接上上官网,作者已经开源到Github,可以做两件 ...