总结京东、天猫、王者荣耀PC端网站的CSS源码的初始化

文章目录

1.京东
2.天猫
3.王者荣耀
4.总结

为什么需要CSS初始化？
不同的浏览器对有些标签的默认值是不同的，为了消除浏览器对HTML文本呈现的差异，考虑到浏览器的兼容性，我们需对
CSS进行初始化，让一些标签在任何浏览器都是使用CSS初始化的值而不是默认值。即重新设置浏览器的样式。
每个网页都必须先进行CSS初始化

注意：所有代码解释都标记在代码中

1.京东

下面这段代码就是京东商城的CSS初始化

/* 最常见，所有标签内外边距设为0*/* {margin: 0;padding: 0;}/* 这两个是斜体标签，让字体不倾斜显示*/em,i {font-style: normal;}/* 清除li标签前面的圆点或其它显示符*/li {list-style: none;}/*解决图片下面空白缝隙以及去除边框bug*/img {border: 0;vertical-align: middle;}/*所有按钮指针样式为pointer*/button {cursor: pointer;}/*链接下面没有下划线*/a {color: #666;text-decoration: none;}a:hover {color: #c81623;}/*指定button，input的字体*/button,input {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53", sans-serif;}body {-webkit-font-smoothing: antialiased;/*CSS3新属性，减少字体放大时的巨齿形状*/background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53", sans-serif;color: #666;}/*给标签添加这两个类名，使得元素不显示 不保留原来位置*/.hide,.none {display: none;}/*浮动布局，清除浮动*/.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;}/*也是清除浮动，只不过是IE浏览器的清除浮动*/.clearfix {*zoom: 1;}

2.天猫

 /* 这段代码显得累赘，更好的做法是直接用“*”匹配所有标签,但是这样做有它的道理吧*/body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin: 0;padding: 0;}/*为这些标签设置字体、以及为溢出元素添加滚动条。*/body,button,input,select,textarea {font: 12px/1.5 tahoma, arial, "\5b8b\4f53";-ms-overflow-style: scrollbar;      /* CSS3新属性*/}/*给这些标签的字体大小设置默认大小*/button,h1,h2,h3,h4,h5,h6,input,select,textarea {font-size: 100%;}/*设置正常字体*/address,cite,dfn,em,var {font-style: normal;}code,kbd,pre,samp {font-family: courier new, courier, monospace;}small {font-size: 12px;}/*清除有序、无序列表样式，即所有li都没有了前面的小圆点或其它修饰符*/ol,ul {list-style: none;}/*清除链接下划线*/a {text-decoration: none;}#site-nav .menu-bd a:active,#site-nav .menu-bd a:hover,#site-nav a.sn-msg-title:active,#site-nav a.sn-msg-title:hover,a:hover {text-decoration: underline;}sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}legend {color: #000;}/*当在例如<a>标签中包裹一张图片时，图片默认会加上边框，这样即可以清除边框*/fieldset,img {border: 0;}/*为表格设置单元格边距合并*/table {border-collapse: collapse;border-spacing: 0;}

3.王者荣耀

 body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form {margin: 0;}h1,h2,h3,h4,h5,h6 {font-size: 100%;}em,i,b {font-style: normal;}ul,ol {list-style: none;}a {text-decoration: none;color: #363636;}a:hover {text-decoration: none;}img {display: block;border: 0;border-radius: 2px 2px 2px 2px;}/*当我们点击这些标签时，会显示一个外轮廓，这里是清除外轮廓*/button,input,select,textarea {font-size: 100%;outline: none;}/*当我们没有给输入栏添加这个属性时，用户可以直接用鼠标放大缩小我们的输入栏，这里是固定输入栏大小，防止放大缩小*/textarea {resize: none;}/*同样是设置表格单元格边框合并*/table {border-collapse: collapse;border-spacing: 0;}td,th,ul,ol {padding: 0;}/*cite默认是斜体字体，这里使之正常显示*/cite {font-style: normal;}/*清除浮动*/.clearfix {zoom: 1;}.clearfix:after {content: "\20";display: block;height: 0;line-height: 0;visibility: hidden;clear: both;}

4.总结

几乎所有网站都会使用的，那我们为什么不归纳起来，以后我们写代码时，来个条件反射也就直接想到了呢。

1.清除内外边距

 * {margin: 0;padding: 0;}

2.标签字体默认为斜体，使字体正常显示

 address,cite,dfn,em,var ，em,i {font-style: normal;}

3.图片标签不带有边框、解决图片下面空白缝隙bug

  img{border: 0;vertical-align: middle;}

4.链接标签不带下划线

 a {text-decoration: none;}

5.li标签前面不带修饰

 ol,ul {list-style: none;}

6.浮动布局，清除浮动，防止影响下面的布局

 .clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;}/*也是清除浮动，只不过是IE浏览器的清除浮动*/.clearfix {*zoom: 1;}

