品优购学习心得

(1)引入网页图标favicon.ico (网页标签上的小logo,这里是品优购中的“品”，可以先从psd文件内切出背景色是透明的png图片，再在相关网站上将png文件转化成ico小图标)

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

（2）对于以下这样的情况

这个链接里面有很多字 所以每个链接不用给宽度 文字自己撑开，其中的小竖线可以用这样的写法:在每个文字之间又添加spacer这个盒子，两边距离用margin值

<ul>
	<li><a href="#">我的订单</a></li>
	<li class="spacer"></li>
	<li><a href="#">我的品优购</a><i class="icomoon"></i></li>
	<li class="spacer"></li>
	<li><a href="#">品优购会员</a></li>
	<li class="spacer"></li>
	<li><a href="#">企业采购</a></li>
	<li class="spacer"></li>
	<li><a href="#">关注品优购</a><i class="icomoon"></i></li>
	<li class="spacer"></li>
	<li><a href="#">客户服务</a><i class="icomoon"></i></li>
	<li class="spacer"></li>
	<li><a href="#">网站导航</a><i class="icomoon"></i></li>
</ul>

之后给每个spacer宽、高、背景色、外边距

}
.spacer {
	 1px;
	height: 12px;
	background-color: #666;
	margin: 9px 12px;
}

（3）对于每个网页左上角的大logo一半有一个统一的写法：

<!--logo-->
<div class="logo"><!--logo作为背景图片插入-->
	<h1>
		<a href="index.html" title="品优购">品优购</a><!--"品优购"等下要将这3个字隐藏起来-->
	</h1>
</div>

.logo {
	position: absolute;
	top: 25px;
	left: 0;
	 175px;
	height: 56px;
	
}
.logo a {
	display: block;
	/*overflow: hidden;*/
	 175px;
	height: 56px;/*a一定要给宽高 否则当font-size等于0的时候会导致鼠标定住后也看不见title*/
	background: url(../img/logo.png);
	/*text-indent: -999px;*/
	font-size: 0;

如上： 京东的做法是通过font-size: 0;将字隐藏起来。淘宝的做法是overflow: hidden;text-indent: -999px;将字隐藏起来。
注册页简写如下

<!--header部分-->
<div class="header">
	<div class="logo">
		<a href="index.html">
			<img src="img/logo.png">
		</a>
	</div>
</div>

还可以写的更简单，注册页怎么简单怎么写。
（4）对于链接，往往是ul里面放li，li里面再放a。
（5）面包屑导航部分的制作，用div里面放a就可以了

<!--面包屑导航-->
<div class="crumb_wrap">
	<a href="#">手机、数码、通讯</a>
	〉
	<a href="#">手机</a>
	〉
	<a href="#">Apple苹果</a>
	〉
	<a href="#">iphone 6S Plus系类</a>
</div>

（6）对于以样式

写法如下：两个a分别放左右箭头，ul里放5个图片

<div class="preview_list">
	<a href="#" class="arrow_pre"></a>
	<a href="#" class="arrow_next"></a>
	<ul class="list_item">
		<li>
			<img src="upload/pre.jpg">
		</li>
		<li class="current">
			<img src="upload/pre.jpg">
		</li>
		<li>
			<img src="upload/pre.jpg">
		</li>
		<li>
			<img src="upload/pre.jpg">
		</li>
		<li>
			<img src="upload/pre.jpg">
		</li>
	</ul>
</div>

将大盒子preview_list继承的宽度400px,写好之后装ul,注意利用margin: 0 auto;让ul在preview_list中居中对齐

.preview_list {
	position: relative;
	height: 60px;
	margin-top: 60px;
}
.list_item {
	 320px;
	height: 60px;
	margin: 0 auto;
}

(7)可以利用

border: 2px solid transparent;

可以在鼠标经过边框显色的时候，整体结构不会乱。
（8）父级盒子能给高度的大模块尽量给高度，这样就不用再清除其子级浮动带来的影响了。
（9）盒子的划分安装内容的意义划分。
（10）对于浮动产生的影响解析：

上图中：1号盒子和6号盒子是标准流。2、3号盒子是1号盒子的子盒子，2号盒子左浮动，3盒子右浮动。4号盒子、5号盒子是3号盒子的子盒子，他们是标准流。
1号盒子没有给高度，2、3、4、5号盒子给了高度，但4、5号盒子的高度之和比3号盒子多。就算1号盒子清除浮动带来的影响，6号盒子还是会挤到5号盒子的下面。
解决方法是取消3号盒子的高度，让4、5号盒子自然撑开3号盒子，这样6号盒子和5号盒子就不会有重叠的部分了。
综上所述：
若A盒子没给高度，那么A的实际高度由其最近一级的子盒子的高度决定，最近一级子盒子的高度就是A的高度。
若对A盒子清除浮动带来的影响，只可以保护A盒子高度范围的内容不会被下面标准流的内容挤到。
所以要确保A的所有子盒子都包含在A里面（A最好不给高度，让子盒子将其自然撑开），这样下面的标准流盒子才不会被挤到上面。
（11）两个嵌套的块级元素才会存在外边距合并的现象（注意关键词：块级元素），同时如果被嵌套的块级元素添加了浮动则也不会发生外边距合并的现象；如果父盒子浮动，子盒子是块级元素，也不会发生外边距合并的现象。
（12）当行内快元素没有添加浮动的时候vertical-align: middle;可以实现中线对齐，如果添加浮动之后就无法通过这句话实现中线对齐了。
（13）对于一下这样的情况

可以采用以下方式来进行结构的搭建

<div class="num">
	<div class="expansion">
		<div class="num_sub">-</div>
		<div class="count">1</div>
		<div class="num_add">+</div>
	</div>
</div>

先给最外边盒子一个宽度、高度、边框，然后分别给里面三个小盒子一个宽高和一个右边框。这会导致一个问题：外面的.num盒子装不下里面的三个小盒子，这个时候就需要一个.expansion盒子来进行扩容，可以将.expanison盒子设置的稍微大一点以足够放的下里面3个小盒子，之后，对.num盒子设置overflow：hidden即可。

.num {
	float: left;
	overflow: hidden;
	height: 28px;
	 95px;
	border: 1px solid #ddd;
	margin: 6px 0 0 96px;
}
.expansion {
	 100px;/*用于扩容*/
}
.count {
	float: left;
	 39px;
	height: 28px;
	border-right: 1px solid #ddd;
	text-align: center;
	line-height: 28px;
}
.num_add,
.num_sub {
	float: left;
	 27px;
	height: 28px;
	border-right: 1px solid #ddd;
	text-align: center;
	line-height: 28px;
}
.num_add {
	color: #c81623;
}

(14)对于一个标准流盒子A，嵌套一个浮动的盒子B，为B设置宽高之后，A盒子的高度依然是0，不会被内容撑开，这时若为A盒子添加背景色是看不出来的，因为A盒子的大小为0；为了让A的背景色显现出来可以为A盒子设置宽高或者化B盒子为标准流。