Web前端学习小建议

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

在写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

时间: 2024-10-10 14:08:11

Web前端学习小建议的相关文章

【web前端学习部落22群】分享 碰撞的小球开源小案例

对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家答疑解惑呢! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>碰撞的小球</title> <style type="text/cs

2018年web前端学习路线图,WEB前端开发新手学习路线

前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握,下面给大家一份详细的表单: html的语法.格局,常用的标签极端作用,了解标签的嵌套.学习运用firefox+firebug或许chrom的调试工具,可以运用这些工具调试html.css.js.断点调试.抓包 怎么引入css.js.了解id.class属性的区别,学会css的常用选择器,了解盒子模型(padding,margin,b

好程序员web前端学习路线分享函数基础

好程序员web前端学习路线分享函数基础,在这之前先来讲一下函数是什么? 函数就一个代码块,可以是一个完全独立与其它内容没有关系的代码块,也可以是一个与外界环境紧密相关的代码块.函数是一个拥有输入和输出的独立代码块.函数是程序中最重要的组成部分. 函数,是一种封装(将一些语句,封装到函数里面).通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行. 在javascript里,函数即对象,程序可以随意操控它们.函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所处的作用域中的

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

2019年史上最全面的web前端学习教程!

要想成为一个优秀的前端工程师,肯定是要有一份良好的学习教程! 先给大家看看一个年薪30的前端程序员该学习哪些? 好的web前端年薪会有多少?一定要看到最后 不少前辈高人们放出了自己的工资截图,也有新人出来表示瞻仰.高的4,50w往上走都有(更高的个例也不是没有),低的实习小几千的也不少,最后总结了一下,其实可以凝聚为两个词--"技术"和"经验". 其实这个不难明白,企业的最终目的就是为了盈利.人家给你开那么多的工资必然是因为你能够给公司创造更大的价值.那问题就来了

好程序员web前端学习路线分享css模块化方案

好程序员web前端学习路线分享css模块化方案,这篇文章主要介绍了css模块化方案,css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案,非常具有实用价值,需要的小伙伴可以参考下. css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案.oocss面对对象的规则,主要的原则是两种:分离结构和外观,分离容器和内容.名词解释1.分离结构和外观:增加可重复的设计单元,同时去推进产品和ui对这方面的思考,比如下面的css使用时对象模式的命名和模块化规则.2.分离容器和内容:

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

立方体旋转 【web前端学习部落22群120342833】

效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- //舞台元素,设置perspective,让其子元素获得透视效果. --> <div class="container">    <!-- //容器,设置transform-style: preserve-3d,让其子元素在3D空间呈现 --> <div c