无序列表，有序列表，自定义列表

无序列表是ul表示，每个元素用li表示

有序列表是ol表示，每个元素用li表示

    <ul>

      <li>首页</li><li>通知</li><li>订单</li>

    </ul>

列表默认是纵向排列的，如果需要控制列表的样式，可以使用CSS来进行样式控制

区块元素<div>

使用区块标签来进行布局。古老的对网页进行布局的方法是使用表格，现在我们一般不采用表格来进行布局，而使用区块元素div

<body>

<div id="container" style="width:1200px; height:800px; background-color:gray;">

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

管理系统

</div>

<div id="menu-top" style="background-color:green;">

菜单

</div>

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

菜单

</div>

<div id="content" style="background-color:blue;     width:1000px; height:200px; float:left; ">

内容在这里</div>

</div>

</body>

可以看到我们先定义了一个容器div，也就是container，然后这个容器的宽度是1200px，高度是800px，背景是灰色的，如果不规定高度是话，那么会根据它里面的内容来作为高度。

这个容器里面一共有四个区块，一个是内容content，用作主要的显示，一个是头部，header，用于放网页的首标题。

一个左边的标题栏，这个标题栏的id是menu-left，这个区块的宽度是100，加上content的宽度1000，比容器container的宽度少了100，所以在content的最右边还会有一条100px的灰色边。

因为header没有规定宽度，因此它跟随的是container的宽度。

span标签是内联元素，可以用作区块元素内的文本容器。

内联元素和区块元素是两个相反的概念。

PHP全栈开发（四）: HTML 学习（2. div 布局）的更多相关文章

  1. Python 全栈开发四 python基础 函数

    一.函数的基本语法和特性 函数的定义 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的.函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数 ...

  2. python全栈开发_day15_模块学习

    一:模块 1)什么是模块 每一个py文件就是一个模块 导入模块,会编译执行 1.形成一个对应的pyc文件 2.产生该模块自己的店全局名称空间 3.在使用该模块的全局名称空间中产生一个名字(导入的模块名 ...

  3. Python全栈开发——Linux命令学习

    Linux -- 一切皆文件 pwd: 查看当前所在目录 '/' :根目录 cd : 切换目录   eg.cd /    切换到根目录 ls:查看当前根目录下有几块盘.几个文件 ls -l:查看详细信 ...

  4. python全栈开发中级班全程笔记（第二模块、第四章）（常用模块导入）

    python全栈开发笔记第二模块 第四章 :常用模块(第二部分)     一.os 模块的 详解 1.os.getcwd()    :得到当前工作目录,即当前python解释器所在目录路径 impor ...

  5. .NET全栈开发工程师学习路径

    PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...

  6. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

  7. python全栈开发中级班全程笔记（第二模块、第四章（三、re 正则表达式））

    python全栈开发笔记第二模块   第四章 :常用模块(第三部分) 一.正则表达式的作用与方法 正则表达式是什么呢?一个问题带来正则表达式的重要性和作用      有一个需求 : 从文件中读取所有联 ...

  8. 学习笔记之Python全栈开发/人工智能公开课_腾讯课堂

    Python全栈开发/人工智能公开课_腾讯课堂 https://ke.qq.com/course/190378 https://github.com/haoran119/ke.qq.com.pytho ...

  9. python全栈开发学习_内容目录及链接

    python全栈开发学习_day1_计算机五大组成部分及操作系统 python全栈开发学习_day2_语言种类及变量 python全栈开发_day3_数据类型,输入输出及运算符 python全栈开发_ ...

  10. Python全栈开发之路 【第四篇】：Python基础之函数

    本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...

随机推荐

  1. 聊聊如何用 Redis 实现分布式锁？

    作者:小林coding 计算机八股文网站:https://xiaolincoding.com 哈喽,我是小林. 今天跟大家聊聊两个问题: 如何用 Redis 实现分布式锁? Redis 是如何解决集群 ...

  2. DateFormat类的format方法和parse方法

    /** * 使用DateFormat类中的方法format,把日期格式化为文本 * String format(Date date) 按照指定的模式把Date日期格式化为符合模式的字符串 * 使用步骤 ...

  3. Windows高效开发环境配置（一）

    更多精彩内容,欢迎关注公众号:逻魔代码 前言 用了多年的 MacOS 做开发,一系列诸如 Alfred.Item2.Oh-my-zsh 之类的工具,大大地提升了工作的效率和使用舒适度.新工作不给配 M ...

  4. linux 编译式安装apache

    apache的安装需要两个组件,APR对于Tomcat最大的作用就是socket调度 组件下载解压完成 ,讲两个组件解压包移动到apache的类库文件夹内 注:如果系统自带了apr和apr-util可 ...

  5. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...

  6. 常见SQL及备注

  7. 用虚拟机封装win10系统的一些记录

    想用虚拟机封装一个WIN10企业LTSC,期间参考了IT天空小鱼儿的几大步骤一直到手动优化完,后面就自己用系统安装直接备份了一个.gho镜像.期间出过好多毛病,不过总算是成功实现了.注意点: 1.前面 ...

  8. Python-基础学习-第二轮

    目录 数据类型 文件 自调用其他程序 os.system函数 os.startfile 函数 subprocess 模块 线程和进程 创建新线程 共享数据的访问控制 deamon线程 多线程 JSON ...

  9. 使用.NET简单实现一个Redis的高性能克隆版（三）

    译者注 该原文是Ayende Rahien大佬业余自己在使用C# 和 .NET构建一个简单.高性能兼容Redis协议的数据库的经历. 首先这个"Redis"是非常简单的实现,但是他 ...

  10. 解决国内不能访问github的问题

    问题 最近访问GitHub总是不稳定,经常连不上, 出各种错误(OpenSSL SSL_read: Connection was reset, errno 10054, Connection refu ...