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

无序列表是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. .net core3.1 abp学习开始（一）

    vs版本 2019,链接数据库使用Navicat,数据库MySql abp的官网:https://aspnetboilerplate.com/,我们去Download这里下载一个模板,需要选好Targ ...

  2. vue项目导航菜单实现

    vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, ind ...

  3. Python3利用Twilio(国际)以及腾讯云服务(国内)免费发送手机短信

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_152 短信服务验证服务已经不是什么新鲜事了,但是免费的手机短信服务却不多见,本次利用Python3.0基于Twilio和腾讯云服务 ...

  4. How to code like a pro in 2022 and avoid If-Else

    在浏览文章的时候发现了一篇叙述有关if-else语句的文章,这篇文章作者是Thai Tran,他原文是用英语写的,然后看着文章浅显易懂,便尝试翻译成汉语.如有不妥还望指出. 原文链接:https:// ...

  5. Scala中使用 Jackson API 进行JSON序列化和反序列化

    1.  什么是 Json 序列化 和 反序列化 序列化 => 将 Java对象 转换成 json字符串反序列化 => 将 json字符串 转换成 Java对象 2. 依赖包 说明 < ...

  6. Luogu2455 [SDOI2006]线性方程组 （高斯消元）

    模板特殊情况没exit(0) $\longrightarrow$60 了一下午 //#include <iostream> #include <cstdio> #include ...

  7. Elasticsearch-Kibana-学习笔记

    1.背景 1.1 简介 Elasticsearch 是一个分布式.高扩展.高实时的搜索与数据分析引擎.它能很方便的使大量数据具有搜索.分析和探索的能力.充分利用Elasticsearch的水平伸缩性, ...

  8. nmtui 字符界面图形模式配置

    一.通过nmtui配置网络参数 Linux系统配置网络参数的方式有很多种,其中最简单最直接的方式就是直接修改网卡配置文件,但这种方式也很容易出错,比如说IPADDR.NETMASK.GATEWAY等参 ...

  9. java学习第一天.day05

    jvm的内存 栈:类方法使用后自动销毁,销毁的好处是释放内存 java方法执行时,在栈区执行 堆: 线程共享的一块内存区域      所有的对象实例以及 数组 都要在堆上分配      每次使用new ...

  10. 面试突击77：Spring 依赖注入有几种？各有什么优缺点？

    IoC 和 DI 是 Spring 中最重要的两个概念,其中 IoC(Inversion of Control)为控制反转的思想,而 DI(Dependency Injection)依赖注入为其(Io ...