web前端开发经验总结

最新推荐文章于 2024-08-13 14:22:12 发布

伏见伊奈里

最新推荐文章于 2024-08-13 14:22:12 发布

阅读量5.3k

点赞数 2

分类专栏： CSS JavaScript HTML5

本文链接：https://blog.csdn.net/qq_35313994/article/details/53220646

版权

JavaScript 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

HTML5

7 篇文章 0 订阅

订阅专栏

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

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