网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索

 
 
 
日一二三四五六
       
       
       
       
       
       

签到排名:今日本吧第个签到,

本吧因你更精彩,明天继续来努力!

本吧签到人数:0

一键签到
成为超级会员,使用一键签到
一键签到
本月漏签0次!
0
成为超级会员,赠送8张补签卡
如何使用?
点击日历上漏签日期,即可进行补签。
连续签到:天  累计签到:天
0
超级会员单次开通12个月以上,赠送连续签到卡3张
使用连续签到卡
05月17日漏签0天
web前端制作吧 关注:47贴子:71
  • 看贴

  • 图片

  • 吧主推荐

  • 游戏

  • 10回复贴,共1页
<<返回web前端制作吧
>0< 加载中...

首先爆下自己的样式重置表,欢迎补充和修正

  • 取消只看楼主
  • 收藏

  • 回复
  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
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 {
-webkit-text-size-adjust:none;
font:12px/1.5 Tahoma,Arial,sans-serif
}
h1,h2,h3,h4,h5,h6 {
font-size:100%
}
address,cite,dfn,em,var {
font-style:normal
}
ul,ol,li {
list-style:none
}
a {
text-decoration:none
}
legend {
color:#000
}
fieldset,img {
border:0;
vertical-align:top;
}
section,article,aside,header,footer,nav,dialog,figure {
display:block;
}
figure {
margin:0;
}
button,input,select,textarea {
font-size:100%
}
table {
border-collapse:collapse;
border-spacing:0
}
html {
overflow-y:scroll;
}
.clear {
display:block;
height:0;
overflow:hidden;
clear:both
}
.clearfix:after {
content:'\20';
display:block;
height:0;
clear:both
}
.clearfix {
*zoom:1
}
a:link,a:visited {
text-decoration:none
}
a:hover,a:active {
text-decoration:underline
}
a {
blr:expression_r(this.onFocus=this.blur())
}
a {
outline:none;
}
.none {
display:none;
}
.block {
display:block;
}
.noBg {
background:none !important;
}
.noBd {
border:none !important;
}
.noPd {
padding:0 !important;
}
大家可以复制到编辑器里面看,这里看有点伤眼


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
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}
常用标签重置,和*{margin:0;padding:0;}原理一样!孰优孰劣暂时没有定论,后面文章会有详细解释


2025-05-17 12:57:17
广告
  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
body,button,input,select,textarea{-webkit-text-size-adjust:none;font:12px/1.5 Tahoma,Arial,sans-serif}
规范字体大小,行高与不懂系统下的默认字体,-webkit-text-size-adjust:none兼容谷歌浏览器默认最小12px字体的BUG,不过目前最新版的谷歌这个属性已经没用了,只能通过缩放才控制,但是不建议使用,所以暂时不管吧


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
h1,h2,h3,h4,h5,h6{font-size:100%}
统一标题字体大小,100%按照你body设置字体大小来对待的,上面的body默认12px,所以这些都是12px


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
address,cite,dfn,em,var{font-style:normal}
清除标签的斜体字体,这个可以使用更多标签而无需一个一个重置
ul,ol,li{list-style:none}
清除小圆点,你们懂滴


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
a{text-decoration:none}
清除a的下划线效果,个人觉得好看点,也可以不清除
fieldset,img{border:0;vertical-align:top;}
清除两者的边框属性,和图片在ie6下出现多出三像素空白的bug


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
section,article,aside,header,footer,nav,dialog,figure{display:block;}figure{margin:0;}
html5标签,新手可以不管。。。。因为很多浏览器不识别这些标签,当成自定义标签,所以要转化块级元素


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
button,input,select,textarea{font-size:100%}
重置表单中的字体
table{border-collapse:collapse;border-spacing:0}
添加table属性,以后html写table可以不加这个东西了,不过随着table逐渐淘汰,以后这个可能就不要了
html {overflow-y:scroll;}
去除没有纵向滚动条的bug


2025-05-17 12:51:17
广告
  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
.clear{display:block;height:0;overflow:hidden;clear:both}
.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{*zoom:1}
都是用来清浮动,使用方法不同,个人偏向后者的使用


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
a{blr:expression_r(this.onFocus=this.blur())}a{outline:none;}
去除a链接点击时产生虚线框的bug,其实还可以加area标签,不就前返现area点击也有虚线框....


  • sc520226
  • 华丽飘过
    6
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
暂时补充到这,其他的都是个人习惯,可有可无的,其实我能说我发了这么多是为了吧主么


登录百度账号

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频!
  • 贴吧页面意见反馈
  • 违规贴吧举报反馈通道
  • 贴吧违规信息处理公示
  • 10回复贴,共1页
<<返回web前端制作吧
分享到:
©2025 Baidu贴吧协议|隐私政策|吧主制度|意见反馈|网络谣言警示