一个html + css 的电商练手项目

项目地址:https://github.com/ArchKS/JD-demo

Total Desc

效果展示

Gif演示


静态图

这个项目主要是学完html和css后的练手项目,了解知识点和会用之间的差距还是很大的,下面是项目的实现和总结:

整体目录:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.  # 根目录
│ favicon.ico
│ index.html
│ README.md

├─css
│ │ base.css # 公共样式部分,头部和底部
│ │ index.css # 自定义样式部分,中间内容区域
│ │ normalize.css # 初始化样式表
│ │ style.css # icomoon样式
│ │
│ └─fonts
│ icomoon.eot
│ icomoon.svg
│ icomoon.ttf
│ icomoon.woff

├─images
│ ad-l.jpg
│ ad-r.jpg
│ header.jpg
│ ico.webp
│ ico_footer.webp
│ logo.webp
│ mobile.webp
│ no_login.jpg
│ sprite.webp
│ sprite_fs@1x.webp
│ sprite_userinfo@1x.webp

└─js
nav-show.js

这个项目使用了盒子模型,盒子里嵌套盒子,之前知道盒子嵌套的概念,但没有具体做过,类似将一个整体拆分为三个大的模块,然后再将每个模块拆分为一个个盒子,就像是下面这张图:

JD-box-Layout

整体可以看作是四个大的盒子

  • 最上面的广告栏
  • 中间导航层
  • 中间详情页
  • 底部标语和版权

每一个盒子使用宽度和高度标明大小,这里有一个公共类w,所以不需要宽度,只需要每个盒子的高度

使用父盒子来约束子盒子

1
2
3
4
w {
width: 1190px;
margin: 0 auto;
}

举个例子详解:

中间导航栏

首先是搞定页面上有多少个盒子:总共有6+1个盒子,对于中间层而言,自身是一个大盒子,其他元素被拆分为6个小盒子。拆分的目的是为了通过盒子的定位来实现灵活自由的布局。

1
2
3
4
5
6
7
8
9
<div class="w">
<div class="nav-top"></div>
<div class="form"></div>
<div class="hotwords"></div>
<div class="shopCar"></div>
<div class="qrcode"></div>
<div class="logo"></div>
<div class="nav-bottom"></div>
</div>

w.class 是为了实现指定宽度和水平居中

form包含了input和button,这样可以方便的让这两个元素在同一水平线

确定好页面有几个盒子之后,就可以动手写css了,采用绝对定位固定位置,主要使用的属性有:width,height,top.left,position,具体的css代码就不写了,只写个框架:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.w {
}
.nav-top {
}

.logo {
}
.form {
}
.hotwords {
}
.shopCar {
}
.qrcode {
}
.nav-bottom {
}

需要注意的是:如果子盒子使用绝对定位,尽量指定父盒子(这里是w.class)使用相对定位(position: relative),如果没有指定,默认绝对定位的父盒子为<body>

最后写出来的样式就是:

中间布局demo

以上就是JD-demo项目的整体布局方案,下面介绍html+css的具体小元素布局

Detail Desc

细节描述部分包括布局相关和一些其他琐碎的知识点

观察一个细节容器布局时的注意点:

  1. 是否有边框 boder outline
  2. 是否有背景色
  3. 容器的显示方式 block inline
  4. 容器的边距、填充,内容的长宽
  5. 字体颜色、粗细、大小

1、关于导航栏的一些体会:整个项目也让我弄懂了block和inline的区别,之前疑惑的使用ul>li作为导航栏的布局方式也明白了:

  • ul 和 li都是block元素,所以会独占一行
  • float会让元素脱离文档流,使用了float的li会排成一行(如果宽度足够)
1
2
3
4
5
6
7
8
<ul class="fr">
<li> <a href="#">您好,请登录</a> </li>
<li> <a href="#">我的订单</a> </li>
<li> <a href="#">我的京东</a> </li>
<li> <a href="#">京东会员</a> </li>
<li> <a href="#">企业采购</a> </li>
<li> <a href="#">客户服务</a> </li>
</ul>

2、关于border的几点体会

