美文网首页
H5初学入手教程

H5初学入手教程

作者: 秃头成就技术 | 来源:发表于2018-08-18 11:18 被阅读97次

感受

     学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中要显示一个图片和下方有一块文字并带有背景颜色的块 


 设置后文字会在图片下方,而背景颜色的块跑到了img顶端后面,这时给文字块加一个float:right就能分块显示

7.做网站position尽量少用或别用吧,很容易把网站做乱掉,之前大学也自己做过一个比较大的网站那时不是基础功不扎实,用定位不是方便嘛,所以用了很多定位,最后效果不是这里位置不对就是哪里跑掉不见了...用margin,padding或者弹性盒都比较稳定

8.浮动容易高度崩塌,也是经常遇到,多注意就行,一般父级设高度或万能清除法解决

相关文章

网友评论

      本文标题:H5初学入手教程

      本文链接:https://www.haomeiwen.com/subject/xuxbbftx.html