【pinyougou】

一、前期准备

1、文件夹

目录文件夹：

项目文件夹：pinyougou、

样式类图片文件夹：img

产品类图片文件夹(后台可上传的图片）： upload

样式文件夹: css

字体类文件夹： fonts

脚本文件夹：js

样式文件的分类：

初始化css（css reset），让浏览器风格统一，把常用的初始化语句放入base css中

如京东网站的base.css

/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}
/*隐藏元素*/
.hide,
.none {
    display: none;
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

一些公共的样式放入common.css里

2、网站ico图标

取京东网站title中的小图标：https://www.jd.com/favicon.ico放到工程根目录，再在head中引用此图标：

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

自己制作favicon.ico

先找好或切出要用的图片，如ico.png，再用在线制作icon图标的网站，转换成favicon.ico

http://www.bitbug.net

用的较多的目标尺寸：16*16、32*32、48*48

3、网站优化三大标签

SEO(Search Engine Optimization)搜索引擎优化

SEO是通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化、站外优化等，从而提升网站的关键词排名以及公司产品的曝光度。

现阶段主要进行站内优化，网站优化

三大标签：title、description、keywords

title：建议网站名（产品名）-网站介绍

如：品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物

小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站

4、字体图标

（1）优点：大小、颜色、透明度、阴影都能修改，几乎支持所有浏览器，移动端设备的良药，体积小，减少服务器请求次数

（2）字体图标使用流程：

①ui人员设计字体图标效果、②前端人员上传生成兼容性文字文件包；③下载兼容字体包到本地；④字体包引入到HTML页面中

生成兼容文字文件包网站推荐：①http://icomoon.io ②阿里 http://www.iconfont.cn 

（3）字体图标的引入

① 从icomoon下载下来的字体包

② 将fonts放到工程根目录下

③ 复制字体包中demo.html中要用的图标到HTML结构中

 

④ head中声明icomoon字体

@font-face{  /*声明字体 引用字体*/
	    font-family:'icomoon';
	    src:url('fonts/icomoon.eot');
	    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
	    url('fonts/icomoon.woff') format('woff'),
	    url('fonts/icomoon.ttf')  format('truetype'),
	    url('fonts/icomoon.svg#SofiaProLight')  format('svg');
	    font-weight:normal;
	    font-style:normal;
        }

⑤ css给元素引用字体，设置字体属性

span {
		font-family: 'icomoon';
		font-size: 50px;
		color: red;
	}

最终效果：

（4）追加字体图标

再次进入icomoon网站，点击import icons，选择之前的下载的字体包中的selection.json文件，再选择新需要追加的图标，下载新的字体包，替换fonts文件夹即可

二、网页头部

1、命名集合

快捷导航栏-shortcut  头部-header  标志-logo  购物车-shopcar  搜索-search  热点词-hotwords

导航-nav   导航左侧-dorpdown(包含.dd  .dt)   导航右侧-navitems

[复习]：margin/padding四种写法

方法一、

margin:10px;　　//4个外边距都是10px

方法二、

margin:10px 20px;　　//上下外边距10px，左右外边距20px

方法三、

margin:10px 20px 30px;　　//上外边距10px，左右外边距20px，下边距30px

方法四、

margin:10px 20px 30px 40px;　　//上外边距10px，右外边距20px，下外边距30px，左外边距40px

]

[复习]：垂直居中

line-height=height垂直居中、line-height>height偏下、line-height<height偏上]

2、logo优化

① logo里首先要放一个h1标签，目的是为了提高权重，告诉搜索引擎这个地方很重要

② h1里面放一个链接，给链接一个大型和logo的背景图片

③ 链接里面要放文字，但是文字不要显示出来,实现此效果的两种方法：

方法1（淘宝用的）：要用text-indent(文本块中首行文本的缩进) 移动到盒子外面（text-indent:-9999px）然后overflow:hidden;

方法2（京东用的）：直接设置文字的大小为0，font-size: 0px; 文字就看不到了

④ 最后给链接一个title，这样鼠标放到logo上，就可以看到提示文字了

[复习]：圆角

①四个角数值相同 border-radius:15px;

②数值不同，可以简写  border-radius:左上角 右上角 右下角 左下角

③为四个角分别设置圆度

border-top-left-radius     border-top-right-radius      border-bottom-right-radius     border-bottom-left-radius

三、网页底部footer部分

3个模块：服务模块mod_service、帮助模块mod_help、版权模板mod_copyright

四、主体模块部分main

