【黑马程序员济南】 前端与移动开发就业班笔记CSS进阶:Day01
京东网站前期准备工作
1.1 项目背景
∙ 现在电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，这里用京东电商网站总结，复习，提高前面所学布局技术。
1.2 设计目标
∙
保证浏览器 ie7及以上, 火狐, 360, safari，chrome等。
∙
∙
熟悉CSS+DIV布局，页面的搭建工作
∙
∙
了解常用电商类网站的布局模式
∙
∙
为后期京东移动端做铺垫
∙
1.3 设计思考几点
(1). 开发工具 webstorm 、fireworks（ps）、各种浏览器.
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
(2). CSS Rest 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化)
normalize.css 
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来
(3). 低版本浏览器 单独制作一个跳转页面
h5.m.jd/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html
1.4 目录说明
要实现结构和样式相分离的设计思想。 根目录下有这4个文件。
[td]
黑马程序员前端全套视频
名称
说明
css
css文件夹 CSS
images
图片文件夹
index
京东首页 HTML
js
javascript文件夹
2. 运用知识点2.1 基本css文件
我们需要准备一个基本的css文件，通常命名为 base.css. 里面用于存放初始化的 css 还有我们网站整体都会使用的css， 比如字号，字体颜，链接，以及版心宽度等等。
因为这个css文件，网站里面的很多页面都需要引用，因此， 这个css文件单独存放， 引入到html即可。
格式化代码： ctrl+ alt + L
2.2 引入ico图标
<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>   
注意：
∙ 引入的link代码一定只能放到head 标签之中
∙ 后面的type="image/x-icon" 属性可以省略。
∙ ico图标为了兼容性，我们放到根目录下。
2.3 网站优化三大标签
2.3.1 网页title 标题
title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
建议：
首页标题：网站名（产品名）- 网站的介绍
例如：京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本
2.3.2 Description 网站说明
对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述
部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。 我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
∙ 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。
∙ 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
∙ 补充在 title 和 keywords 中未能充分表述的说明.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。