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

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

视频地址:

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

可以免费学习

今天主要是从布局规划用html的标签进行写代码:

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

使用的编辑器:VScode / sublime

1.创建html文件(主要使用div+css布局)输入html 按tab键:

title网页页眉的标签

link链接的是一长icon格式的图片,请把它放在根目录下(与html文件一个目录下面,考量不同浏览器的兼容性,因为不同浏览器读取的favicon.ico目录不一样,所以放在根目录下直接引用名称就好了,不许号用“/”等符合进行转义)

2.接下来分析框架

①的部分已经完成

头部信息栏位拆分为②+③两个部分

一个符号,一个文字栏位都需要一个表签,所以②有5个标签,③有18个标签。

3.如何实现:①采用左浮动,②采用右浮动(浮动的父级需要取消浮动);一般这种表单采用表单标签<ul>

这里补充一下:图形化文字,如下图这种购物车图形,星星图形,下三角都是图形化的文字。

这是阿里妈妈图形化文字下载的网站https://www.iconfont.cn/ (可以百度搜索一下怎么使用)

以上是html框架内容分析,接下来是css代码分析:

第一:代码引入方式

第二:初始化样式(很重要)根据个人风格来

尽量用到什么标签就针对这些标签进行初始化设置,最好不要通配,考量网页性能。

这个就不做分析了(重点列举几个)。

字体设置:

整体框架缩放设置:

浮动、清除浮动设置。因为后面需要大量用到,所以进行初始化设置

清除浮动三步走:第三步clear:both表示首尾都清除浮动,清除浮动是为了解决margin塌陷的问题。

第三:逐个对标签进行样式修订,只列举知识重点内容如下:

使用伪类触发鼠标移动标签上发生颜色、样式的改变。

哈哈好像没有其它要注意的了,就是多写多看视频。

发布了5 篇原创文章 · 获赞 4 · 访问量 156

猜你喜欢

转载自blog.csdn.net/qq_44152977/article/details/104063652