淘宝首页的HTML以及CSS技术点

1、

一个网页的开发流程

  • 内容结构,比如js、css
  • 页面结构。自上而下,从左往右。(内容、颜色块、间距、边框)

2、

line-height的5种设置方式及区别 normal || 1.5 || 150% || 50px || 5em

初始化元素的时候,一般使用 line-height: 1.5 这种方式,它区别于其它四种方式的

根本原因在于元素继承后的计算方式

比如body初始化为 body{font-size: 14px; line-height: 1.5}

则body里的元素都会这样继承

div{font-size:20px} ——>继承后line-height是 20 x 1.5 = 30px

又比如body初始化为 body{font-size: 14px; line-height: 150% || 5em }

则body里的元素都会继承计算后的行高默认值

div{font-size:20px} ——>继承后,line-height 只会被默认为 14 x 150% = 21px

 

‘\5b8b\4f53’ 万国码,这串数字是转码后的表示,它对应的中文是“宋体”

为什么不使用 font-family:"宋体"呢?因为在全世界,别的浏览器不一定会识别中文,但一定识别Unicode字符。

 

3、

css模块化

@规则

  • @charset 设置样式表的编码
  • @import 导入其它样式文件
  • @media 媒体查询
  • @font-face 自定义字体/图标

 

4、

标签栏上的图标显示

——图标格式的后缀是 favicon.ico 可通过一些线上工具去生成这种格式

——放在网站的根目录,与首页同级

——link 引入,比如<link rel="icon" href="favicon.ico">

——IE在file协议下显示不出来

 

5、

base标签

——定义文档当中所有url的基础目录或链接

——定义文档当中所有target的默认值

——文档只能定义一个base标签

基础链接

基础目录

6、

自定义字体、图标的使用方式

用@font-face引入,可以将图标像字体一样定义

.eot格式只针对IE的,其它浏览器都不认识

.ttf格式是系统文件的格式,特别大,IE9+支持,其它都不支持

.svg一种图形的技术,可修改且不失真,浏览器都支持

format 为了性能的优化,建议不要省略,浏览器会根据它识别是否需要从服务器下载,因为浏览器可能已经有这个格式了

 

——最好用的是阿里的图标库

 

7、

行级元素的回车会被自动解析成一个空格,而空格的间距其实是由父级的font-size决定的,当设置它所在的父级font-size:0时,就没有默认空格的间距了

 

8、

h标签的使用也跟SEO有关系,标签的重要性在seo是有优先级的。

  • title标签 > h1标签(主标题)> h2标签(副标题)> h3标签(板块标题)> h4标签(板块内一级标题)> h5标签(板块内嵌套板块的标题)> h6标签(同h5),一般用到h4就够了
  • 一个页面只要1个h1标签,且h1~h4系列标签都要用上
  • 如果一个页面没有很醒目的标题给h1标签,就把h1给logo,并且以图换字,参考淘宝

 

9、

IE8如何兼容css3的线性渐变?

——滤镜filter

‘#ffff9000’——前两个ff代表透明度

GradientType=1 1代表水平方向,0代表垂直方向

 

10、calc函数 IE9+

 

11、

rgba函数 IE9+

flex弹性布局 IE10+

 

12、

两个边框重叠的1px问题

 

13、

webp格式的图片 谷歌开发 IE不支持 火狐65+

  • 占用空间更小,甚至比其它同类型图片小10倍以上
  • 清晰度却不变
  • 需要JavaScript来解决兼容性问题

 

14、

关于伪元素使用一个冒号,可以兼容IE8,IE8对于伪元素只认识一个冒号,伪类使用两个冒号

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows+Python 3.6环境下安装PyQt4

第一步&#xff1a;下载.whl&#xff0c;地址&#xff1a;https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4&#xff0c;这里可以下载不同的python版本对应的包。 第二步&#xff1a;选择一个目录&#xff0c;将下载好的文件放到该目录下&#xff0c;然后cmd下&#xff0c;c…

[css] sass是怎么定义变量的?

[css] sass是怎么定义变量的&#xff1f; sass变量可以理解为以$变量名为键的键值对&#xff0c;例如$color-black:#000个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面…

Mac book pro M1 安装 Homebrew

前话 各路神仙如果在看到这个文章的时候&#xff0c;已经折腾好久homebrew的安装了&#xff0c;那么&#xff0c;根据我这篇经验分享&#xff0c;如果能顺利安装成功的话&#xff0c;可能会出现一个error&#xff1a; Not a valid ref: refs/remotes/origin/master &#xff0…

洛谷 P4026 [SHOI2008]循环的债务

水水的dp 设f[i][a][b]表示交换完前i种面值的钞票&#xff0c;第一个人有a元&#xff0c;第二个人有b元的最小代价 直接转移就行了 需要注意的是算的式子 第1个人\(\Delta A\)&#xff0c;第二个人\(\Delta B\)&#xff0c;最小交换代价是\((|\Delta A||\Delta B||\Delta A\Del…

[css] 为什么要使用sass/less?

