学习编程,与君共勉。

在做过一些页面并且参考了许多商城页面后,对代码的书写和风格也有所体会,再次将我的经验分享给大家,希望大家也能够写出整洁有效的代码。本文主要是针对排版的问题进行总结,代码量较少,希望能够耐心看下去,或多或少都有些帮助。
这里是对页面排版部分——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. 下载网站js css img 资源

  2. mvc5之文件上传

    在写这篇博客之前,被网上的博客坑了一个遍. 浪费了很多的时间 最后还是靠一位兄弟解决的问题,不得不说,虽然网上资源多.但是大多数都是水货.如果那些人可以解决你的问题,那我这里明显就没用了,除非你和我一 ...

  3. mongodb使用问题记录

    findOneAndUpdate(条件,更新,function(err,data){....}) 更新后返回的data值一直都是没有更新的数据状态, 原因:需要设置{new:true},这时返回的才是 ...

  4. git之我常用的命令

    撤销修改: git checkout -- file 撤销暂存区: git reset HEAD git reset HEAD file 撤销版本库:git reset --hard HEAD^回到上 ...

  5. Linux虚机安装配置Tomcat

    d第一步:下载Tomcat包,网址http://tomcat.apache.org/ 选择tar.gz包下载,并传到虚机中 第二步:解压下载好的Tomcat包 命令:tar -zxvf apache- ...

  6. python学习---装饰器

    什么是装饰器 器即函数 装饰即修饰,意指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 装饰器需要遵循的原则 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数 ...

  7. MySQL的一些指令操作[简版]

    sudo apt-get install mysql-server pa aux | grep mysql sudo service mysql start sudo service mysql st ...

  8. Android中软键盘展示、EditText焦点获取及windowSoftInputMode属性探究

    2017-08-14 21:44:23 有很多中情况,分别展示. 1.Activity不做任何设置,布局使用LinearLayout 会自动滚动EditText之上的所有View,代码: <?x ...

  9. python基础之作业3----三级菜单小练习

    data = { "华为技术":{ "产品与解决方案":{ "云核心网":{"云核心网研发管理部","云核心网 ...

  10. python笔记24-os模块

    import osprint(os.getcwd())#取当前工作目录#os.chmod('/usr/local',7)#给文件目录加权限,7是最高权限print(os.chdir(r"e: ...