前端程序员不会写css

A. 前端程序员怎么自学

自学方法：

1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。

2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。

3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。

4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。

自学路线：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：javaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与php/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

基础书籍：

1、《Head First HTML与CSS(第2版)》，入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。

2、《CSS权威指南(第三版)》，这本书作为 CSS 的经典着作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。

3、《CSS揭秘》神书，47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了，css 进阶必备。

4、《javascript语言精粹》，这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书。

5、《JavaScript DOM编程艺术(第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。

6、《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。

视频教程:

网页链接

B. 前端怎样克服厌恶写 CSS 的心理

学计算机好几年了，正式从事前端工作1年有余，也有一段时间非常抵触，一看要改、写css样式就非常的烦。这种状态来工作肯定不行……就做了一些调整，现在的状态还可以，反正是调整过来了。分享下我个人的方法。
1.根据前辈的分享，整理出一套通用样式表，字体、颜色、按钮等通用样式，每次开发新页面拿来直接用，简化过程，感觉上会轻松些，我的是在bootstrap的基础上整理的，因为经常用那个框架。
2.提升视觉效果，换了个编辑软件，安装打字效果特别炫的插件，代码看起来也非常漂亮、舒服，敲代码时的感觉就很棒。
3.和楼上说的差不多吧，我看了一些大型网站上炫酷的css，临摹了一些demo出来，变相的提升成就感，那些炫酷新颖的效果也能增加自己的兴趣。

以上，个人的一点点经验，希望对你有帮助。

C. 一个合格的web前端需要会什么

1. div和table

这个是最简单的，也是最基础的。要熟练掌握div、form table、ul li 、p、span、font这些标签，这些都是最常用的，特别是div和table，div用于布局、table也可以用于布局，但是不灵活，基本 table是用来和数据打交道。

2.html

HTML是指超文本标签语言，是目前web领域应用广泛的语言，我们只需要在html文档中插入对应的标签，即可实现web页面的编写与排列，所以要熟练掌握HTML基本知识，包括每个标签的用法等。

3. CSS

CSS指层叠样式表，可以为HTML标签自定义样式，通过设置HTML标签的样式，来改变其外形，达到美化与排版web页面的目的。

4.Javascript

Javascript是网页脚本语言，它可以在html中运行，设置并修改浏览器中的各种对象与变量。例如用来改进设计、验证表单、检测浏览器、创建 cookies等等，现在各大网站都可以看见 Javascript的踪影，常见的网站首页大眼晴、警告提示框、页面动画效果等等。Javascript更是一种在客户端广泛使用的脚步语言，在 Javascript当中提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等!

5.Jquery

Jquery是相当于把js封装了一套的一个js插件，目的就是操作起来更方便，代码写的更少。 Jquery是一个免费、开源的轻量级的Javascript库，并且兼容各种浏览器，同时现在有很多基于 Jquery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度。

6.框架

从 bootstrap开始，响应式的珊格系统被后来框架一直沿用，建议学一套主流mvc框架，vue，react， angular两选一种。

7.会点后台语言

对于前端工程师来说，并不需要像网站程序员样，编写对象、开发特殊功能、搭建数据库。但是前端工程师要掌握基本的页面GET＆POST传参、程序判断语法、程序输出语法、页面提交、数据库查询与记录插入，以及掌握HTTP与WEB工作原理、掌握Socket长连接实时网络通信技术、掌握 NOSQL中的 MONGODB的应用、了解PHP语法、了解 MYSQL数据库的基本操作。

当然，以上技能能够帮助你成为一个合格的前端工程师，但要成为一个优秀的前端，必须掌握除技术以外的东西，例如设计，用户等等，因此还需不断的坚持学习。

D. 做网站的前端需要会html css js够不够

前端会html/css/js够，能基本做一个不错的页面。但是如果想成为一个技术高的前端，还需要学习和掌握更多的东西。

如何才能做得更好呢？
第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
第三，必须学会运用各种工具进行辅助开发。
第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。
可见，看似简单的网页制作，如果要做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。
代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。

E. 我做前端开发，但是javascript总是搞不懂，也不会写出什么效果，逻辑和大脑空空，觉定转行！

我觉得吧你首先要确定自己是否真的努力了，是否有好好学习javascript、jquery、css、html了，如果你努力了，和高手探讨一下自己的努力方向是否走偏，如果就是觉得不适合，就是不爱做，那好吧，放手吧。
如果没有努力，没有好好学学javascript，那么好好学一下，可以先学一下jquery，很简单，可以立即让你对javascript感到惊艳，美轮美奂。
我也是做前端的，我很喜欢前端的工作，我们这边也有后端的同事转过来了，他已经做到了项目经理级别，后端做长了就会感觉，前面一律，模式已经固化了，做前端每天你可以看到崭新的东西，每天都有有趣的东西出现。
推荐你基本书吧，javascript权威指南(第六版)，javascript高级程序设计，javascript语言精粹，javascript设计模式，javascript经典实例。
可以先看jquery方面的书，推荐两本jquery语言基础，锋利的jquery。
希望对你有用

F. 前端程序员必须了解的几个CSS使用技巧

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height;其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应。当然该元素高度上的百分比是相对其父元素高度的百分比的，min-height及max-height也适用这条规律。

2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。

3、边框宽度不允许使用百分比值。这点就不解释了。

4、width：100%，当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。

5、line-height。你知道line-height:150%和line-height:1.5的区别吗? line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。

6、ex和 ch单位。ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算;ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em。

ex和 ch单位，类似于 em和 rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。7、使用calc时运算符之间要有空格 ，否则可能无效。

以上这7个知识点你们掌握了吗?更多的内容资讯，小编会及时发布在本平台，请及时关注哦!

G. html代码和css代码应该由程序员写，还是由美工写

Web前端设计主要分为5个步骤：
1.看需求;
2.画草图;
3.设计界面;
4.前端代码编写;
5.兼容性调试。
网页美工是精通美学，photoshop（PS），FLASH，dreamwaver（DW）等一网站制作软件的网络人员，且必须具有良好的创意和一定程度的审美观。必要时需要一定的策划知识。为网站所有的页面画出来并用DW和css排版出来。页面必须清晰简洁，还要适宜后台调用。
网页美工是美工用Dreamwerver等网页编辑软件把已经设计好的平面效果图，制做成HTML静态网页文件。这里就要求美工用到CSS和DIV技术了，也就是所谓的切图。说的详细一点就是，网页美工一般需要精通PHOTOSHOP/CSS/HTML/JAVASCRIPT等网络语言或工具进行网页框架，色彩，基调，创意等处理。

H. 为什么 CSS 这么难学

因为CSS是一门非常奇怪的语言。他有两条不同的学习曲线，一条是入门以后直线上升然后慢慢变得平坦，一条是稳定上升的斜线。打个比方，修一台电视机我们有两种方法: 一种是在外壳上敲敲打打，找到敲哪里敲几下的规律；另外一种是看一本电视机原理的大厚书，然后去拆开修。对应到CSS就是不停地试各种排列组合和读规范读权威指南。这两种方法其实没有高下之分，只有适用范围。如果只是用CSS做很简单的工作，那试一试很经济实惠，但如果经常跟CSS打交道，那么读规范就会节省大量跳坑排坑的时间。高票答案说CSS不正交化我不是很赞同，他举的三个例子都清楚写在了规范和权威指南里面。如果先读规范会觉得这些行为是自然而然的。我本人同时写JavaScript, Java, CSS, Python，在学习C++，但是并没有感觉到高票的所谓理性和感性的区别。你觉得它没有规律，也许只是因为你没有好好读规范。CSS是一门正儿八经的编程语言，请拿出你学C++或者Java的态度对待它，该看书看书，该查文档查文档。

I. php程序员需要掌握css/div和js吗

PHP程序员需要掌握的东西不仅仅是一些简单的html, js，掌握这些仅仅不够
PHP程序员需要了解的东西有：
倘若是做中间层和前端工作则要求对css，javascript要求比较高。当然对web的一系列实现原理也是要非常熟悉的。对新技术要比较敏感，才能证明你有很好的学习能力和使用能力。
努力提高自己的英文口语，和阅读能力。往往很多新技术都是老外想出来的。等有了中文版也许这个技术已经不是那么新了。相信我们很多人都只是了解到中间的皮毛而已，对于技术原理。这类型的东西了解甚少。值得注意的一点，正则这个东西在他们严重也是很重要的。
想成为一位合格的php程序员（高级）,必须符合如下条件。
1、文件目录处理函数包80％以上的函数的功能的灵活运用。
2、 日期时间函数中的80％以上的函数的功能的灵活运用
3、数学函数库中的100％的内容。
4、网络库中的60％以上的内容，对各个函数的功能比较熟悉。
5、字符串处理函数下的60％以上的内容，特别是各种处理函数。
6、正则表达式函数下的90%以上的内容，特别是各种正则处理
7、一些安全库下的40％以上的内容，如果对于安全没有接触的话根本就不可能掌握PHP
8、XML处理，熟悉SAX、DOM以及JDOM的优缺点并且能够使用其中的一种完成XML的解析及内容处理。
9、图形图像函数库下的80%以上的内容，特别是一些图像生成和处理
10、MySQL 数据库函数下的90%以上的内容，特别是处理各种数据的函数
11、数组处理函数下的90%以上的内容，特别是各种操作处理函数
12、其它PEAR，PECL，和一些扩展类库中的80%以上的内容，特别是一些常用的类的处理
13、针对不同的需求，查找不同的函数库。
14、测试：必须熟悉使用phpunit编写测试用例完成代码的自动测试。
15、管理：必须熟悉使用xinc, phing等完成工程管理的常用任务，例如工程编译、生成phpdoc、生成、版本控制、自动测试。
16、排错：应该可以根据异常信息比较快速的定位问题的原因和大致位置。
17、思想：必须掌握OOP的主要要求，这样使用PHP开发的系统才能是真正的PHP系统。
18、规范：编写的代码必须符合流行的编码规范，这样程序的可读性才比较好。
19、博学：掌握OOA、OOD、YiiFramework 、Zendframework、cakephp、symfony、模板技术等流行技术，掌握软件架构设计思想、搜索引擎优化、缓存系统设计、网站负载均衡、系统性能调优等实用技术。
20、
多去看别人写的代码，php优秀的框架很多，很多人在认知上就有一个错误。认为自己能用一个框架开发一个系统了就认为自己已经熟悉这个框架了，其实会使用
他并没有什么一个框架基本都有用户手册，一看基本都会使用了，要想自己技术上面提升，建议多看看这些框架的实现原理（设计模式）。

J. Web前端开发知识点之CSS的使用方式

今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧！


一、与HTML的结合方式


CSS与HTML的结合方式一共有三种，分别是：外部样式、内部样式和内联样式。


①外部样式


当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在文档的头部：


_








或者可以像下面这样在





②内部样式


当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用





③内联样式


要使用内联样式，你需要在相关的标签内使用样式(style)属性。


_


Thisisaparagraph

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。


二、CSS语法


CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明。


选择器通常是您需要改变样式的HTML元素。


每条声明由一个属性和一个值组成。两条声明之间被分号分开。


属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。


在下面这个例子中，h1是选择器，color和font-size是属性，red和14px是值。

三、选择器


CSS的选择器主要分为两大类，一类基本选择器；一类扩展选择器。


①基本选择器


基本选择器包括id选择器，元素选择器和类选择器。


id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。例如下面代码指定id为red的标签中文本为红色。


#red{color:red;}


元素选择器可以为相应的HTML元素指定特定的样式。元素选择器前面没有任何字符。例如下面代码指定div标签中文本为红色。


div{color:red;}


类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以一个点号显示。例如下面代码指定class为center的标签中文本居中对齐。


.center{text-align:center}


②扩展选择器


扩展选择器是在基本选择器的基础上扩展出来的，下面介绍几种常见的。


*选择器(*
{})可以为HTML的所有元素指定特定的样式。例如下面代码指定HTML页面中所有文本为红色。


*{color:red;}


并集选择器(选择器1,选择器2{})可以为多个选择器指定特定的样式。例如下面代码指定div和span两种标签中文本为红色。


div,span{color:red;}


子选择器(选择器1选择器2{})可以为选择器1中的选择器2指定特定的样式。例如下面代码指定div中span标签文本为红色。


divspan{color:red;}


父选择器(选择器1>选择器2{})可以为含有选择器2的选择器1指定特定的样式。例如下面代码指定含有span的div标签文本为红色。


div>span{color:red;}


属性选择器(元素[属性="属性值"])可以为含有该属性且属性值等于该值的元素指定特定的样式。其中，元素和属性值可以省略。例如下面代码指定align属性等于center的div标签文本为红色。


div[align="center"]{color:red;}


伪类选择器(元素:状态{})可以为该元素处于该状态时指定特定的样式。例如下面的代码指定鼠标悬浮在超链接上时文本为红色。


a:hover{color:red;}


四、盒子模型


所有HTML元素可以看作盒子，在CSS中，"box
model"这一术语是用来设计和布局时使用。


CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。


盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。


下面的图片说明了盒子模型：


Margin(外边距)-清除边框外的区域，外边距是透明的。


Border(边框)-围绕在内边距和内容外的边框。


Padding(内边距)-清除内容周围的区域，内边距是透明的。


Content(内容)-盒子的内容，显示文本和图像。默认情况下，标签的width和height属性指的是content(内容)的宽和高，我们在设置边框和边距的时候一定要注意。如果想要让width和height是最终盒子的大小，可以设置下面的代码：


box-sizing:border-box;


以上就是小编今天为大家分享的关于Web前端开发知识点之CSS的使用方式的文章，希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，城市一名优秀的web前端程序员。


文章来源：原创_绲墓适_