h5,css前端规范(自用)

本文介绍了在移动端HTML页面开发过程中遵循的一系列规范,包括CSS文件的加载顺序、类名的命名方式、页面布局的设计原则等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、 新的html页面,在head部分载入该载入的css,如normalize.css,要用的swiper.css、layui.css等,按照固定的pc端和移动端规         范来设置html相关属性。;

      在移动端编写页面时,使用layui自带的类的样式(如文本框,label,复选框等)时,请用<style></style>来写,不要在外面用css引入,以免规定长宽的时候会自适应,导致不同手机显示页面效果不同。

2、类名的设置,不要随意,最好是标签加下划线加单词的形式,在less中编写,能嵌套尽量嵌套形式,减少维护修改时间成本;

一个页面区域分块要清晰,上中下,什么标签、p、div归为上中下哪个部分,一个页面根据功能,分为title,表单,跳转部分,比如下图移动端页面,title与跳转部分内容都是居中的,“提交”按钮和复选框放在一个div,textaligncenter就成了。

然后就是span、a、img这些用的比较多的,一定要嵌套写好(不建议起一堆名字。。),省的产生冲突或者因为css优先级而出错。

3、最后补充,引入css顺序,先normalize.css,最基本的,其次是用到的插件如jquery.css、swiper.css、layui.css、bootstray等,最后是自己写的css。必须按照此顺序,否则起冲突弄半天自己也不知道为啥。

 

附上移动端页面。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值