CSS学习记录8-品优购

最新推荐文章于 2024-04-27 09:00:16 发布

m0_46973957

最新推荐文章于 2024-04-27 09:00:16 发布

阅读量805

点赞数 12

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_46973957/article/details/135446850

版权

1 品优购搭建准备

1.1 在根目录中创建如下几个文件夹

imges-样式内图片文件夹

css-样式文件夹

upload-产品类图片文件夹（区分与imges文件夹的不同）

fonts字体类文件夹

js脚本文件夹（目前未涉及）

1.2 创建文件

（1）index.html，存放于根目录下。

（2）base.css，存放于css文件夹中。注：有些网站不太提倡 * { margin: 0; padding: 0;}，因虽然代码简单，但是执行复杂，例如新浪为 html,body,ul,li,ol,dl,dd,dt,p,h1,,h6,form,img{margin: 0; padding: 0;}。这里我们还是写成*{ margin: 0; padding: 0;}，但要添加一行代码，如下所示。

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

最后，在index.html引入初始化样式文件。

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

1.3 模块化开发

将一个项目按照功能划分，一个功能一个模块，互不干扰。模块化开发具有重复使用、修改方便等优点。这里最典型的应用就是 common.css公共样式。里面可包括首页、列表页、详情页。还可包括版心宽度、清除浮动、页面文字颜色等公共样式。

在css文件夹下建立common.css，再在index.html引入公共样式文件。

1.4 网站 favicon图标

favicon.ico一般作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

例如：

（1）制作favicon图标

（2）将favicon图标放入根目录中

（3）HTML页面引入favicon图标。在HTML页面里面的<head></head>标签中引入代码。

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

1.5 网站TDK三大标签SEO优化

（1）title 网站标题

title具有不可替代性，是我们内页的第一个重要标签，非常非常重要。

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

例如：

所以我们将title名称改为：

<title>品优购商城-综合网购首选-正品低价格、品质保障、配送及时、轻松购物!</title>

（2）description 网站说明

简要说明我们网站是做什么的。

<!-- 网站说明 description -->
<meta name="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!">

（3）keywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。注：关键词用英文逗号隔开。

<!-- keywords 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,相机,数码,手表,手环,蓝牙">

2 品优购首页制作

2.1 常用模块类名命名

2.2 快捷导航 shortcut 制作

2.2.1 框架

2.2.2 左盒子

代码：

/*html*/
<div class="fl">
    <ul>
        <li>品优购欢迎您！&nbsp;</li>
        <li><a href="#">请登录</a>&nbsp;<a href="#" class="style_red">免费注册</a></li>
    </ul>
</div>

//css
/* 左浮动右浮动缩写 */
.fl {
    float: left;
}

.fr {
    float: right;
}

/* 网站主题红 */
.style_red {
    color: #c81623;
}

/* shortcut快捷导航模块 */
.shortcut {
    height: 31px;
    /* 行高可以继承，所以给父盒子添加 */
    line-height: 31px;
    background-color: #f1f1f1;
}

/* 左右侧的小li都在自己的父盒子里左浮动 */
.shortcut ul li {
    float: left;
}

  空格的转义符

2.2.3 右盒子

//html
<div class="fr">
    <ul>
        <li>我的订单</li>
        <li></li>
        <li>我的品优购</li>
        <li></li>
        <li>品优购会员</li>
        <li></li>
        <li>企业采购</li>
        <li></li>
        <li>关注品优购</li>
        <li></li>
        <li>客户服务</li>
        <li></li>
        <li>网站导航</li>
    </ul>
</div>

//css
/* 右侧所有偶数的li */
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    /* 小竖线离上侧为9px,左右15px,下侧可添加可不添加 */
    margin: 9px 15px 0px;
}

2.2.4 字体图标的添加

一般采用after伪元素法

（1）在需要的盒子中添加类名，局部图如下

（2）在css中给li盒子添加after伪元素，并写上content(内容不能为空)

（3）将demo.html 中的字体图标复制到content中

（4）将font文件夹复制到根目录下

（5）将style.css中的@font-face段内容复制到 common.css 中

