品优购学习心得

(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 {
    width: 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;
    width: 175px;
    height: 56px;
    
}
.logo a {
    display: block;
    /*overflow: hidden;*/
    width: 175px;
    height: 56px;
    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 {
    width: 320px;
    height: 60px;
    margin: 0 auto;
}

(7)可以利用

border: 2px solid transparent;

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

猜你喜欢