• CSS重置默认样式reset.css代码模板


    由于各大浏览器存在兼容性问题,同一个css属性在不同浏览器下的表现不一定相同,有经验的前端设计者都会自定义一个重置浏览器样式的css文件,在这个文件中定义一些针对不同的浏览器最终表现出一致的代码,大家最熟悉的也许就是* {margin:0 0}了,其实这是最简单的兼容性的代码,一般情况下,仅有这个是不够的,因此笔者收集了几个前端设计网站使用的reset.css代码模板,如果需要你可以复制这些代码保存为reset.css文件,然后引用在所需的html文件中即可。

    注意:您可以根据您自己的实际情况去修改代码中选择器的定义,如果确定用不上代码中对某些选择器的定义,可以删除掉。

    CSS重置浏览器样式代码一:  

    body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form {
    	margin: 0;
    	padding: 0;
    }
    body {
    	font-family: Arial,"微软雅黑";
    	font-size: 12px;
    	color: #434343;
    }
    .clear {
    	clear: both;
    	font-size: 0px;
    }
    ul,li {
    	list-style: none;
    }
    img {
    	border: none;
    }
    /*一般链接*/
    a {
    	text-decoration: none;
    	color: #555;
    }
    a: hover {
    	color: #3366ff;
    }

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    CSS重置浏览器代码二:  

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; font-size: 100%; font: inherit; -webkit-text-size-adjust: none; }
    body { line-height: 1; }
    table { border-collapse: collapse; border-spacing: 0; }
    object, :focus { outline: none; }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section /* HTML 5 */ { display: block; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ‘‘; content: none; }
    a img { border: none; }
    input,button,textarea,select,optgroup,option{ font-size: 100%; font: inherit; }
    .al { text-align: left; }
    .ar { text-align: right; }
    .ac { text-align: center; }
    .lc { margin: 0 auto; }
    .fl, .il .fl { float: left; }
    .fr, .il .fr { float: right; }
    .fc, .il .fc { float: none; clear: both; }
    .rel { position: relative; }
    .abs { position: absolute; }
    .il { list-style: none; }
    .il li { float: left; }

     

    CSS重置浏览器代码三:来自Eric Meyer网站:  

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    }
    : focus {
    	outline: 0;
    }
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    }
    ol, ul {
    	list-style: none;
    }
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
    blockquote: before, blockquote: after,
    q: before, q: after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" "";
    }
  • 相关阅读:
    android应用中增加权限判断
    android接收短信——framework处理流程(android 5.1)
    Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
    Java 集合系列02之 Collection架构
    Java 集合系列01之 总体框架
    远离职场中的舒适区
    中国式父母,到底缺少些什么?
    孙悟空:越风光,越可怜
    Android学习—RecyclerView的使用(2)
    Android学习—RecyclerView的使用(1)
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13808612.html
Copyright © 2020-2023  润新知