（6）更改url路径，因为此时的fonts文件夹和common.css不并列。

（7）将申明的字体 font-family: 'icomoon'; 加到after伪元素中，即可完成。

2.3 Header制作

2.3.1 框架

2.3.2 header盒子

//html
    <header class="header w">
    </header>

//css
.header {
    height: 105px;
    background-color: pink;
}

2.3.3 logo盒子

logo seo优化：

代码：

//html
        <!-- logo模块 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>

//css
.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    background-color: skyblue;
}

/* 给logo里面的a添加图片背景，并隐藏a里的文字 */
.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;

    /* 隐藏a的文字-京东做法 */
    font-size: 0;

    /* 隐藏a的文字-淘宝做法 */
    text-indent: -9999px;
    overflow: hidden;
}

注意：

1、logo盒子采用定位的方法。

2、a要转换成块级元素，并且为了隐藏a内的文字，有两种做法。

效果图：

2.3.4 search盒子

框架：div.search (input+button)

//html
        <!-- search模块 -->
        <div class="search">
            <input type="search" placeholder="语言开发">
            <button>搜索</button>
        </div>

//common.css
.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

.search input {
    float: left;
    width: 454px;
    height: 32px;
    /* 让placeholder里的文字有内边距 */
    padding-left: 10px;
}

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

//base.css
button,
input {
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0;
    outline: none;
}

注意：

‘

因为iuput、button属于行内块元素，之间有间隙，为了删除间隙，给两个盒子加浮动float:left;即可

2.3.5 hotwords盒子

框架：div.hotwords(a*7)

//html     
        <!-- hotwords模块 -->
        <div class="hotwords">
            <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>

//css
.hotwords {
    position: absolute;
    top: 69px;
    left: 346px;
}

.hotwords a {
    margin: 0 12px;
}

注意：1、a虽然是行内元素，但是可以用margin来设置左右边距。

2、第一个a采用了调用的思想，调用了字体颜色。

2.3.6 shopcar盒子

框架：div.shopcar(before+after伪元素)

//html       
        <!-- shopcar模块 -->
        <div class="shopcar">我的购物车</div>
//css
.shopcar {
    position: absolute;
    top: 25px;
    right: 65px;
    width: 140px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #f7f7f7;
    border: solid 1px #dfdfdf;
}

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

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

注意：1、添加伪元素，html结构特别简介

2、text-align: center;可以让盒子里自带的文字垂直居中对齐。不要老想着margin, margin一般是同标签之间为了间隙才设置的。

3、伪元素里第一件事就是写content, 然后再调用已申明好的font-family;

额外的统计部分：

说明：

//html
        <!-- shopcar模块 -->
        <div class="shopcar">我的购物车
            <i class="count">8</i>
        </div>
//css
.shopcar .count {
    position: absolute;
    top: -5px;
    /* right: 20px; */
    left: 105px;
    /* width: 16px; 宽度不设置，用padding撑开 */
    padding: 0 5px;
    height: 14px;
    line-height: 14px;
    background-color: #e60012;
    border-radius: 7px 7px 7px 0;
    font-size: 12px;
    color: #fefefe;
}

注意：

1、i会继承父盒子shopcar里的行高 line-height=36px, 所以8会掉下来。再自己补一条 line-height: 14px;

2、如果购物车超出了一定范围，会如下显示。因为是绝对定位用的是right，所以改成left定位。

$\rightarrow \Rightarrow$

2.4 nav制作

2.4.1 框架

2.4.2 nav盒子

//html
 <nav class="nav">
    </nav>

//css
.nav {
    height: 45px;
    border-bottom: 2px solid #b1191a;
}

nav盒子是个通栏！！注意此模块与上一个header模块的构成，如下对比

//header模块中同时调用.header .w
<header class="header w">
</header>

//nav模块将w单独作为一个版心盒子
 <nav class="nav">
        <div class="w">
        </div>
 </nav>

2.4.3 dropdown盒子

框架：

代码：

//html
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">商品详细分类</div>
            </div>

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

