web前端开发经验总结

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

 

 

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

 

 

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

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

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

003） 用

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

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

005） 为元素加样式时，单位要统一。用百分比统一用百分比。我用过的单位有px，em，rem。关于相对单位em，em”是相对于其父元素来设置字体大小的。一般都是以的“font-size”为基准在根元素设置body { font-size: 62.5%; }，相当于1em=10px；关于相对单位rem，html { font-size: 62.5%; }，在根元素中定义了一个基本字体大小为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中垂直居中

"div1" >

         垂直居中

 

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、第三阶段：后台交互

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