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

无序列表是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. 算法竞赛进阶指南0x51 线性DP

    AcWing271. 杨老师的照相排列 思路 这是一个计数的题目,如果乱考虑,肯定会毫无头绪,所以我们从1号到最后一个依次进行安排. 经过反复实验,发现两个规律 每一行的同学必须是从左向右依次连续放置 ...

  2. 【高并发】通过源码深度分析线程池中Worker线程的执行流程

    大家好,我是冰河~~ 在<高并发之--通过ThreadPoolExecutor类的源码深度解析线程池执行任务的核心流程>一文中我们深度分析了线程池执行任务的核心流程,在ThreadPool ...

  3. Python logging日志管理

    import logging logger = logging.getLogger("simple_example") logger.setLevel(logging.DEBUG) ...

  4. Map集合的遍历方式以及TreeMap集合保存自定义对象实现比较的Comparable和Comparator两种方式

    Map集合的特点 1.Map集合中保存的都是键值对,键和值是一一对应的 2.一个映射不能包含重复的值 3.每个键最多只能映射到一个值上 Map接口和Collection接口的不同 Map是双列集合的根 ...

  5. 2021年5月15日海外 Meetup 演讲内容分享

    北京时间 2021 年 5 月 16 日 05:00-08:00 我们与Apache ShardingSphere 联合举办了第一场海外Meetup,感谢各位小伙伴的参与,让本次活动圆满结束. 同时我 ...

  6. WPF中使用System.Windows.Interactivity实现事件绑定的替代方法

    一.问题描述 对于 Button 等控件,在 MVVM 中我们能通过 Command 绑定解决 Click 事件.具体如下所示: <Button Margin="10" He ...

  7. 大家都能看得懂的源码（一）ahooks 整体架构篇

    本文是深入浅出 ahooks 源码系列文章的第一篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 第一篇主要介绍 ahooks 的背景以及整体架构. React h ...

  8. 在 C# 中使用 Span<T> 和 Memory<T> 编写高性能代码

    目录 在 C# 中使用 Span 和 Memory 编写高性能代码 .NET 中支持的内存类型 .NET Core 2.1 中新增的类型 访问连续内存: Span 和 Memory Span 介绍 C ...

  9. linux tcp 在timewait 状态下的报文处理

    最近处理一个问题,我们nginx服务器作为透明代理,将核心网过来的用户上网请求代理到我们的cache服务器,如果cache服务器没有命中内容,则需要我们 作为客户端往源站请求内容,但用户对此一无所知, ...

  10. idea中无法在@Test 之下使用Scanner

    //如何解决idea中无法在 @Test 之下使用Scanner@Testpublic void testInsert(){ Scanner scanner = new Scanner(System. ...