前端京东案例总体思路

京东案例

1.1 截图  （要一个效果图）

 

1.2 搭建项目环境     (结构样式行为分离)

一、HTML 核心文件     index.html

二、CSS       控制样式     

a）base.css(基础样式)       b）global.css(全局样式)

三、Image      放图片的文件夹

四、JS     音频视频.....

1.3 站点

站点 == 项目 == 项目文件夹 == （根目录）

 

1.4 引入图标

一、下载

        京东：www.jd.com/favicon.ico           能下载京东图标

        所有：网站名（带www.）/favicon.ico    下载所有网站的图标

二、引入

<link rel="shortcut icon" href="favicon.ico"/>

网站名：bitbug.net      

  <link rel="shortcut icon" href=" /favicon.ico" />     绿色部分删掉

1.5 小知识

font :  加粗  字号/行高  格式；    行高如果不写，默认为0；

 

u   ins     下划线

i   em      倾斜

s   del      删除线

 

font-weight:  normal;         加粗变正常

font-style:  normal;           倾斜变正常

text-decoration: none;         下划线删除线变正常

outline-style: none;           去除蓝色外边框

resize:  none;               禁止文本框拖拽

1.6 京东结构布局

 

 

1.7 权限问题

 

1.8 盒子稳定性

一、只给宽高的盒子（宽/高度剩余法）

二、给padding的盒子

三、给margin的盒子

1.9 量取盒子高度

 

1.10 模拟鼠标

cursor: pointer;           鼠标变成小手

cursor: move;            鼠标变成四角箭头

cursor: text;             鼠标变成工形插入条光标

cursor: default;           鼠标变成小白

1.11 文字居中问题

1.text-align: center;

2.padding-left/padding-right;

3.定位、margin.......