京东Web+HTML+JSP+CSS期末大项目

# 京东仿写 ## 网站图标 ### 1). 使用ico图标 * 首先把favicon.ico 这个图标放到根目录下。 * 再html里面， head 之间 引入 代码。 ```html <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> ``` ### 2). 制作ico图标 我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。 方法步骤： * 首先把我们想要的切成图片。 * 要把图片转换为 ico 图标，我们借助于第三方转换网站： http://www.bitbug.net/。 比特虫 总结： ```html 代码： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> ``` 注意： 1. 它是显示在浏览器中的网页图标。 2. 它是图标形式，不是一个图片 3. 位置是放到 head 标签中间。 4. 后面的type="image/x-icon" 属性可以省略。（我相信你也愿意省略。） 5. 为了兼容性，请将favicon.ico 这个图标放到根目录下。 > 不知道为啥我放在根目录下的图标显示不出来， 我就直接扒了京东的引入方式就可以了。 ```css <link rel="shortcut icon" href="//www.jd.com/favicon.ico" type="image/x-icon"/> ``` ## 网页优化三大标签 #### 1). 网页title 标题 title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。 例如： 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站 ```css <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> ``` #### 2. Description 网站说明 对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。 ```css <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"> ``` #### 3. Keywords 关键字 Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。 ```css <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"> ``` > 我就全拷贝京东的了 ## 字体图标 我是使用的阿里妈妈的字体图标库 http://www.iconfont.cn/ 使用方法： （1）首先创建个项目，把要用到了所有字体图标都放到这个项目中  （2）我引入的方式是font-class 引用，这个引用方式是比较清晰明确的  （3）引入方式是在线引入，接下来皆可以直接使用了 ```css <link rel="stylesheet" href="//at.alicdn.com/t/font_2993785_vdcowftgoba.css"> ``` > 每次增加或编辑之后icon库一定要更新链接 ## 京东首页布局 #### 1). shortcut 制作 * 通栏的盒子 命名为shortcut 快捷导航的意思， 注意，这里给行高，可以继承给里面的子盒子。 * 里面包含 版心的盒子 * 版心盒子里面包含1号左侧盒子左浮动 * 版心盒子里面包含2号右侧盒子右浮动  #### 2). header制作 整个这一块是给大盒子相对定位，小盒子绝对定位 - logo > 用精灵图来做 - search > 大盒子不要给宽高，给小盒子宽高，把大盒子撑开，input和button之间有间隙，用浮动就可以将两者紧紧贴到一起了 - hotwords > 没有给li平分，而是让它们自动挤开 - shopcar > 这里涉及了一个定位的问题，绝对定位：将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 > > 商品数量是根据shopcar这个绝对定位的位置进行定位的。 - nav > 就是用li进行平铺 #### 3). fs制作 fs部分我是参考京东的命名方式写的，我也不知道为啥要叫fs，就是下面这个部分  这里布局一个分成3个部分fs_col1，fs_col2，fs_col3 先来说一个解决方案： 所有的排成块的样式都用ul和li，外层最大盒子div给出固定的宽高，然后ul继承div的宽高，li按照数量均分分割ul。然后在li中，a给属性block，占满整个li，最后a中按照具体的样式进行写。 > 注意：给li属性float，li会自动排开,如下图所示      基本上就都是这样写，还有精灵图的用法，要会使用。 > 边框线用after写法，隐藏文字三件套： > > /*1. 先强制一行内显示文本*/ > white-space: nowrap; > /*2. 超出的部分隐藏*/ > overflow: hidden; > /*3. 文字用省略号替代超出的部分*/ > text-overflow: ellipsis;