码迷,mamicode.com
首页 > Web开发 > 详细

Web前端学习小建议

时间:2017-02-11 15:56:00      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:平常心   理解   css   no-repeat   cto   学习交流   技能   自己的   背景   

这里跟大家扯一扯学习前端的小方法,是我自己的学习方法,大家凑合看看,倒也不一定对~

在写css前,其实html的结构要是比较合理的,这样写css也会比较顺手。在写一个网页之前,建议先琢磨几分钟,不要上来就写。多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划。可以先把最外层轮廓写好,先不着急去写某一个具体的部分。

这里给大家分享一些css小技巧:

1、使用reset.css
火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。(可以去网上找一下,很多的)

2、CSS缩写
CSS缩写简化了你的CSS代码,更重要的是,它让你的代码更加整洁易懂。
不是像这样创建CSS
.header {

  

  background-image: url(image.gif);

  background-repeat: no-repeat;

  background-position: top left;

 

}

 

而是像这样创建CSS

.header {

  background: #fff url(image.gif) no-repeat top left 

}

3、理解class和id
这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。

4、实用的<li>
< li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。

5、少用<table>多用<div>
CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会 被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用 <table>吧。

6、CSS调试工具
在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:比如FireFox Web Developer、DOM Inspector、Firebug等


7、!Important
所有被!important 标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。


比如上面的例子,因为background-color:blue 被标记为!important ,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改,遗憾的是IE不支持。

牢记以上小技巧,也许你的css技能突然就起飞了呢?关于javascript的一些小技巧,下次我再整理给大家~一次性看太多,大家是不是也有点晕?

学习前端需要方法,更需要一颗平常心,不要把前端想的多难,需要吃什么苦。。。既然学习这么痛苦,为什么不快乐一点学呢?anyway~希望大家可以成为一个优秀的前端er!

 

WEB前端学习交流群21 598399936

 

Web前端学习小建议

标签:平常心   理解   css   no-repeat   cto   学习交流   技能   自己的   背景   

原文地址:http://www.cnblogs.com/luludehuhuan/p/6389201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!