品优购案例练习(一)

环境搭建

.base.css

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}

/* em和i斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li 的小圆点 */
li {
    list-style: none;
}

img {
    /* border 0 照顾低版本的浏览器，如果图片外面包含了连接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}
button {
    /* 当我们鼠标经过button按钮的时候，鼠标变成小手 */
    cursor: pointer;
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #c81623;
}
input,
button {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0;
    /* 去掉轮廓线 */
    outline: none;
}
body {
    /* css3抗锯齿 让文字显示的更清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

common.css

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;

}

.fr {
    float: right;
}

.style_red {
    color: #c81623;

}

favicon图标制作和引入

取“品”字png格式到http://www.bitbug.net/制作ico图标,将其放在项目根目录

引入：

	<!-- 引入favicon -->
    <link rel="shortcut icon" href=" favicon.ico" />

TDK三大标签SEO优化

    <meta name="description"content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    <meta name="Keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"/>
    <title>品优购-正品低价、品质保障、配送及时、轻松购物！</title>

快捷导航shortcut

在这里插入图片描述

右侧盒子中竖线是通过给li实现，三角形是字体图标是字体图标，这里是通过伪类加的
- 引入fonts文件
- 在common.css中

/* 声明字体图标 注意路径变化*/
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?tomleg') format('truetype'),
        url('../fonts/icomoon.woff?tomleg') format('woff'),
        url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.shortcut .arrow-icon::after {
    /* 注意加 \ 转意 */
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

shortcut模块完整css

/* 快捷导航模块 */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
    float: left;
}

.shortcut fr ul {
    float: left;
}

.shortcut .fr ul li:nth-child(2n) {
    width: 1px;
    height: 12px;
    text-align: center;
    background-color: #666;
    margin: 9px 15px 0;
}

.shortcut .arrow-icon::after {
    /* 注意加 \ 转意 */
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
    />
    <meta
      name="Keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"
    />
    <title>品优购-正品低价、品质保障、配送及时、轻松购物！</title>

    <!-- 引入favicon -->
    <link rel="shortcut icon" href=" favicon.ico" />

    <!-- 引入初始化文件 -->
    <link rel="stylesheet" href="./css/base.css" />

    <!-- 引入公共样式文件 -->
    <link rel="stylesheet" href="./css/common.css" />
  </head>

  <body>
    <section class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>品优购欢迎您！&nbsp;</li>
            <li>
              <a href="#">请登录</a>&nbsp;
              <a href="#" class="style_red">免费注册</a>
            </li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li>我的订单</li>
            <li></li>
            <li class="arrow-icon">我的品优购</li>
            <li></li>
            <li>品优购会员</li>
            <li></li>
            <li>企业采购</li>
            <li></li>
            <li class="arrow-icon">关注品优购</li>
            <li></li>
            <li class="arrow-icon">客户服务</li>
            <li></li>
            <li>网站导航</li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>

header模块

在这里插入图片描述

分四个模块通过定位放置

logo SEO优化

1.logo面首先放一个h1标签，目的是为了提权，告诉搜索引擎,这个地方很重要。

2 h1 里面再放一个销接,可以返回首页的，把logo的背景图片给链按即可.

3.为了投索引学收灵我们,我们接中面要放文字(网站名称) ,但是文字不要显示出来。
方法1 : text-indent移到盒子外面( text-indent: -9999px) ,然后overflow:hidden , 淘宝的做法。
方法2 :直接给font-size:0;就看不到文字了,京东的做法。

4.后给链接-个title 属性,这样鼠标放到logo上就可以看到提示文字了。

search模块

做一个大的div盒子，然后将输入框去掉边框放入其中

shortcut模块

count统计部分用绝对定位做
count统计部分不要给宽度,因为可能买的件数比较多,让件数撑开就好了,给个度
一定注意左下角不是圆角,其余三个题角写法: border-radius: 7px 7px 7px 0;

header css

/* header star */
.header {
    position: relative;
    height: 105px;
}

.header .logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
}

.header .logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url("../images/logo.png") no-repeat;
    /* 方法一 */
    /* text-indent: -9999px;
    overflow: hidden; */

    /* 方法二 */
    font-size: 0;
}

.header .search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #B1191A;

}

.header .search input {
    width: 454px;
    height: 32px;
    padding-left: 10px;
}

.header .search button {
    width: 80px;
    height: 32px;
    background-color: #B1191A;
    color: #fff;
    font-size: 16px;
}

.header .hotwrods {
    position: absolute;
    top: 69px;
    left: 346px;
}


