关于CSS中一些常用，但又容易忘记的代码

CSS

发布日期: 2021-02-14

文章字数: 1.5k

一些常用的head标签内部

.meta标签常用

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

这是一段移动端必备的一段代码。

<meta name="Description" content="HTML是最好的语言"/>

长尾关键词，这是做SEO必需的一段代码

<meta name="Keywords" content=""/>

关键词，这也是做SEO必需的一段代码，不过近期百度收录的改动，渐渐的这段代码已经失去了他原本的意义，但是也是非常有用的。

<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">

Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；转自环球网校edu24ol.com转自环球网校edu24ol.com转自环球网校edu24ol.com
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

<meta name="format-detection" content="telephone=no"/>

ios版阻止默认数字识别为手机可将telephone=no，则手机号码不被显示为拨号链接

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

<meta content="email=no" name="format-detection" />

修改默认IOS 把@识别成邮箱。

以上一些就是目前一些常用的Meta 类似一些utf-8 这些编码规范的代码。在此就不做多说了，每一个做前端工作的人员，学习的第一步， UTF-8

一些容易忘记的css样式

格式化css默认样式

腾讯QQ官网样式初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
      body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
      a{color:#2d374b;text-decoration:none} 
      a:hover{color:#cd0200;text-decoration:underline} 
      em{font-style:normal} 
      li{list-style:none} 
      img{border:0;vertical-align:middle} 
      table{border-collapse:collapse;border-spacing:0} 
      p{word-wrap:break-word}

新浪官网样式初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}  
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;}  
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝官网样式初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

网易官网样式初始化

html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

个人建议，集合他们所长，和你项目的需求来修改自己的初始化代码。毕竟需求不同样式不同

关于input 去除焦点，边框 outline: none;
li标签去除默认样式 list-style-type:none;
背景图片固定 background-attachment：fixed （网页滚动时，背景图片相对于浏览器的窗口而言，固定不动）
background-attachment: scroll （网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动）
text-indent：缩进距离
cursor：鼠标形状参数
- style=”cursor:hand” 　　　　　手形
- style=”cursor:crosshair” 　　十字形
- style=”cursor:text” 　　　　　文本形
- style=”cursor:wait” 　　　　　沙漏形
- style=”cursor:move” 　　　　十字箭头形：
  - style=”cursor:help” 　　　　　问号形
- style=”cursor:e-resize” 　　　右箭头形
- style=”cursor:n-resize” 　　　上箭头形
- style=”cursor:nw-resize” 　　左上箭头形
- style=”cursor:w-resize” 　　　左箭头形
- style=”cursor:s-resize” 　　　下箭头形
- style=”cursor:se-resize” 　　右下箭头形
- style=”cursor:sw-resize” 　　左下箭头形
- 还有一些不是特别常用的句不列举了，
letter-spacing 来设置字与字间距_字符间距离，字体间距css样式（汉字用）
word-spacing来设置字体间距，字体间距css样式（英文用）
清除浮动
- 在浮动的元素最后添加同级元素这是 clear：both属性
- 给父元素这是宽高
- 给父元素设置 overflow:hidden
- 最常用的三种方法。（记得一定要清除浮动，不然你的页面就会出BUG）