7.表格单元格边框合并

 table {border-collapse: collapse;border-spacing: 0;}

8.清除自带外轮廓

 button,input,select,textarea {font-size: 100%;outline: none;}

9.防止文本框被任意缩小放大

 textarea {resize: none;}

总结京东、天猫、王者荣耀PC端网站的CSS源码的初始化相关推荐

王者荣耀战力查询小程序源码下载-支持安卓ios微信和QQ战力查询支持打包成APP
王者荣耀战力查询小程序源码下载-支持安卓ios微信和QQ战力查询支持打包成APP 该源码没有后台的也无需后台的,所以也就没有什么服务器和域名的烦恼和费用了使用方法用HBuilder X软件打开文件然 ...
按头安利好看又实用的端游源码 PC端客户端电脑游戏源码素材看这里
想必大家都在为找端游源码 PC端客户端电脑游戏源码而头疼吧,今天小编都为大家整理好咯,上资源的端游源码 PC端客户端电脑游戏源码,大家喜欢的可以先行收藏哈,之后会持续更新哒~ 在找寻资源的时候 ...
获取PC端微信小程序源码
获取PC端微信小程序源码参考文章链接链接1 链接2 准备工具解密工具 UnpackMiniApp.exe 下载链接逆向工具 wxappUnpacker 下载链接1 下载链接2 整体流程第 1 ...
王者荣耀改名神器微信小程序源码下载
这是一款王者改名小程序支持重复名改名支持空白名改名另外也支持特殊符合随机生成改名等等另外该小程序还有更多,支持推荐其它小程序形成一个轮廓另外该小程序成本比较低,无需服务器无需域名即可上线因 ...
【Python】基于人脸识别的智能考勤系统（Pyqt5+MySQL+Opencv） [PC端部分-已附源码]
[Python]基于人脸识别的考勤系统 [PC端部分] 一.项目简介本项目编程语言Python3.6,编程工具pycharm,其他工具QT Designer.Navicat,表单信息保存在本地MyS ...
python爬虫爬取王者荣耀官网全部英雄头像(源码分享)
这篇文章为源码分享,爬虫的分析过程请阅读文章 <用python爬取王者荣耀官网的英雄皮肤海报(含源码)> 源码 import requests import json from bs4 i ...
JAVA根据营地号获取王者荣耀数据（王者荣耀战绩及王者荣耀对局详情查询）网页源码下载
目录营地号查询战绩查询对局详情查询下载营地号查询根据营地号获取王者荣耀战绩.皮肤.英雄数据可提接口测试战绩查询对局详情查询下载网页源码
python爬虫爬取王者荣耀官网全部装备图片(源码分享)
这篇文章为源码分享,爬虫的分析过程请阅读文章 <用python爬取王者荣耀官网的英雄皮肤海报(含源码)> 源码 import requests from bs4 import Beauti ...
微信测试号实现个人第三方PC端网站二维码登录
这里只提及微信二维码登录PC网站的实现方面,对于微信测试号如何申请,如何授权,本篇博客不去讲解. 测试号申请:http://mp.weixin.qq.com/debug/cgi-bin/sandbox ...