品优购

时间 2020-12-07

标签 css html json 浏览器 ide svg 布局字体优化网站栏目 CSS 繁體版

原文原文链接

首页

Classname命名规范

Classname命名规范，类名尽可能简短，首字母必需要小写，且单词之间用'_'表示

项目文件夹

项目文件夹：pinyougou
样式图片类文件夹：img
产品类图片文件夹 upload
字体文件夹 fonts
样式文件夹 CSS
js文件夹 js

样式文件的分类

初始化及原子类文件 base.css
    公共样式文件：commen.css

favicon图标

如何查看网站的favicon图标吗css

只须要在当前网站里输入/favicon.ico便可

网站优化三大标签

SEO:简称搜索引擎
常见的搜索引擎：谷歌雅虎百度搜狗
网站优化的三大标签：title Description keywords

title:网站标题

Description:网站内容

keywords：网站关键字

字体图标

字体图标的优势

跟图片同样能够改变透明度，旋转，而且支持全部的浏览器

字体图标的使用流程

下载兼容性字体包

经常使用的两大网站html

icomoon: icomoon.io/json

阿里巴巴矢量图www.iconfont.cn/浏览器

如何把字体引入html结构中

1.把fonts文件夹放在根目录中ide

2.在HTML中声明结构svg

3.在样式中声明字体布局

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

4.给盒子指定字体字体

span {
        font-family: "icomoon";
    }

如何追加新的字体图标

利用selection.json从新上传追加字体图标，从新下载字体包替换原来的字体包便可

难点

logo部分

logo里面放一个h1 目的是为了提权，告诉搜索引擎，这个地方很重要
h1里面放一个a标签，a标签的地址是首页的地址，而且要在a标签里面写上字，目的是为了让搜索引擎收录咱们

如何让a标签的字消失？
1.overflow:hidden text-indent:-99999px优化
２.font-size:0网站
移动到连接时，要显示文字。

html

<!-- logo部分 -->
            <div class="logo">
                <h1>
                    <a href="index.html" title="优品汇">优品汇</a>
                </h1>
            </div>

css

.header  .logo {
        position: absolute;
        left: 2px;
        top:25px;
        width: 172px;
        height:55px;
        background-color: blue;
 }
 .header .logo a {
    display: inline-block;
    width: 172px;
    height:55px;
    background: url("../img/logo.png") no-repeat;
    /* 让文字消失 */
    text-indent: -99999px;
    overflow: hidden;

 }

news部分

此处用到精灵图技术

下拉菜单

html

<!-- dropdown下拉菜单 -->
                <div class="dropdown fl">
                    <div class="dt">所有商品分类</div>
                    <div class="dd">
                        <ul>
                            <li class="memu_item">
                                <a href="#">家用电器</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="list.html">手机</a>
                                <a href="#">数码</a>
                                <a href="#">通讯</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">电脑</a>
                                <a href="#">办公</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">家具</a>
                                <a href="#">家居</a>
                                <a href="#">家装</a>
                                <a href="#">厨具</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">男装</a>
                                <a href="#">女装</a>
                                <a href="#">童装</a>
                                <a href="#">内衣</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">个性化妆</a>
                                <a href="#">清洁用品</a>
                                <a href="#">宠物</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">鞋靴</a>
                                <a href="#">箱包</a>
                                <a href="#">珠宝</a>
                                <a href="#">奢饰品</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">运动户外</a>
                                <a href="#">钟表</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">汽车</a>
                                <a href="#">汽车用品</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">母婴</a>
                                <a href="#">玩具乐器</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">食品</a>
                                <a href="#">酒类</a>
                                <a href="#">生鲜</a>
                                <a href="#">特产</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">医药保健</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">图书</a>
                                <a href="#">音箱</a>
                                <a href="#">电子书</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">彩票</a>
                                <a href="#">旅行</a>
                                <a href="#">充值</a>
                                <a href="#">票务</a>
                                <i></i>
                            </li>
                            <li class="memu_item">
                                <a href="#">理财</a>
                                <a href="#">众筹</a>
                                <a href="#">白条</a>
                                <a href="#">保险</a>
                                <i></i>
                            </li>
                        </ul>
                    </div>
                </div>

服务模块

此处用到精灵图技术

<div class="mod-server">
                    <ul class="clearfix">
                        <li>
                            <i class="mod-server-icon mod-server-zheng"></i>
                            <div class="mod-server-title">
                                <h5>正品保障</h5>
                                <p> 正品保障 提供发票</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-ji"></i>
                            <div class="mod-server-title">
                                <h5>急速物流</h5>
                                <p> 急速物流，急速送达</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-bao"></i>
                            <div class="mod-server-title">
                                <h5>无忧售后</h5>
                                <p> 7天无理由售后</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-te"></i>
                            <div class="mod-server-title">
                                <h5>特点服务</h5>
                                <p>私人订制家电服务</p>
                            </div>
                        </li>

                        <li>
                            <i class="mod-server-icon mod-server-bang"></i>
                            <div class="mod-server-title">
                                <h5>帮助中心</h5>
                                <p> 你的购物指南</p>
                            </div>
                        </li>

                    </ul>

                </div>
                <!-- mod-server end -->

详情页及注册页

面包屑导航

crumb_wrap 面包屑导航：由a组成

产品介绍模块

1号盒子为大盒子命名为 product_intro （产品介绍模块）不要给高度
2号盒子为预览包 preview_wrap 左浮动
3号盒子为产品详细模块 itemInfo_wrap 右浮动不要给高

产品细节模块

大盒子为product_detail模块不要给高度记得清除浮动
1号盒子aside侧边栏模块不要给高度左浮动
1号盒子detail详情模块不要给高度右浮动

aside 布局

1 号盒子命名为 tab_list 给高度就行了，里面放 ul 和 li 注意这是 tab栏切换布局
2 号盒子命名为 tab_con 里面还包含不少个ul.item 和上面的 tab_list 里面的li一一对应。

registerarea布局

主要使用lable标签 input span标签
完成注册使用的是submit按钮
注意表单域

进度条

html

<div class="progress">
        <div class="bar-in"></div>
 </div>

css

.sk_goods_progress .progress {
      display: inline-block;
      width: 130px;
      height: 12px;
      border: 1px solid #b1191a;
      border-radius: 6px;
      vertical-align: middle;
  }
  
  .progress .bar-in {
      width: 87%;
      height: 12px;
      background-color: #b1191a;
  }

源码：pan.baidu.com/s/1IqD9Glj2…