学习编程,与君共勉。

在做过一些页面并且参考了许多商城页面后,对代码的书写和风格也有所体会,再次将我的经验分享给大家,希望大家也能够写出整洁有效的代码。本文主要是针对排版的问题进行总结,代码量较少,希望能够耐心看下去,或多或少都有些帮助。
这里是对页面排版部分——HTML部分的介绍,当然后续也会有CSS样式,JS的介绍,以及通过JQuery的书写给大家呈现大多数页面共同的地方。

一 梳理排版
善于利用div。div就像一个盒子,将你想要写的这一块代码包起来,所以在设计页面时,看清div的闭合,你写的这一部分代码是否属于这一块。
注意标签的利用。在页面设计中,经常会有许多标签嵌套的形式,比如说

<div>
<div>
<ul>
<li><a href=""><span></span><i></i></a></li>
<li><a href=""><span></span><i></i></a></li>
<li><a href=""><span></span><i></i></a></li>
</ul>
</div>
</div>
1
2
3
4
5
6
7
8
9
这个时候,要分清你需要什么,每个标签又能提供什么作用。在页面中,一般都分为总区域和有效区域,总区域就是第一个div,宽度设为100%,可以添加背景颜色等;第二个div便是有效区域,宽度一般为1200px,设置margin:0 auto使其居中;使用ul是为了使其中的li元素方便设置浮动属性,一般用于样式相差不多且并列显示的元素;a标签提供链接,span标签中一般放置文本信息,i标签则放置背景图,常用作角标、图标等。
对常用标签的基本掌握下,也要了解一些例如< b >,< i >,< em >等标签,无论是排版还是样式都会提供很大遍历。

二 class id命名
在写一个大的页面如某宝等购物页面时,class,id的命名就会成为一个头痛的问题,这大概是所有的前端遇到的问题,关键是你的代码需要具备促进团队合作,有助代码审查等特点,也就是大家都能看懂,知道你写的这块代码对应页面的那一部分,具有良好的重构性。
命名规范这里简单提一下

可以使用数字、字母和下划线,但不能以数字开头
区分大小写
驼峰式命名
见名知意
所以命名也十分重要,这里给大家推荐我常用的,我一般保存在桌面的txt中,需要时查看一下,熟练后很好用

命名原则:可根据每块元素的主题 或者功能、在页面上的位置来定义名称,便于管理查找和维护

常用简例如下:(可根据内容需要组合使用)

顶部:top:
顶导航:topNav top_nav
页头: header 如:#header{属性:属性值;}或.header{属性:属性值;},
页面主体:main
页脚:footer
侧栏:sideBar
边导航图标:sidebarIcon
广告:banner

外 套:wrap
栏目标题:title
内容:content

菜单: menu
子菜单:subMenu
菜单内容1: menu1Content
导航:nav
子导航:subNav
搜索:search
登录条:loginBar

标志:logo
指南:guild
新闻:news
热点:hot
下载:download
服务:service
登陆:login
注册:regsiter
合作伙伴:partner
版权:copyRight
友情链接:friendLink

标签页:tab
当前:current
文章列表:list
提示信息:msg
加入:joinus
小技巧:tips
投票:vote
状态:status
滚动:scroll
按钮:btn
商 标:label

当然,还可以使用left,right等,比如顶导航分为左右两部分,就可以使用top_navLeft,top_navRight来命名,或者将其简写为l、r,这只是我个人的命名习惯,每个人都有自己的不同命名方式,但最终的目的都是相同的,就是提高代码重构性。对于不是特别重视这方面的童鞋送一句玩笑话给你们:

“第一天写下的代码只有你和上帝能看懂,第二天,只有上帝能看懂了。”

三 注意细节

养成添加注释的好习惯,这很重要!
对划过某个元素出现的div写在同一个父元素下(原因CSS部分会讲到);
小的图片或图标通过url的方式添加,尽量不要使用img标签;
学习并掌握HTML5新增的标签;
HTML作为学习前端最基础的知识,相对来说比较简单,但是必须熟练掌握,身为程序员,一定要做到有意识,有耐心!

送给诸位,也是送给自己的一句话:Learn No Stop Forever !

