PHP全栈开发(四): HTML 学习(2. div 布局)
无序列表,有序列表,自定义列表
无序列表是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 布局)的更多相关文章
- Python 全栈开发四 python基础 函数
一.函数的基本语法和特性 函数的定义 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的.函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数 ...
- python全栈开发_day15_模块学习
一:模块 1)什么是模块 每一个py文件就是一个模块 导入模块,会编译执行 1.形成一个对应的pyc文件 2.产生该模块自己的店全局名称空间 3.在使用该模块的全局名称空间中产生一个名字(导入的模块名 ...
- Python全栈开发——Linux命令学习
Linux -- 一切皆文件 pwd: 查看当前所在目录 '/' :根目录 cd : 切换目录 eg.cd / 切换到根目录 ls:查看当前根目录下有几块盘.几个文件 ls -l:查看详细信 ...
- python全栈开发中级班全程笔记(第二模块、第四章)(常用模块导入)
python全栈开发笔记第二模块 第四章 :常用模块(第二部分) 一.os 模块的 详解 1.os.getcwd() :得到当前工作目录,即当前python解释器所在目录路径 impor ...
- .NET全栈开发工程师学习路径
PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
- python全栈开发中级班全程笔记(第二模块、第四章(三、re 正则表达式))
python全栈开发笔记第二模块 第四章 :常用模块(第三部分) 一.正则表达式的作用与方法 正则表达式是什么呢?一个问题带来正则表达式的重要性和作用 有一个需求 : 从文件中读取所有联 ...
- 学习笔记之Python全栈开发/人工智能公开课_腾讯课堂
Python全栈开发/人工智能公开课_腾讯课堂 https://ke.qq.com/course/190378 https://github.com/haoran119/ke.qq.com.pytho ...
- python全栈开发学习_内容目录及链接
python全栈开发学习_day1_计算机五大组成部分及操作系统 python全栈开发学习_day2_语言种类及变量 python全栈开发_day3_数据类型,输入输出及运算符 python全栈开发_ ...
- Python全栈开发之路 【第四篇】:Python基础之函数
本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...
随机推荐
- reduce累加实现
与map端的模式类似,map端要重写Mapper方法,reduce端也要重写Reduce方法,这里有一个泛型,我们先看参数类型 分别对应输入keyin,valuein,keyout,valueout. ...
- YII缓存操作
//文件依赖 $dependency = new \yii\caching\FileDependency(['filename'=>'hw.txt'])}; $cache->add(&qu ...
- GreatSQL重磅特性,InnoDB并行并行查询优化测试
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 1 ...
- HC32L110 系列 M0 MCU 的介绍和Win10下DAP-Link, ST-Link, J-Link的烧录
HC32L110 系列 Cortex M0 MCU Hackaday 在三月份的时候介绍了一款最小的MCU NEW PART DAY: SMALLEST ARM MCU UPROOTS COMPETI ...
- virtual box 安装虚拟机如何全屏
最近由于要进行微信小程序的开发.可恶的腾讯狗没有提供linux版的开发工具!不得以安装虚拟机!暗号虚拟机后发现win10的界面实在是太小,于是乎去解决这个问题!其实很简单,一般来是说直接点虚拟机面板上 ...
- UOJ#XX A+B Problem (罔烙硫)
题面 背景 题目描述 从前有个 n n n 个方格排成一行,从左至右依此编号为 1 , 2 , ⋯ , n 1,2,⋯,n 1,2,⋯,n. 有一天思考熊想给这 n n n 个方格染上黑白两色. 第 ...
- 【BZOJ2658】[Zjoi2012]小蓝的好友(mrx) (扫描线,平衡树,模拟)
题面 终于到达了这次选拔赛的最后一题,想必你已经厌倦了小蓝和小白的故事,为了回馈各位比赛选手,此题的主角是贯穿这次比赛的关键人物--小蓝的好友. 在帮小蓝确定了旅游路线后,小蓝的好友也不会浪费这个难得 ...
- Usmjeri(COCI2017.2)题解
题意 给一棵N个节点的树,编号从1到N,再给定m对点(u,v),你要将树上的每条无向边变为有向边,使得给定的点对都满足u能到达v或v能到达u.问有多少种不同的方案,答案对(1e9+7)求余. 1 ≤ ...
- 试用 ModVB(一):安装教程+使用 JSON 常量和 JSON 模式匹配
前排提醒:阅读此文章并充分尝试 ModVB 的新语法需要较长的时间.对于程序员而言,如果你工作时不用 VB,则最好避免在上班时间看,以免被领导认为你在长时间摸鱼. 什么是 ModVB ModVB 是一 ...
- 面试突击78:@Autowired 和 @Resource 有什么区别?
@Autowired 和 @Resource 都是 Spring/Spring Boot 项目中,用来进行依赖注入的注解.它们都提供了将依赖对象注入到当前对象的功能,但二者却有众多不同,并且这也是常见 ...