前端设计>css>正文
方案一:
/* 清除内外边距 */ 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; } /* 设置默认字体 */ body, button,select,textarea { /* for ie */ /*font: 12px/1 Tahoma,Helvetica,Arial,"宋体",sans-serif;*/ font: 12px/1 Tahoma,"5b8b4f53",sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4,h6 { font-size: 100%; } 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; } /* 重置文本格式元素 */ a { text-decoration: none; } a:hover { text-decoration: underline; } abbr[title],acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ border-bottom: 1px dotted; cursor: help; } q:before,q:after { content: ''; } /* 重置表单元素 */ legend { color: #000; } /* for ie6 */ fieldset,img { border: none; } /* img 搭车:让链接里的 img 无边框 */ /* 注:optgroup 无法扶正 */ button,textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none; height: 1px; }
方案二:
html,body,div,span,applet,object,iframe, h1, a,abbr,acronym,address,big,code, del,img,ins,q,s, small,strike,strong,sub,sup,tt,var, b,u,i,center, dl, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article,aside,canvas,details,embed, figure,figcaption,footer,header,hgroup, menu,nav,output,ruby,section,summary, time,mark,audio,video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol,ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption,td { text-align: left; font-weight: normal; vertical-align: middle; } q,blockquote { quotes: none; } q:before,q:after,blockquote:before,blockquote:after { content: ""; content: none; } a img { border: none; } article,figure,main,menu,summary { display: block; }
方案三
/** 清除内外边距 **/ body,/* text formatting elements 文本格式元素 */ form,fieldset,td /* table elements 表格元素 */ { margin: 0; padding: 0; } /** 设置默认字体 **/ body,textarea /* for ie */ { font: 14px/1.5 tahoma,5b8b4f53,sans-serif; } h1,h6 { font-size: 100%; font-weight: normal;} address,samp { font-family: courier new,courier,monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /** 重置列表元素 **/ 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; } /* for ie6 */ fieldset,img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ button,textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ /* 注:optgroup 无法扶正 */ /** 重置表格元素 **/ table { border-collapse: collapse; border-spacing: 0; } /* 重置 HTML5 元素 */ article, summary,time,video { display: block; margin: 0; padding: 0; } mark { background: #ff0; }
本文链接:https://www.weguiding.com/css/215.html
- 上一篇:网页字体样式选择调整
- 下一篇:CSS样式:背景属性、文本属性
猜你喜欢
- 19-06-12 文章内容页图片显示优化居中处理
- 19-05-30 CSS3水纹效果的示例代码
- 19-05-20 手机站做自适应页面要注意的问题
- 19-05-18 纯css实现导航处hot小图标实现
- 19-01-27 纯html+css的下拉导航动画效果
- 19-01-24 DIV边框样式控制设置
- 19-01-24 块元素水平垂直居中(CSS控制)
- 19-01-24 CSS基本语法
- 19-01-24 html去除表格边框空隙
- 01-24html去除表格边框空隙
- 01-24CSS样式:字体、表格
- 01-24屏蔽网页元素内联样式,提高外联优先级
- 06-12文章内容页图片显示优化居中处理
- 01-27纯html+css的下拉导航动画效果
- 01-24网页字体样式选择调整
- 01-24文章内容页图片显示优化,图片居中处理
- 05-30CSS3水纹效果的示例代码
- 05-20手机站做自适应页面要注意的问题
- 05-18纯css实现导航处hot小图标实现
- 01-27纯html+css的下拉导航动画效果
- 01-24DIV边框样式控制设置
- 01-24块元素水平垂直居中(CSS控制)
- 01-24CSS基本语法