页面商城总结(一)——HTML部分的更多相关文章

  1. Vue3 项目实战

    使用Vue3 开发一个小米商城 业务流程 登录---> 产品首页--->产品站--->产品详情 购物车--->订单确认--->订单支付--->订单列表 业务开发流程 ...

  2. 刚写完的商城erp + 这个商城前台,新鲜出炉。自己1个人写, 包括php框架和前端html页面.

    刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面.

  3. H5页面设计器,仿有赞商城页面在线设计器,比富文本框更友好的内容编辑器

    基本上每个web应用,都会牵扯到内容编辑,尤其是移动的web应用,微信开发之类的.页面内容自定义是最常用的功能了,之前大部分解决方案都是采用富文本框编辑器kindeditor,ueditor,cked ...

  4. H5商城,纯前端静态页面

    发布时间:2018-09-28   技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit   概述 纯手写H5商城,2年 ...

  5. 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架

    转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...

  6. 基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)

    界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城 功能和数据库参考ecshop 服务端api基于Node.js+ThinkJS+MySQL 计划添加基于Vue.js的后台管 ...

  7. 老男孩Day15作业:商城列表页面(静态)

    一. 一.作业需求: 1.完成商城列表静态页面的抒写 二.博客地址:https://www.cnblogs.com/catepython/p/9205636.html 三.运行环境 操作系统:Win1 ...

  8. 仿联想商城laravel实战---5、无刷新的增删改查(动态页面更新的三种方式(html))

    仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...

  9. 仿联想商城laravel实战---3、前端页面搭建(什么情况下需要路由接参数)

    仿联想商城laravel实战---3.前端页面搭建(什么情况下需要路由接参数) 一.总结 一句话总结: 比如访问课程的时候,不同的课程(比如云知梦),比如访问不同的商品,比如访问不同的分类 //商品详 ...

随机推荐

  1. 通过P3P头实现跨域设置cookie

    PHP的setcookie函数可以设置域,但是只能在当前域内,如果出现多域可由如下办法处理:实现原理:www.b.com/set_cookie.php   在b域名下设置a域名的cookie < ...

  2. Java的四个标记接口:Serializable、Cloneable、RandomAccess和Remote接口

    一.概述 标记接口是一些没有属性和方法的接口,也是一种设计思想.Java中的一个标记接口表示的的是一种类的特性,实现了该标记接口的类则具有该特性.如实现了Serializable接口的类,表示这个类的 ...

  3. 转载:Keytool 工具介绍

    1.产生一个keystore: keytool -genkey -alias myssl -keyalg RSA -keystore myssl.jks 运行这个命令,系统提示: Enter keys ...

  4. 【Monkey】Monkey获取包名的方式

    获取包名的方式: 1.有源码:查看AndroidManifest.xml 2.只有apk: 2.1 aapt dump xmltree ColaBox.apk AndroidManifest.xml ...

  5. css选择器权重问题

    important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0

  6. 通读SCRUM实战指南教材,提出5个问题。

    问题一:为什么要制定优先级的排定和调整? 创建一个排好优先级的项目组合并讲重点放在转移团队上,如果做得对,可以消除在项目数量超过团队能力 的情况下过于常见的多任务处理. 问题二:为什么我们要做文档? ...

  7. windows版influxDB安装与配置

    一.下载链接https://portal.influxdata.com/downloads,选windows版 二.解压到安装盘,目录如下 三.修改conf文件,代码如下,直接复制粘贴(1.4.2版本 ...

  8. java类的理解和相关问题

    ---java抽象类 当我们定义的对象无法抽象或者不适合抽象为一个具体的类的时候 我们通常定义其为一个抽象类 like 衣服 (多种衣服) 手机 (多种手机) ---接口和抽象类的异同 对于概念上来说 ...

  9. 使用Maps与Sets处理集合的交差运算

    import com.google.common.collect.MapDifference; import com.google.common.collect.Maps; import java.u ...

  10. 怎么获取红米6 Pro的root权限

    红米6 Pro能有啥方法获得ROOT超级权限?做开发的人知道,android设备有ROOT超级权限,如果手机获得root相关权限,就能够实现更强大的功能,举例子,做开发的人部门的营销部门的妹子,使用一 ...