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

无序列表是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. SQLServer从入门基础

    1.数据库管理工具 工具创建数据库 1>登录数据库管理工具[Microsoft SQL Server Management Studio] 2>右键[新建数据库] 3>数据数据库名称 ...

  2. linux nginx启用php

    cd /usr/local/php/etc mv php-fpm.conf.default php-fpm.conf vi /usr/local/nginx/conf/nginx.conf # 删除如 ...

  3. wamp升级php

    1.  停止WAMP服务器. 2.  去网站windows.php.net 下载php-5.4.31-nts-Win32-VC9-x86.zip(32位的). 不要下载THE INSTALLER. 3 ...

  4. C#中引用类型的变量做为参数在方法调用时加不加 ref 关键字的不同之处

    ​ 一直以为对于引用类型做为参数在方法调用时加不加 ref 关键字是没有区别的.但是今天一调试踪了一下变量内存情况才发现大有不同. 直接上代码,结论是:以下代码是使用了 ref 关键字的版本.它输出1 ...

  5. Prometheus+Grafana+钉钉部署一个单机的MySQL监控告警系统

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 目录 一.Prometheus 二.exporter ...

  6. Linux系列之链接

    前言 在类Unix系统中,一个文件有可能被多个名字引用.我们使用链接来实现这一点,链接共有两种类型:硬链接和软链接,本文分别来介绍它们. 硬链接 硬链接也允许指向文件,但与符号链接的方式不同.它们是U ...

  7. PerfView专题 (第三篇)：如何寻找 C# 中的 VirtualAlloc 内存泄漏

    一:背景 上一篇我们聊到了如何用 PerfView 去侦察 NTHeap 的内存泄漏,这种内存泄漏往往是用 C 的 malloc 或者 C++ 的 new 分配而不释放所造成的,这一篇我们来聊一下由 ...

  8. Linux 05 口令字文件

    参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 概述 由于 /e ...

  9. 关于linux的一点好奇心（四）：tail -f文件跟踪实现

    关于文件跟踪,我们有很多的实际场景,比如查看某个系统日志的输出,当有变化时立即体现,以便进行问题排查:比如查看文件结尾的内容是啥,总之是刚需了. 1. 自己实现的文件跟踪 我们平时做功能开发时,也会遇 ...

  10. identity4 系列————持久化配置篇[五]

    前言 上面已经介绍了3个例子了,并且介绍了如何去使用identity. 但是在前面的例子中,我们使用的都是在内存中操作,那么正式上线可能需要持久到数据库中. 这里值得说明的是,并不一定一定要持久化到数 ...