border-demo

  • 一开始会以为这里使用<hr>水平线做的,但是后来发现是用border-bottom这个属性做的,很巧妙。
  • 下面那一堆图标,也是用border做的,只设置border-top & border-right,至于最右边为什么没有border,是因为在外面的那个盒子里,加了overflow:hidden实现裁剪。

另外,那些图标也是浮动列表,是ul>li>a>i+span + float的形式做出来的

1
2
3
4
5
6
<li>
<a href="#">
<i></i>
<span>游戏</span>
</a>
</li>
  • <i>用来存放图标背景
  • <span>文字,i-->span的html格式也保证了图标压在文字上面
  • 外围用<a>标签包裹,既可以实现点击;又可以轻松的搞定图标和文字的水平居中
  • 需要注意的是,a标签和a>i标签都需要转换为block元素,不然没办法设置长宽和位置属性

之前的实现方法,利用span设置背景图和文字,不考虑点击,可以对比一下上面

1
<li><span>游戏</span></li>

合理拆解可以更好的优化布局

3、margin和padding

mp-demo

这个地方如果不设置hover的动画效果,那么padding和margin都是可以的;但是如果设置了动画效果,使用margin会导致鼠标放上去时,左边依然是深灰色,没有变为浅灰,样式不够饱满。

这段不是和margin、padding有关的,但是上面有图,就一块说了。一开始看到这一块时,会觉得很头疼,这么多的文字,还有这样的布局样式,无从下手。后来发现就是简单的ul>li>a的格式,其样式也不过就是background-color + margin(ul,上下) + padding(li,左右) + line-height,最后在调整a标签的颜色就行了,至于中间的 /,就:

1
<a href="#">机票</a> / 

4、favicon图标

一个网站的图标一般可以使用http://www.example.com/favicon.icon拿到

比如京东的Logo:https://www.jd.com/favicon.ico

引入方式:

1
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

5、网站的SEO

SEO分为站内优化和站外优化,对于html而言,可以优化的点有一下三个:Title(最多25个汉字)、Description(最多120个汉字)、Keyword(6~8个关键字)

首页标题的命名格式:网站名 + 网站介绍

1
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>

Description

对于关键词的作用明显降低,但由于很多搜索引擎,仍然大量采用网页MATA标签中描述的部分作为搜索结果的”内容摘要“,我们提倡,Description作为网站总体业务和主题概括。

1

Keywords

1
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

6、初始化CSS

因为每一个浏览器都有自己默认的样式表,没有统一的规定,所以对于某些标签是不同的,不进行浏览器初始化,则会造成浏览器显示页面有微小的差异

1
2
<!-- 引入 css 初始化文件 -->
<link rel="stylesheet" href="css/normalize.css" />

7、使用公共图标库

http://icomoon.io/

icomoon

  1. 可以选择Generate Font下载图标,也可以点击import Icons导入之前的选择重新修改

  2. 下载完成后,打开icomoon/demo.html,里面有图表样式,类似icon-location

  3. 将icomoon目录下的fonts和style.css复制到你自己工程文件夹里的css目录

  4. 在你工程里的index.html里引用style.css

    1
    <link rel="stylesheet" href="./css/style.css">
  5. 然后通过类的方式引用图标

    1
    <i class="icon-location">

8、样式的优先级

有时候我们的样式(颜色)优先级不够会被其他定义的样式覆盖,这时,我们可以这样写把优先级调到最高:

1
2
3
.f10 {
color: #f10215!important;
}

9、在浏览器修改CSS属性

F12

键盘上下调整数值大小,效果实时显示在页面

Rrr Desc

对于图片,如果我们想实现点击,可以采用<a>包裹

1
2
3
<a href="#">
<img src="" alt="">
</a>

当我给一个<img>标签指定为内联标签,根据理论,内联标签设置width、height属性无效,且margin和padding在竖直方向上的均无效。但实际上,height和width都生效了。

img-inline-err

解决:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

<img>,<ifram>,<video>,<emed>都是可替换元素,其展示效果和渲染独立于CSS,类似于dsiplay: inline-block

关于inline-block:

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

inline 和 block 元素集合:

http://novel.ymlog.cn/post/2eec1551.html#Block-Elements-and-Inline-Elements