感受
学h5在前期基础阶段总体来讲还是简单很多的,主要就是记记记,所有的标签,属性及注意的事项都是比较多的,单词的话每天熟记几遍,属性,标签的作用及一些事件自己多试试就能知道他们的作用。
静态h5是最基础阶段,熟悉后就要实战,尝试做一做pc端网站,先从简单的入手,实战后就能发现许多的问题,然后去完善巩固自己学的知识和提升自己动手能力和水平。前阶段的话多做的提升速度,还有就是找问题和思考整体网站框架如何 ,知道怎么布局后就能得心应手了。
初级前端掌握:HTMl5+ CSS3+bootstrap,pc,移动端布局
中级前端掌握:JS,jQuery
高级前端掌握:移动端Nodejs,AngularJS,Vuejs,React.js,微信小程序开发
做网站前需注意的点:
1.用编程软件(建议用HbuilderX,感觉很好用)先配置好初始框架,先别着急写内容,然后进行js,jq,bootstrap,icon图标,字体link引入

2.拿到网站首先看它的布局和框架,从上往下分为几块,是不是内容块都居中显示,然后想好用什么名字去区分它们,最好可以用h5新标签,当然新标签也就那么几个,不够用就用div加class来凑吧
section,article,aside,header,footer,nav,figure,time,mark,main,canvas
3.然后先把网站自带一些属性清一清,每次做之前copy一波,很舒服,高度坍塌加个class:clear就行,还有*{margin:0;padding:0}一般不用,因为不是所有的标签都有margin和padding,这样写容易造成网页代码冗余,降低网站加载速度
/* css reset*/
3.body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,
fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
ul,li,ol{list-style:none;}
b,strong{font-weight:normal;}
i,em{font-style:normal;}
a,u{text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:normal;}
#top,#nav#banner{width:1000px;margin:0 auto;}
img{display:block;boder:0;}/*清除与div父级之间下方3px的间距*/
input{border:0;}
.clear:after{
content: "";
display: block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear{zoom:1;}/*IE兼容高度坍塌*/
4.做移动端或bootstrap响应式网站的话要加
移动端:html的设计width应用比例
750px宽度—》width:26.67vw
640px宽度—》width:31.25vw这两个设计宽度应该是用的比较多的吧
5.网站可以多用ul>li框架,方便架构清晰,之后就是考验大家水平和能力(做网站速度快慢,细节优化,代码量,排布搭配之类的,以后有经验之后就能得心应手)
自己做网站发现的一些问题:
1.p中文字设置line-height就可以自动换行
2.优先显示value内容并以*代替,没有value时,显示placeholder内容并显示灰色
3.div>div :父子选择器(选择儿子辈) Div 空格div : 后代选择器(选择指定后代)虽然做网页我喜欢用空格(后代选择器),方便嘛但是子级和子级以内有多个相同的话容易一起设置属性,子级设置属性最好用>或者分开用class,id或属性选择器也行
4. flex-wrap: wrap; /*开启换行后,align-items和align-self失去效果,但align-content可以调整其在纵轴的对齐方式*/
5.img,hover后显示蒙版,一般是img下方兄弟搞一个块display:none hover变成block(我这里举例用下div)hover后再定位上去,
这时候容易出现img的hover事件闪动鼠标hover的元素已经变为出现的div,所以此时div就会继续回到display:none;,循环往复,就会不停闪动。所以要加一个样式,就是鼠标浮动到div,也要修改div的display 样式为block。解决方法:img:hover + div, div : hover{ display: block; cursor: pointer;}
6.table中td中要显示一个图片和下方有一块文字并带有背景颜色的块

网友评论