.dropdown .dd {
    width: 100%;
    height: 465px;
    background-color: #c81623;
}

完整代码：

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

.dropdown .dd {
    width: 100%;
    height: 465px;
    background-color: #c81623;
}

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

.dropdown .dd ul li::after {
    content: '\e920';
    float: right;
    margin-right: 6px;
    font-family: 'icomoon';
    font-size: 14px;
    color: #fff;
}

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

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

.dropdown .dd ul li:hover a {
    color: #c81623;
}

.dropdown .dd ul li:hover::after {
    color: #c81623;
}

注意：1、a最好不要转换成块级元素，因为1个li里有很多个a

2、>伪元素可以用浮动，也可以用绝对定位。

2.4.4 navitems盒子

框架：div.navitems(a-block+float)) 或者 div.navitems(a-inline block)) 或者 div.navitems> ul >li >a,(a与li一样高)

技巧：不设置宽，用padding撑开。

//html
            <div class="navitems">
                <a href="#">服装城</a>
                <a href="#">美妆馆</a>
                <a href="#">传智超市</a>
                <a href="#">全球购</a>
                <a href="#">闪购</a>
                <a href="#">团购</a>
                <a href="#">拍卖</a>
                <a href="#">有趣</a>
            </div>
//css
.navitems {
    margin-left: 15px;
}

.navitems a {
    float: left;
    display: block;
    padding: 0 24px;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    color: #333333;
}

注意：1、a不浮动，转换成行内块元素也可以

2、为什么a要与li同高宽，因为可以使得触发范围变大。

2.5 底部 bottom制作

为了方便制作，先把dropdown里的dd模块给隐藏，display:none;

2.5.1 框架

3个大div

2.5.2 div.mod_service盒子

框架：ul(不设置) li(img + h2 + p)，这里的li盒子很小，刚好够放这3个

原视频做法：li(h5存图盒子 + div(h4+p))，这里的li设计得较大，而且图片用的精灵图。

<ul>
  <li class="fl">
      <img src="images/bottom1.png" alt="" class="fl">
      <h2 class="fl">正品保障</h2>
      <p class="fl">正品保障，提供发票</p>
  </li>
<\ul>

.mod_service ul li {
    width: 163px;
    height: 49px;
    background-color: pink;
    margin: 0 39px;
}

.mod_service ul li h2 {
    padding-left: 5px;
    padding-top: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
}

.mod_service ul li p {
    padding-left: 5px;
    color: #666666;
    font-size: 12px;
}

2.5.3 mod_help盒子

框架：

           <div class="mod_help">
                <dl class="fl">
                    <dt><a href="#">购物指南</a></dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
            </div>

.mod_help {
    height: 189px;
    padding: 21px 0 0 52px;
    border-bottom: 1px solid #ccc;
}

.mod_help dl {
    width: 200px;
    height: 100%;
}

.mod_help dl:last-child {
    width: 95px;
    text-align: center;
}

.mod_help dl dt {
    font-size: 16px;
    color: #333333;
    padding-bottom: 5px;
}

.mod_help dl dd {
    font-family: 'SimSun';
    font-size: 12px;
    color: #666666;
}

2.5.4 mod_copyright盒子

框架：2个div盒子放文字

            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> |
                    <a href="#">联系我们</a> |
                    <a href="#">联系客服</a> |
                    <a href="#">商家入驻</a> |
                    <a href="#">营销中心</a> |
                    <a href="#">手机品优购</a> |
                    <a href="#">友情链接</a> |
                    <a href="#">销售联盟</a> |
                    <a href="#">品优购社区</a> |
                    <a href="#">品优购公益</a> |
                    <a href="#">English Site</a> |
                    <a href="#">Contact Us</a> |
                </div>
                <div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
                    zhanghj+itcast.cnbr <br>
                    京ICP备08001421号京公网安备110108007702</div>

.mod_copyright {
    text-align: center;
    padding-top: 20px;
}

.mod_copyright .links {
    margin-bottom: 10px;
}

.mod_copyright .links a {
    margin: 0 4px;
}

.mod_copyright .copyright {
    line-height: 20px;
}