HTML+CSS静态项目--仿京东首页

这次一共写了四个页面，都是模仿京东的页面来写的，主要写了首页，商品页面，商品详情页面以及用户注册四个页面，源代码可参照https://github.com/Labef-Peppa/imitate-jd.git 地址直接git-clone下载，下载后的jingdong文件夹就是整个所有html+css文件以及所有的图片文件
具体效果图如下：

整个四个静态页面编写过程中可以改进的地方以及不会写的还有新学的知识：
1.首先网页的标志图片，要使用ico文件，可以在bitbug.com网站生成ico文件
2.网页优化的三大标签：title，description和keyword，
首页标题（title）：网站名-网站介绍（<28字）
网站说明（description）：控制<120字
关键字（keyword）：6–8个关键词
3.字体图标样式，可在icomoon.io网址下载字体图标的样式，先用@font-face来指定自己的一种"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face {/*1. 这个字体名称要注意 icomoon*/font-family: 'icomoon';/*2. 一定要注意路径的问题 一定一定！！！！*/src: url('../fonts/icomoon.eot?7kkyc2');src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),url('../fonts/icomoon.woff?7kkyc2') format('woff'),url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}

这里url一定要注意，指向的是从上面网址下载下来的压缩包解压后的文件。这个设定完成后在使用的时候直接粘贴demo里面的需要的字体图标，再在相应添加的图标的标签样式里添加font-family：‘icomoon’;就可以实现字体图标显示了，如首页中右上角的下箭头符号以及我的购物车前面的小车都是字体图标。
4.在写导航栏的时候一般都是要用ul>li*x 的形式来写；

5.如果某一个样式在多个地方用到，可以多采用并集选择器，或者直接建立一个共用的common.css文件，把用的频率高的样式写在这个css文件中，然后多个html文件都link这个common.css文件，相应的需要添加样式的标签直接在标签的class里添加上样式的类名字即可。
6.导航栏多个选项字之间有小竖线隔开三种方法：
①用li或者a的border-left（right）来设置，但是可能左或者右会多出来一个，单独添加class设置none即可；
②直接暴力添加“|”在li里面a外面即可；
③把竖线也当做一个li单独写。
7.在整个页面的logo标志图后，放一个隐藏的h1标签，从而使得浏览器的搜索引擎更容易收录。设成隐藏可以直接用font-size：0；或者text-indent：-9999px；缩进。
8.botton按钮却掉边框直接用border：none；按钮左侧会有一个缝隙呃，添加float后自动去掉。
9.如果所以的子盒子都是绝对定位，那么父盒子必须要添加高度，因为绝对定位是完全脱标的，不添加高度父盒子高度就是0，会被后面的标准流盒子抢了位置。
10.子盒子宽高设置100%就继承了父盒子的大小，盒子无宽度则padding就不会撑开盒子。
11.多给标签添加class再来加样式，否则样式多了之后可能会层叠，找起来也麻烦
12.浮动的盒子可以直接给大小，不用再display转换
13.dl>dt>dd*x 适用于一个标题多个项目的作用域，dt设置标题，dd来设置项目。

14.一个区域切换多个图片展示滚动设计：ul>li>a>img，一定是直接放图片的，不能够写背景图片，因为会有多张图片。滚动选中的图片用ol>li来写。
15.子盒子可以比父盒子要大，加overflow：hidden；
16.如果遇到了外边距塌陷（margin）的问题那么就改成用padding设置
17.当设计到一个不知道有多长的页面的时候，就用一个最大的div来包裹着，不设置高度，可以无限被撑开。
18.固定电梯导航栏在版心旁：先left:50%；再margin-left：-（版心一半）。
19.过度动画样式：transition：all 1s；具体属性可参照css3样式手册，这个样式要添加在原来标签class中，能够过度动画，过渡到的样式在hover或者focus里面写，transition就是完成从原来到hover或者focus的变化这一过程的动画（注意在hover里面写margin和padding动画可能会不通，margin字是直接动的没有动画，而padding则字会有慢慢移动的动画）。
20.进度条的设置就是在一个设好边框的div里面再设置一个同样大小的div，内div设置宽度为x%，就是完成了x%的进度，然后把内div的背景色铺满即可，这个x%学了js再调。
21.子盒子不分配宽度，父盒子给一个text-align：center；就可以让子盒子来居中对齐了。
22.获得焦点选择器，也就是前面提到的focus，样式是鼠标放在设置的标签上会有“I（上下两个小短杠杠）”，然后点击后响应变化。
23.line-height设置的值有几种类型：①数字，直接用这个数字乘以字体尺寸就是行高（如1.5*20px=30px）；②直接设npx，那么行高就是npx；③x%，百分比的行间距。
24.浮动的盒子和内容是一样大的。
25.超出文字省略符号三部曲：
white-space：nowrap； overflow：hidden； text-overflow：ellipsis；
26.在a标签里href=“javascript：；”设置不做跳转来做交互。
27.所有的注册页面是不需要很花里胡哨的，因为涉及道用户隐私安全问题，尽量怎么简单怎么写。
28.注册页面的布局设置如上面截图最后一张，因为输入的六行宽度不一样，所以直接居中肯定对不齐，那么可以把这六行放在一个小一点的div里面，这个div居中，然后每一行分成三个小盒子，左侧的字水平居右（text-align：right；）其他的直接分布对齐，就可以完成了。
29.表单要有表单域包起来。

HTML+CSS静态项目--仿京东首页相关推荐

HTMLCSS仿京东首页制作静态页面总结
目录一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用三.字体图标的使用四.base.css和comm ...
前端HTML5+CSS3静态页面开发-京东首页
前端html5+css3静态页面开发-京东首页项目介绍 (1)京东首页项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,本项目旨在教授HTML和CSS的基础知识 ...
jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
Android开发笔记（一百六十四）仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
android 高仿京东首页,android 粗略的仿京东首页嵌套方式滚动
简单述说最近没有什么事情,就看到了京东的首页,感觉还不错,但是我目前也只是粗略的模仿了出来. github 地址 V2版本仿京东首页.gif 设计思路简单画图.png 滚动黄色的recycleV ...
android高仿京东秒杀,Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 android:layout_width="wrap_content" an ...
仿京东首页（静态html+css）
京东首页的头部和尾部代码 html代码: <!DOCTYPE> <html lang="en"><head><meta charset=& ...
浅谈京东静态html原理,京东首页前端架构设计.ppt
京东首页前端架构设计工程化 Windows可视化工具 * 工程化前端模块构建平台 * 总结 * QA * * JD.com JD.com JD.com JD.com JD.com JD.com J ...
[HTML+CSS] 仿京东首页项目实战
实现效果: 此项目要实现结构与样式相分离的设计思想样式文件的分类: 初始化css让浏览器风格统一,把常用的初始化语句放入base.css里面我们把一些公共的样式放入common.css里面(因为 ...

HTML+CSS静态项目--仿京东首页

HTML+CSS静态项目--仿京东首页相关推荐

最新文章

热门文章