[css] 为什么要使用sass/less&#xff1f; 为了提示开发效率&#xff0c;使得css编写更加灵活个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

Linux命令之sftp - 安全文件传输命令行工具

用途说明 sftp命令可以通过ssh来上传和下载文件&#xff0c;是常用的文件传输工具&#xff0c;它的使用方式与ftp类似&#xff0c;但它使用ssh作为底层传输协议&#xff0c;所以安全性比ftp要好得多。 常用方式 格式&#xff1a;sftp <host> 通过sftp连接<host>&am…

sockjs.js:1609 GET http://192.168.1.119:8080/sockjs-node/info?t=1617976777339 net::ERR_CONNECTION_TI

今天拿到Macbook pro M1芯片 的新机器&#xff0c;迫不及待入坑&#xff0c;配置homebrew的时候&#xff0c;就够我喝好几壶了。 配置完以后赶紧安装好不常用的svn&#xff08;公司使用这个版本管理工具&#xff09;&#xff0c;又赶紧配置好前后端分离的开发的环境&#xff0…

fatal: unable to access ‘https://github.comxxxxxxxxxxx‘: Failed to connect to xxxxxxxxxxxxx

git clone 遇到问题&#xff1a;fatal: unable to access https://github.comxxxxxxxxxxx: Failed to connect to xxxxxxxxxxxxx 将命令行里的http改为git重新执行。

[css] 使用sass的方式有哪些?

[css] 使用sass的方式有哪些&#xff1f; 得编译&#xff0c;有的项目中可以用<style type"sass"> 来使用&#xff08;也得编译&#xff09; 记不清楚是不是了个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定…

oracle修改表字段

create table test1(id number,name varchar2(20) )--修改表字段类型 alter table test1 modify(id varchar2(30),name char(10) default 111 )--追加字段 alter table test1 add(id number primary key )--修改列名 alter table test1 rename column id to id1--删除字段 alte…

[css] 你对伪类了解多少?分为几大类?

[css] 你对伪类了解多少&#xff1f;分为几大类&#xff1f; :hover ::after ::before :nth-child :nth-of-child :first-child :last-child 总结分为两类&#xff1a;页面节点效果操作和获取指定元素选择器 小渣渣一枚&#xff0c;只能写几个出来。个人简介 我是歌谣&#x…

解决 git pull 报错 fatal: refusing to merge unrelated histories

我在Github新建一个仓库&#xff0c;写了License&#xff0c;然后把本地一个写了很久仓库上传。 先pull&#xff0c;因为两个仓库不同&#xff0c;发现refusing to merge unrelated histories&#xff0c;无法pull 因为他们是两个不同的项目&#xff0c;要把两个不同的项目合并…

[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景

[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景 opacity 0: 单纯视觉效果&#xff0c;除了看不见&#xff0c;其他都正常。 visibility: hidden: 可继承也可覆盖。 display: none: 元素不会渲染&#xff0c;不影响布局&#xff0c;不会被c…

[css] 你知道什么是CSS-in-JS吗?说说你对它的了解

[css] 你知道什么是CSS-in-JS吗&#xff1f;说说你对它的了解 有好多种呀&#xff0c;只能列几个我知道的了const styles {color: red, };return <div style{styles} /> // index.module.css .x { color: red }// index.js import styles from ./index.module.css; ret…

[css] 如何让一个块元素绝对居中?

[css] 如何让一个块元素绝对居中&#xff1f; div{ position:fixed; right:0; left:0; bottom:0; top:0; margin: auto auto }个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关…

0065-数方块

题目 数方块难度级别&#xff1a;A&#xff1b; 运行时间限制&#xff1a;1000ms&#xff1b; 运行空间限制&#xff1a;51200KB&#xff1b; 代码长度限制&#xff1a;2000000B 试题描述在墙角堆放着一堆完全相同的正方体小木块&#xff0c;如下图所示&#xff1a; 因为木块堆…

[css] css的user-select:all 有什么用处?

[css] css的user-select:all 有什么用处&#xff1f; none&#xff1a; 文本不能被选择 text&#xff1a; 可以选择文本 all&#xff1a; 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素&#xff0c;那么被选择的部分将是以该子元素向上回溯的最高祖先…

【HNOI2006】鬼谷子的钱袋

本题在洛谷上的链接&#xff1a;https://www.luogu.org/problemnew/solution/P2320 做法和二进制划分很像&#xff0c;&#xff0c;&#xff0c;原来我的二进制划分一直有点问题&#xff08;之前我是枚举2的n次方然后减&#xff0c;逃&#xff09;。。。 我们举20这个例子&…

[css] 说说display:none和visibility:hidden的区别

[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染。 visibility:hidden 隐藏但是dom对象渲染。个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关…

微信网页开发配置步骤

1.微信公众平台—–>开发———>网页账号————>修改授权回调页面域名 2.微信公众平台—–>开发———>基本配置————>获取公众号基本配置信息 3.微信公众平台—–>微信支付——>开发配置———–>修改支付授权目录 4.微信商户平台—–>…