web前端开发经验总结

作为一个新的小前端，谨以此文记录我的前端之路：以我现在的认知，我暂时把前端分成三个阶段。

1、第一阶段：静态页布局

纯html和css布局，切页面之前要好好考虑如何布局，该使用什么标签比较合适，最好清除全局默认样式，根据需要添加样式。一些css3新属性，要考虑它们的兼容性。在此期间，我遇到的的印象深刻的问题有：

001）ul里面的li一行显示布局方法：float:left;或者给li加display:inline;

002）关于布局时候的居中问题，给出height，让line-height等于height的值，可以使内容垂直居中；元素的垂直居中使用vertical-align:middle

003） 用<div>包含一个<img>标签时，<img>标签里面的图片下会有一条白色的缝隙。解决方法：因为<img>标签默认是底部对齐，给<img>display：block的属性将其转换为块状元素即可。

004） 单行多行文本溢出文本溢出（用法链接）

005） 为元素加样式时，单位要统一。用百分比统一用百分比。我用过的单位有px，em，rem。关于相对单位em，em”是相对于其父元素来设置字体大小的。一般都是以<body>的“font-size”为基准在根元素设置body { font-size: 62.5%; }，相当于1em=10px；关于相对单位rem，html { font-size: 62.5%; }，在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。rem属于css3属性，兼容Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+（rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。em 单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。）

006） 有些类似网址的，字符较长没办法直接从单词内部换行使，让单词强制换行word-warp:break-word；

007）垂直居中例如让span在div中垂直居中

<div class= "div1" >

<span>垂直居中</span>

</div>

span{

width: 50%;

height: 50%;

background:#000;

overflow: auto;

margin: auto;

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

}//是通过绝对定位来实现

span{

position: absolute;

top:50%;

left:50%;

width:100%;

transform:translate(-50%,-50%);

text-align: center;

}//是通过translate移位来实现

008）改变input的输入提示placeholder的字体颜色

.info_srarch_heade:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #88B8FC;
}
.info_srarch_heade::-moz-placeholder { /* Mozilla Firefox 19+ */color: #88B8FC;
}
.info_srarch_heade input:-ms-input-placeholder {color: #88B8FC;
}
.info_srarch_heade input::-webkit-input-placeholder {color: #88B8FC;

009）页面滚动条样式改变

/* 滚动条样式 */
::-webkit-scrollbar-track{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);}/*滚动条的滑轨背景颜色*/
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.05);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}/*滑块颜色*/
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.2);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}
::-webkit-scrollbar{width: 20px;height: 20px;}/* 滑块整体设置*/
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb{border-radius: 999px;border: 5px solid transparent;}
::-webkit-scrollbar-track{box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-thumb{min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-corner{background: transparent;}

2、第二阶段：js

关于js，一定要多练习，主要是锻炼逻辑思维能力，逻辑思维需要不断地写原生js。尽量把js的基础效果手写一遍。我手写的原生的有

001）原生js写全选，反选，全不选点击打开源码示例

002）原生js写tab切换点击打开链接

003）js定时器点击打开链接

004）js轮播图

3、第三阶段：后台交互

-------------------------------编辑中-----------------------------------------

web前端开发经验总结相关推荐

电商前端工程师：国内WEB前端开发经验之路
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
转WEB前端开发经验总结(2)
我这里先把代码写给大家看看(省略了部分代码): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
WEB前端开发经验总结--WEB标准篇
很久没有写文章,最近一直在忙于找工作和找房子.哎,现在终于安定下来了,哎,又叹息一下,是因为我把去淘宝面试的机会也推掉了,本来以为要卷铺盖回武汉了,哎,不提了,很对不起小马哥,也很对不起自己啊! 现在 ...
Web前端行业普遍底薪20K,还有项目提成,你达到了么?教你这一招
我想只要自己肯努力,工资越拿越高存够钱之后,买一栋房子在成都有自己的一席之地房子不用太大但是要把它装饰得很温馨然后买一辆车带上家人去旅游但是回过头来才发现我还在为工资涨了500高兴的时 ...
php直播前端,全民直播高薪诚聘 PHP 开发工程师、web 前端开发工程师啦~~
各位大牛们,全民直播诚邀您的加入~~~ 1 . Web 前端开发工程师 15K+ 上不封顶哦~~~ 岗位职责准确理解产品需求.交互文档或原型, 进行 web 产品前端开发: 优化用户体验,修正项目中 ...
高薪web前端都是怎么学的六年前端开发经验大哥告诉你！
如果你是想要学习web前端的新人,那么恭喜你,看完这篇文章,尽早的选择好努力的方向和规划好自己的学习路线,比别人多一点付出并且持之以恒,你就已经赢在了起跑线上. 因为工作原因,经常关注有关互联网行业的 ...
Web前端工程师的一些常见误区
想要作为一名合格的web前端工程师,那么掌握基本的开发技术是远远不够的,在职场中还要少犯一些错误,本期小编为大家分享的web前端培训教程主要是介绍一些web前端工程师常见的误区,希望对大家有所帮助. ...
c++局部对象是什么_小白学Web前端难点是什么 JS进阶知识点有哪些
小白学Web前端难点是什么?JS进阶知识点有哪些?JavaScript是前端小白学习的难点,但又是前端工程师必须要掌握的技能.很多同学反映JavaScript知识点多而杂,不知道如何下手,下面就给大家 ...
一些学Web前端最常见的错误分享
Web全栈是目前比较流行的语言.因为前端较其他语言相比,简单好学,而且现在的互联网公司几乎缺少不了Web前端开发,行业的需求致使大量的人转型前端.对于刚学Web前端的人来讲,他们缺乏开发经验,在项目开 ...

web前端开发经验总结

-------------------------------编辑中-----------------------------------------

web前端开发经验总结相关推荐

最新文章

热门文章