.header .hotwrods a {
    margin: 0 10px;
}

.header .shopcar {
    position: absolute;
    right: 60px;
    top: 35px;
    width: 140px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.header .shopcar::before {
    font-family: 'icomoon';
    content: "\e93a";
    color: #D95151;
    margin-right: 5px;
}

.header .shopcar::after {
    font-family: 'icomoon';
    content: "\e920";
    margin-left: 10px;
}

.header .shopcar .count {
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    border-radius: 7px 7px 7px 0;
    background-color: #D95151;
    padding: 0 5px;
}

header html

<!-- 头部模块 header star -->
    <header class="header w">
      <!-- logo 模块制作 -->
      <div class="logo">
        <h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
      </div>

      <!-- search制作 -->
      <div class="search">
        <input type="search" name="" id="" placeholder="语言开发" /><button>
          搜索
        </button>
      </div>

      <!-- hotwrods 模块制作 -->
      <div class="hotwrods">
        <a href="#" class="style_red">优惠购首发</a>
        <a href="#">亿元优惠</a>
        <a href="#">9.9元团购</a>
        <a href="#">满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
      </div>

      <!-- shopcar 模块制作 -->
      <div class="shopcar">
        我的购物车
        <i class="count">8</i>
      </div>
    </header>
    <!-- 头部模块 header end -->

nav模块

在这里插入图片描述

分两块制作，左边这块要考虑下面布局

nav.css

/* nav star */
.nav {
    height: 47px;
    border-bottom: 2px solid #D95151;
}

.nav .dropdown {
    width: 210px;
    height: 45px;
    background-color: #B1191A;
}

.nav .dropdown .dt {
    width: 100%;
    height: 100%;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.nav .dropdown .dd {
    width: 210px;
    height: 465px;
    background-color: #C81623;
    margin-top: 2px;
}

.nav .dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}

.nav .dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 7px;
    content: '\e920';
    font-family: 'icomoon';
    font-size: 14px;
    color: #fff;

}

.nav .dropdown .dd ul li:hover {
    background-color: #fff;
}

.nav .dropdown .dd ul li:hover a {
    color: #C81623;

}

.nav .dropdown .dd ul li a {
    color: #fff;
    font-size: 14px;

}

.nav .navitems ul li {
    float: left;
}

.nav .navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}

.nav .navitems ul li a:hover {
    color: #C81623;
}

index.html

<!-- nav star -->
    <nav class="nav">
      <div class="w">
        <div class="dropdown fl">
          <div class="dt">全部商品分类</div>
          <div class="dd">
            <ul>
              <li><a href="#">家用电器</a></li>
              <li>
                <a href="#">手机 、</a> <a href="#">数码、</a>
                <a href="#">通信</a>
              </li>

              <li>
                <a href="#">家居、</a> <a href="#">家具、</a>
                <a href="#">家装、</a><a href="#"> 厨具</a>
              </li>
              <li>
                <a href="#">男装、</a> <a href="#">女装、</a>
                <a href="#">童装、</a> <a href="#">内衣</a>
              </li>
              <li>
                <a href="#">个户化妆、</a> <a href="#">清洁用品、</a>
                <a href="#">宠物</a>
              </li>
              <li>
                <a href="#">鞋靴、</a> <a href="#">箱包、</a>
                <a href="#">珠宝、</a> <a href="#">奢侈品</a>
              </li>
              <li><a href="#">运动户外、</a> <a href="#">钟表</a></li>
              <li><a href="#">汽车、</a> <a href="#">汽车用品</a></li>
              <li><a href="#">母婴、</a><a href="#">玩具乐器</a></li>
              <li>
                <a href="#">食品、</a><a href="#">酒类、</a>
                <a href="#">生鲜、</a> <a href="#">特产</a>
              </li>
              <li><a href="#">医药保健</a></li>
              <li>
                <a href="#">图书、</a> <a href="#">音像、</a>
                <a href="#">电子书</a>
              </li>
              <li>
                <a href="#">彩票、</a> <a href="#">旅行、</a>
                <a href="#">充值、</a> <a href="#">票务</a>
              </li>
              <li>
                <a href="#">理财、</a><a href="#">众筹、</a>
                <a href="#">白条、</a><a href="#">保险</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="navitems fl">
          <ul>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">服装城城</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">服装城</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- nav end -->

效果图：
在这里插入图片描述

品优购案例练习(一)

环境搭建

favicon图标制作和引入

TDK三大标签SEO优化

快捷导航shortcut

header模块

nav模块

猜你喜欢