码迷,mamicode.com
首页 > 其他好文 > 详细

我的前端布局方法

时间:2019-07-17 20:32:21      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:div   isp   博文   水平   自己   分辨率   思想   程序   原创   

前些日子无聊的时候学了下前端,说实话没有美感前端和搬砖没有区别,唯一值得一提的就是他的布局方法。我的这个方法用于写死网页,不含各种框架的自适应性功能,而且主要想记录一下思想。

    写前端不同于算法优化,算法中经常是能少一个数组就少一个数组,而前端只要保证不乱,多套几个div没有任何关系,也没人会深究你浪费了几个div。所以基本上是每一个模块都套一个div,兄弟也好后代也好,有意义就套,只要自己不嫌麻烦就行。而且始终秉持一个思想,先布局后写内容,写每一块思路都要清晰,多写几遍谁都会熟练,再多总结把用的多的组件封装一下,不用动脑两三个小时出一套前端不成问题。

    布局思想方面,弹性盒子布局会减掉许多麻烦,主要是由于他的排列以及居中方式可以代替各种边距和浮动设置。手机端只需适应各种手机屏幕即可,所以稍微关注一下电脑端即可。分辨率最窄1024px,最宽1920px,写出的网页要想适应所有屏幕,最好的方法就是内容部分给一个最小宽度,然后两边留白,其实这也是当下淘宝等网页采用的方法。具体来说,就是整体内容外面包一个div,宽度一般1000左右,然后使用margin:0 auto;水平居中,当然也可以再做些媒体查询。

    对于整体布局,我这里封装了两种宽度,百分比式宽(fluidwidth)和固定长度式宽(containerwidth)。百分比式宽电脑端整体布局基本不用,只用于部分布局;移动端整体部分布局都用,但要防止有东西挤下来。固定长度式宽电脑、移动端都用于整体布局。

    对于div内部,我这里使用了center-all、justify、align等三种居中方式,能不用边距对齐就不用。至于div之间的排列,横向的有latitude-spacearound、spacebetween,纵向的有longitude,足以应付绝大多数排列。

    而网页中模块之间,我使用外边距来隔开。还有,每次写网页,布局时一般都给个底色,我这里是第一层底色用红黄绿蓝,第二层用粉棕。

    写完静态网页后,剩下的就是动态网页了。用的最多的轮播图用swiper最好,其余我只写过一些原生js,js水很深再加上我也没兴趣做个前端工程师没有往深走,所以也就不多叙述了。。

 

下面奉上我的布局框架:

/*------------------------公共样式表----------------------------*/
* {
margin: 0px;
padding: 0px;
border: 0px;
}
a {
text-decoration: none;
}
p {
text-indent: 16px;
font-size: 15px;
color: #333333;
}
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
.center-align {
display: flex;
align-items: center;
}
.center-justify {
display: flex;
justify-content: center;
}
.latitude-spacearound {
display: flex;
align-items: center;
justify-content: space-around;
}
.latitude-spacebetween {
display: flex;
align-items: center;
justify-content: space-between;
}
.longitude {
display: flex;
flex-direction: column;
}
.fixedwidth {
width: 1349px;
margin: 0 auto;
padding: 0 6%;
box-sizing: border-box;
}
/*百分比式布局栏*/
.fluidwidth {
width: 100%;
box-sizing: border-box;
}
首先很感谢前些日子带过我的zzw同学,让我无聊的日子看起来不那么无聊。老实说bootstrap4其实也学的差不多了,理论上写一个出来也没什么问题,可是我实在没有写一个出来的动力。。这几个月想了很多,并非程序上的问题,而是关于自己为什么敲码,以及人生方面的问题。不做个前端的话,那我写bootstrap4好像除了浪费大脑内存,没什么别的卵用了,如果真要写个前端,现学也不成问题。相比之下,我想做一些自己喜欢的、擅长的、对自己而言有意义的事。。

 

非常抱歉。。
---------------------
作者:Flynn_curry
来源:CSDN
原文:https://blog.csdn.net/Flynn_curry/article/details/93312235
版权声明:本文为博主原创文章,转载请附上博文链接!

我的前端布局方法

标签:div   isp   博文   水平   自己   分辨率   思想   程序   原创   

原文地址:https://www.cnblogs.com/itzhangsiyuan/p/11203311.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!