请选择 进入手机版 | 继续访问电脑版

CSS通用样式

[复制链接]
八步半的房间 发表于 2021-1-2 18:59:01 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
1、新建一个reset.css文件,代码如下: 

  1. @charset "utf-8";/* CSS Document *//*Reset*/*{box-sizing:content-box;}body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单位素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; }html,body{ width:100%; height:100%; color:#6e6e6e; font-family:'微软雅黑'}/* 设置默认字体 */body, button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/font: 14px/1 Tahoma, Helvetica, Arial, "微软雅黑", sans-serif,; /* 用 ascii 字符表现,使得在任何编码下都无问题 */  }h1 { font-size: 18px; /* 18px / 12px = 1.5 */  font-family:'微软雅黑'}h2 { font-size: 24px; font-weight:normal; color:#323232; font-family:'微软雅黑'}h3 { font-size: 14px; font-weight:normal; font-family:'微软雅黑' }h4, h5, h6 { font-size: 100%; font-weight:normal; font-family:'微软雅黑' }p{ font-size:14px; line-height:34px; font-family:'微软雅黑'}/* 段落默认字号和行高 */address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 *//* 重置列表元素 */ul, ol { list-style: none; font-family:'微软雅黑' }select{ border-style:none;}/* 重置文本格式元素 */a { text-decoration: none; color:#6e6e6e; font-size:44px; outline:none; font-family:'微软雅黑'}span{ font-size:14px; font-family:'微软雅黑'}a:hover { text-decoration: none; }abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ border-bottom: 1px dotted; cursor: help; }q:before, q:after { content: ''; }/* 重置表单位素 */input{ border:none;}legend { color: #000; } /* for ie6 */fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 *//* 注:optgroup 无法扶正 */button, input, select, textarea { font-size: 100%; /* 使得表单位素在 ie 下能继承字体巨细 */ }/* 重置表格元素 */table { border-collapse: collapse; border-spacing: 0; width:100%;}/* 重置 hr */hr { border: none; height: 1px; }/* 让非ie欣赏器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */html { overflow-y: scroll;}*:focus {outline: none;} /* 版心 */.w100{ width:100%; /*min-width:1080px;*/ clear:both;}.w1200{ width:1200px; margin:0 auto;}.w1300{ width:1300px; margin:0 auto;}.w1000{ width:1000px; margin:0 auto;}.w1080{ width:1080px; margin:0 auto;}/*常用样式*/.fl{ float:left;}.fr{ float:right;}.tc{ text-align:center;}.tr{ text-align:right;}.tl{ text-align:left;}.f12{ font-size:12px;}.f14{ font-size:14px;}.f15{ font-size:15px;}.f16{ font-size:16px;}.f18{ font-size:18px;}.f20{ font-size:20px;}.f22{ font-size:22px;}.f24{ font-size:24px;}.f36{ font-size:36px;}.f30{ font-size:30px;}.f32{ font-size:32px;}.lh24{ line-height:24px;}.lh32{ line-height:32px;}.lh36{ line-height:36px;}.mt14{ margin-top:14px;} .mt20{ margin-top:20px;}.t2{ text-indent:2em;}.t_ul{ text-decoration:underline;}.blue{ color:#0568a4;}.blue_ul{ color:#0568a4; font-size:16px; text-decoration:underline;}.red{ color:#e20000; font-size:14px;}.ma{ margin:0 auto;}select {  /*Chrome和Firefox内里的边框是不一样的,所以复写了一下*/  border: solid 1px #f8f9fb;  /*很关键:将默认的select选择框样式清除*/  appearance:none;  -moz-appearance:none;  -webkit-appearance:none;  /*在选择框的最右侧中间显示小箭头图片*/  background:url(../images/arrawDown.png) no-repeat scroll 90% center;  /*为下拉小箭头留出一点位置,制止被文字覆盖*/  padding-right: 14px;}/* 重置文本格式元素 */.mt_userMessage select{ background:url(../images/arrawDown02.png) no-repeat scroll right center;}/*界说滚动条高宽及配景 高宽分别对应横竖滚动条的尺寸*/  ::-webkit-scrollbar  {      width: 6px;      height: 6px;      background-color: #F5F5F5;  }    /*界说滚动条轨道 内阴影+圆角*/  ::-webkit-scrollbar-track  {      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);      border-radius: 10px;      background-color: #F5F5F5;  }    /*界说滑块 内阴影+圆角*/  ::-webkit-scrollbar-thumb  {      border-radius: 10px;      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);      background-color: #ccc;  }
复制代码
2、在页面上使用外部样式调用:

[code][/code]  

来源:https://blog.csdn.net/qq15577969/article/details/112007025
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )