专栏首页前端知识分享第10天:CSS初始化操作

第10天:CSS初始化操作

       在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误差。常用的CSS标签初始化如下:

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; } /*防止拖动*/
img {border:0; vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙*/
table { border-collapse:collapse; }
body {
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff
}
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}/*清除浮动*/
.clearfix{
    *zoom:1;/*IE/7/6*/
}
a{color:#666; text-decoration:none; }
a:hover{color:#C81623;}
h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;font-size:100%;}
s,i,em{font-style:normal;text-decoration:none;}
.col-red{color: #C81623!important;}

/*公共类*/
.w {  /*版心 提取 */
    width: 1210px;margin:0 auto;
}
.fl {
    float:left
}
.fr {
    float:right
}
.al {
    text-align:left
}
.ac {
    text-align:center
}
.ar {
    text-align:right
}
.hide {
    display:none
}

   并不是说每个页面的CSS样式初始化都要这样写,我们可以根据页面需要,设置部分公共样式,在后面写的过程中会方便很多,而且可以避免代码的重复性。
附:
   今天写了个导航,出现了个奇怪的问题,思考了两个小时,到现在都还没解决。明明很简单的代码,看来看去都没有错误,不知道为何效果就是出不来。这个问题我需要时间再思考下,希望在梦中可以想通。今天先到这,晚安。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第59天:缓动动画封装函数

    比如说  console.log(Math.ceil(1.01))       结果 是 2  

    半指温柔乐
  • 第16天:函数的定义和调用

    1、函数,是一种封装。就是将一些语句,封装到函数里面。通过调用的形式,执行这些语句。

    半指温柔乐
  • 第75天:jQuery中DOM操作

    还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。

    半指温柔乐
  • 你的服务器,真的还好吗?

    人们常认为,由于服务器在数据中心锁起来,又由于数据在持续使用,因此不需要加密服务器驱动器,因为数据永远不处于静止状态。

    养码场
  • 华为加班到底有多恐怖?

    “我先说一下我的吧。昨天晚上好不容易11点之前搞完上线回到家,刚开门媳妇就叫到:你TMD给我站到阳台去!”

    哲洛不闹
  • 各省分数线及预测

    又是一年高考季,时光荏苒,岁月如梭,小编高考已经过了好几年了,每个人对高考都有着不同的感受,但这不是这篇文章的重点。

    叫我龙总
  • 腾讯安全发布区块链上半年安全报告,深度剖析区块链安全三大根源问题

    云鼎实验室
  • [NewLife.XCode]数据初始化

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netstandard,由新生命团队(2002~2019)开发完成并维护至今,以下简...

    大石头
  • 翻译qmake文档(三) Creating Project Files

    原英文文档:http://qt-project.org/doc/qt-5/qmake-project-files.html 创建项目文件      项目文件...

    lpxxn
  • Android Camera2详解

    Camera API2是Google从Android5.0开始推出的配合HAL3使用的一套新架构,相比于API1,对应用层开发者而言开放了更多的自主控制权,主要...

    雪月清

扫码关注云+社区

领取腾讯云代金券