前端开发怎么做

Posted 2023-04-27

之前做项目的时候是用的html/CSS，和一些简单的js，比如弹窗提示，下拉框，输入限制等。但是被人说这不是前端，前端还需要提供后台接口什么的。于是想问一下前端具体需要完成什么？和后台同时进行还是先前端再后台？还需要学一些怎么样的技术？

给你讲讲我的故事，希望看了对你能所启发。

我在前端界里面做了6年，可以这么说，我在厦门做前端的时候，那时候全国有前端这个职位的几乎为零，几乎看不到有招聘前端什么的。要么是美工，要么就是程序。但到现在，只要是网络公司，你要是没有一位前端人员，你都不好意思说你也是做科技的。

在前端这些年，我去过三家大公司，我到过的每一家公司学的东西都不一样，当然了做的东西也是不一样，直到现在我会用记事本里直接写div+css,javascript；也会做业余的ps，flash，电子画册，seo优化；后台代码asp.net，php，java（不专业，但都看得懂和修改）。当然了我这只能说是我这6年的成果，不过重要是学会了一些经验，也就是要回答你的怎么样提高自己的前端水平。

首先，做前端的话，你的眼光要看远。现在技术更新很快，如果你还在用什么幻灯片，灯箱效果，那你真不是做前端的料。只能说你是应付人员，或者说就是只会就应用别人写的效果代码而已。

其次，要提升自己的价值。不要学会div+css,就不想学其它的技术了，要时时苛刻想到自己的危险处境，像懂div+css的人太多了，网上教程3天学会div+css，10天精通的资料一天堆，我也是从那时代过来的。多去学点更多能提现你自身价值的东西，比如除div+css之外，可以学习一些后台语言php，java之类的。

最后，分享，就是自己的价值要表现出来。中国没有jquery，没有smarty,这么好用的东西，中国缺的并不是能力，是分享。以为写一个小小的东西就以为自己了不起，把自己的东西隐藏起来，其实这个我们的现状，很不好。

希望你能记住这一些话，也希望在你职业前端和事业有所帮助。过几年回头再看下我写给你的这些东西时，你就会体会得更深了，给你一些前端开发的相关资料吧，你可以关注下前端网站，中国站长，或者我经常关注的 虾米站长 等。为中国前端多做点贡献，加油吧。 参考技术A 前端逻辑复杂度主要在于数据 + UI + 交互的实现，就比如一个简单的多 tab 页的功能，可以用 CSS 实现、用 JS 实现，JS 可以通过切换 remove DOM 或者添加 classname 隐藏，虽然效果上都可以实现，remove DOM 无法原有结构的状态，添加 classname 的 CSS 方式很难实现初始化状态。除此之外还可能需要对浏览器进行兼容性处理 + 响应式。然后突然来个业务需求说要加个 iframe 嵌入别人的页面，或者改什么效果，如果之前开发的不合理，基本上要重做了。
相比后端，只输出数据模型给前端，如果业务不需要什么字段了，甚至让前端不读取好了，改都不用改。我们几次大的业务平台重构，前端基本要重新开发一遍（效果、交互完全不同），后端模型和数据库则可以递进式的复用、扩展、升级。这也是导致前端需要堆人大力出奇迹的问题 参考技术B 　　Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。 参考技术C 前端开发比较广，范围也比较大，根据所学习的深度而有区别。高级一些的jquery、ajax
你所说的接口什么的，我想应该是与后台的一些的交互。如ajax
一般是先搭建界面，再写交互相关同时编写一些与前端相关的后台。
建议可以先学习jquery和ajax，基本就够用了。
后台语音很多，主流像java，C#.net 参考技术D 先前端 在后台 ！http://www.miaov.com/各种前端问题完美解答！

前端页面高度和宽度自适应怎么做？

在前端页面开发中，我们会希望页面可以根据不同用户的显示比例自动缩放页面，确保用户体验，这就是PC自适应，下面小千就来给大家介绍一下应该怎么做和集中常见的问题解决方案，记得收藏起来遇到问题来看一看。

  自适应的优点：

  元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

  宽度自适应

  元素宽度设置为100%。（块元素宽度默认为100%），或者不设置宽度（width）;（宽度是父元素的宽度）

  高度自适应

  1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）

  2)元素高度自适应窗口高度，设置方法：html,body{height:100%;}

  注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有游戏高度。

  最小高度的自适应

  min-height属性：最小高度；(IE6浏览器不识别该属性)

  hack1:min-height:value;_height:valuewww.sangpi.com hack2:min-height:value; height:auto!important;height:value;

  浮动元素父元素高度自适应（高度塌陷）

  当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

  高度塌陷的解决方法

  hack1：给父元素添加声明overflow:hidden;(触发一个BFC)

  hack2: 在浮动元素下方添加空div,并给该元素添加

  声明：div{clear:both; height:0; overflow:hidden;}

  hack3:万能清除浮动法

1

  visibility:hidden/隐藏

  visibility:hidden;和display:none;的区别：

  visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

  伪对象选择符

  1）、::after : 与content属性一起使用，定义在对象后的内容。

  语法：选择符:：after{content:”文字”;}

  选择符:：after{content:url(图片路径)；}

  如：div::after{content:url(logo.jpg);}

  div::after{content:"文本内容";}

  2）、::before: 与content属性一起使用,定义在对象前的内容。

  div::before{content:"在其前放内容";}

  3）、::first-letter 定义对象内第一个字符的样式。

  说明：*(该伪元素只能用于块级元素)

  4）、::first-line:定义对象内第一行的样式。

  *(该伪元素只能用于块级元素。)

  以上就是关于前端页面宽高自适应的介绍了，希望能帮到大家。