渡一教育《淘宝项目开发笔记三》

渡一教育《淘宝项目开发笔记三》

视频地址:

https://ke.qq.com/course/347602?taid=2574652505673170

可以免费学习

以下代码均使用渡一教育,若有问题可以联系删除。

使用的编辑器:VScode / sublime

今天主要是学习广告区域的布局html+css。
渡一教育《淘宝项目开发笔记三》写代码前,先分析结构:
渡一教育《淘宝项目开发笔记三》①左浮动,②右浮动:①+②就在一行了。
源码①分析:

渡一教育《淘宝项目开发笔记三》

这里强调一下块级元素及行级元素的区别重点:
一、块级标签
1.独占一行,不和其他元素待在同一行
2.能设置宽高
常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd
代码:

我们是p标签

我们是p标签

我们是p标签

在浏览器打开显示。 二、行级标签 1.能和其他元素待在同一行 2.不能设置宽高 常见的行级标签:a,span,strong,u,em--> 代码:hello hello hello 三、行内块标签 1.能和其他元素待在一行 2能设置宽高 常见的行内块标签:img,input,textarea 代码:渡一教育《淘宝项目开发笔记三》渡一教育《淘宝项目开发笔记三》 通过在浏览器浏览,可以比较出两者的异同。 http://www.divcss5.com/html/h29641.shtml 源码②分析:

渡一教育《淘宝项目开发笔记三》

这个环节涉及新的知识点,怪异盒模型,这个在后续开发中运用到的地方很多。
渡一教育《淘宝项目开发笔记三》这里有个技巧:就是在最后一个背景图后面增加一个margin:0是因为前面宽不够用,整个广告下挪了,刚好最后一个标签不需要margin,设置完后整个图片又在一个层面了。
渡一教育《淘宝项目开发笔记三》哈哈好像没有其它要注意的了,怒刷视频,刷一遍根本不够用,我已经刷了三遍了。
渡一教育《淘宝项目开发笔记三》