1、产品类的图片切图一般导出jpg格式，网页焦点轮播图一般比较固定的结构ul>li>a>img这样放图片

[复习]：透明度 background: rgba(0, 0, 0, .3);

[复习]：鼠标经过变成小手 cursor: pointer;

项目分块main：

focus[arrow_l、arrow_r、焦点图片、circle]、newsflash[news、lifeservice、bargain]

[复习]：解决以下情况的方法：

lifeservice的宽度为其父元素的宽度250px;

.lifeservice {
	height: 208px;
	border: 1px solid #ccc;
	border-top: none;
	overflow: hidden;
}
.lifeservice ul {
	width: 252px;
}
.lifeservice li {
	float: left;
	width: 62px;
	height: 70px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/*因为四个li的宽度大于父元素的宽度，第四个li被挤到了下一行，
    可以将父元素宽度设置大于四个Li的宽度，在将父元素的父元素设置溢出隐藏*/

[复习：] 外边距塌陷问题解决

下面的结构是ul>li>a>i+p  因为a被转换为块级元素，a里的i也是块级元素，给了i元素margin-top，引起了外边距合并/塌陷的问题，把a一起带了下来，如下图（左），解决此问题的方法之一：给a添加overflow:hidden;属性，添加后显示正常，如图（右）：

（还可以给a加padding或bodder的方式解决）

[复习] ：网页固定侧边栏

position:fixed;

left: 50%; (先到浏览器的中间）
margin-left: -666px;  (再向左移版心（1200）的一半+自身宽度）
width: 66px;（自身宽度）

四、知识点-过渡（css3）

transition可以在不使用flash或js情况下，当元素从一种样式变为另一种样式时为元素添加效果

过渡动画：是从一个状态渐渐过渡到另一个状态（ie9以下的版本不支持），经常和hover一起搭配使用

语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始

transition: width 1s ease 1s,height 1s ease 1s;

花费时间要带单位秒或毫秒

运动曲线：linear、ease逐渐慢下来（默认）、ease-in加速、ease-out减速、ease-in-out先加速后减速

何时开始：默认是鼠标触发就开始，些几秒延迟几秒

	<style>
		div {
			width: 400px;
			height: 150px;
			background-color: #ccc;
			/*transition: 要过渡的属性 花费时间(单位s) 运动曲线 何时开始*/
			/*transition: width 1s ease 1s,height 1s ease 1s,background-color 1s ease 1s;*/
			/*简写*/
			/*transition: all 1s ease 1s;*/
			/*最常用的简写，注意transition要写在本身的样式里，而不是hover里*/
			transition: all 1s;
		}
		div:hover {
			width: 1200px;
			height: 1200px;
			background-color: pink;
		}
	</style>

[复习] ：

① 垂直居中,有inline-block的地方，一般用vertical-align:middle;垂直居中

② width宽度100%，元素加了定位后要写上，不加定位的时候不写默认是父元素的宽度

③ 元素加了定位position后，不用display:block;转换，可以直接给元素设置宽高

④ 父元素没给高度，子元素加了浮动，父元素后面再添加的内容会引起浮动问题，需要父元素清除浮动

⑤ sk_bd没有给高度，子元素li加了float:left;，后的footer部分收了浮动的影响，需要给sk_bd加清除浮动类class="clearfix"

或者给sk_bd添加overflow:hidden;属性都可起到清除浮动作用：

<div class="sk_bd clearfix">

/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

⑥ 一行中多个子元素宽度大于版心，最后一个盒子被挤下的问题解决：

/*版心宽度是1200，给ul设置1208是因为ul中的li宽度*4+左右边框*4+margin-right*4后总和大于1200，装不下，最后
一个li被挤下去了，解决此问题，可以给li的父元素ul加宽一些，可解决*/
/*li宽度288*4+边框2*4+右外边距12*4=1208*/

⑦ 想使一个大盒子中每个盒子都统一text-align:center;居中对齐，可以把盒子内的每个元素都用行内块、行内元素

五、知识点，焦点:focus;

.page_skip input{
	width: 46px;
	height: 36px;
	border: 1px solid #ccc;
	text-align: center;
	transition: all 0.5s;
}
.page_skip input:focus {
	width: 88px;
	border: 1px solid skyblue;
}

[复习] ：不换行超出的文字省略号显示

/*一行内显示*/
white-space: nowrap;
/*溢出隐藏*/
overflow: hidden;
/*省略号显示*/
text-overflow: ellipsis;