b站pink老师前端课程、品优购项目（跟着练的笔记+代码）

最新推荐文章于 2024-06-12 10:48:49 发布
最新推荐文章于 2024-06-12 10:48:49 发布
阅读量6.3k 收藏 71
点赞数 4
分类专栏： CSS初学 HTML5初学 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45727991/article/details/110305918
版权

02、网站制作流程

1、在这里插入图片描述

03、品优购项目规划

04、项目搭建

在这里插入图片描述
在这里插入图片描述

05、样式的模块化开发

在这里插入图片描述

06、favicon图标制作

favicon.ico一般用于作为略缩图的网站标志，它显示在浏览器的地址栏或者标签上。
1、制作png图片
2、转换为ico图标（第三方软件eg：bitbug）
3、必须！！！放在文件根目录下（常识）
4、html页面引入favicon图标：在html的head标签内引入代码

<link rel="shortcut icon" href="facvicon.ico">

07、TDK三大标签SEO优化

TDK标签由前端人员准备，但是内容由SEO提供
1、SEO汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
2、SEO的目的是对网站进行深度的优化，从而帮助往回走哪获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

3、页面必须有三个标签来符合SEO优化在这里插入图片描述
①title网站标签，具有不可替代性，是我们内页的第一个重要的标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
！！！建议：网站名-网站的介绍（尽量不超30字）
②description 网站说明：简要说明我们的网站是做什么的，提倡“我们是…”“我们提供…”“…网作为…”等等（这个工作一般不是前端的，但是前端要把这段字加载html里面）
③关键字（keyword）：在这里插入图片描述

08、品优购首页-快捷导航shortcut结构搭建

1、确定版心（1200px）

2、常用模块类名的命名：
在这里插入图片描述
3、头部导航栏的eg：
在这里插入图片描述

09、快捷导航左侧制作（fl）

在这里插入图片描述
用ul+li来制作

10、快捷导航左侧制作（fr）

在这里插入图片描述
文字、竖线|都要有单独的li来包装（共13个li）

11、快捷导航栏右侧字体图标

利用after伪元素制作小三角

12、header头部模块搭建

在这里插入图片描述

关键方法：定位！！！

13、14、logo的SEO优化

1、logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2、h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
3、为了让搜索引擎收录我们，我们在链接里面要放文字（网站名称），但是文字不要显示出来
隐藏文字的两个方法：
在这里插入图片描述
4、最后给链接加一个title属性，这样鼠标放到logo上就可以看到提示文字了

15、16、制作search搜索模块

在这里插入图片描述

17、hotwords热词模块

一个div里面装7个a链接即可

18、shopcar购物车模块

在这里插入图片描述
一个div盒子
before伪元素插入购物车
after伪元素插入小三角

19、count购物车统计模块

在这里插入图片描述

20、nav导航模块搭建

在这里插入图片描述

21、dropdown盒子制作（难点）

在这里插入图片描述

22、23、导航详细分类制作

div-ul-li-a的格式，其中每一个链接a都由li标签来包装，设置宽高、背景时修改li，而设置文字时才用a标签，小三角用定位（子绝父相）+after标签
在这里插入图片描述

24、右侧navitems的制作

用div-ul-li-a（要把a的范围调大一些，这样方便鼠标移动和点击，增加用户的体验）
在这里插入图片描述

25、fotter底部模块搭建

先不要着急着做内容，那些不应该在common的CSS文件中，common文件是用来制作通用的样式设置的！！！
因此接下来应该先制作fotter底部模块
1、footer页面底部盒子通栏给一个高度和灰色的背景
里面包含三个子盒子
在这里插入图片描述

26、27、1号盒子-mod-service模块制作（服务模块）

在这里插入图片描述
div版心-——div服务模块——-ul——-li一行内的4个小模块-——div存放图片（h5）+div存放文字（h4标题+p）
图片插入使用精灵图！！！

28、2号盒子——mod-help帮助模块的制作

在这里插入图片描述
共5个dl：每个dl中有一个dt和若干个dd（里面再包含链接a）

29、3号盒子——版权信息模块mod_copyright

在这里插入图片描述

两部分：
①一个盒子装第一行的内容
②第二个盒子装2、3行的内容

html代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- TDK三大标签优化（title） -->
    <title>品优购-要啥有啥的网站</title>
    <!-- TDK-网站说明（description） -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- TDK-关键字（keyword） -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

    <!-- 引入初始化样式CSS文件,路径的问题，不要写成"/css/base.css"!!!否则出错-->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式CSS文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入网站图标 -->
    <link rel="shortcut icon" href="facvicon.ico">
</head>

<body>
    <!-- 快捷导航模块start -->
    <section class="shortcut">
        <!-- 先放一个版心 -->
        <div class="w">
            <!-- 放置左浮动的盒子（左侧导航栏） -->
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp;</li> <!-- &nbsp;表示空格 -->
                    <li>
                        <a href="#">请登录&nbsp;</a><a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <!-- 放置右浮动的盒子 -->
            <div class="fr">
                <ul>
                    <!-- 文字、“|”都用单独的li来包装 -->
                    <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 class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 快捷导航模块end -->

    <!-- header头部模块制作 start -->
    <header class="header w">
        <!-- 1\logo模块 -->
        <div class="logo">
            <h1>
                <!-- 还要给文字加一个title属性，保证鼠标移动过去后会有小提示 -->
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- 2\搜索search模块 -->
        <div class="search">
            <!-- 搜索框（记得在base里面取消外边框和边框颜色，记得用placeholder设置默认文字） -->
            <input type="search" name="" id="" placeholder="语言开发">
            <!-- 搜索按钮 -->
            <button>搜索</button>
        </div>
        <!-- 3\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>
        <!-- 4\购物车模块制作 -->
        <div class="shopcar">
            我的购物车
            <!-- 制作count购物车统计模块 -->
            <i class="count">8</i>
        </div>
    </header>
    <!-- header头部模块制作 end -->

    <!-- nav导航模块制作 start -->
    <nav class="nav">
        <!-- 版心 -->
        <div class="w">
            <!-- 左侧dropdown盒子（全部商品） -->
            <div class="dropdown">
                <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> </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>
                        <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>
            <!-- 右侧navitems盒子（相关分类） -->
            <div class="navitems">
                <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 -->

    <!-- footer底部模块制作 start -->
    <div class="footer">
        <!-- 制作版心 -->
        <div class="w">
            <!-- 制作服务模块（具体内容没有再设置） -->
            <div class="mod-service">
                <ul>
                    <li>
                        <!-- 在h5中放入图片 -->
                        <h5></h5>
                        <!-- 在div盒子中放文字 -->
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <!-- 在h5中放入图片 -->
                        <h5></h5>
                        <!-- 在div盒子中放文字 -->
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <!-- 在h5中放入图片 -->
                        <h5></h5>
                        <!-- 在div盒子中放文字 -->
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <!-- 在h5中放入图片 -->
                        <h5></h5>
                        <!-- 在div盒子中放文字 -->
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 制作mod-help帮助模块 -->
            <div class="mod_help">
                <dl>
                    <dt>服务指南</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>
                <dl>
                    <dt>服务指南</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>
                <dl>
                    <dt>服务指南</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>
                <dl>
                    <dt>服务指南</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>
                <dl>
                    <dt>服务指南</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>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="images/wx_cz.jpg" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>
            <!-- 制作版权信息模块mod_copyright -->
            <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 U</a>
                </div>
                <!-- 第2、3行的内容，存放版权信息 -->
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </div>
    <!-- footer底部模块制作 end -->
</body>

</html>

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;
  }

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

/* 左浮动 */
.fl {
    float: left;
}
/* 右浮动 */
.fr {
    float: right;
}
/* 设置为红色字体 */
.style_red {
    color: #c81623;
}

/* 快捷导航模块 */
.shortcut {
    /* 宽度要与body一致，所以不用设置 */
    height: 31px;
    background-color: #f1f1f1;
    /* 内部的文字都要垂直居中 */
    line-height: 31px;
}
/* 让导航栏左侧的模块左侧浮动，以保证在同一行上 */
.shortcut ul li {
    float: left;
}

/* 找出所有偶数的li来装“|”,而“|”其实是不存在的，用一个个极其修长的盒子的边框来充当了“|” */
.shortcut .fr ul li:nth-child(even){
    width: 1px;
    height: 12px;
    background-color: #666;
    /* 因为盒子不是文字，所以没有垂直居中对齐，所以要自己加margin来保证垂直居中对齐、以及隔开左右间距（上、左右、下） */
    margin: 9px 15px 0;
}
/* 设置伪元素来制作导航栏右侧字体图标（小三角）（after可以让伪标签里面的所有元素全都放在字体内容的后面） */
.arrow-icon::after {
    /* 必须要有content */
    content: '\e91e';
    /* 下面这一句申明也必须要有 */
    font-family: 'icomoon';
    margin-left: 6px;
}

/* header头部制作 子绝父相*/
.header {
    position: relative;
    height: 105px;
}
/* 设置logo 子绝父相*/
.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
}
.logo a {
    /* 因为a是行内元素无法改大小，所以要改为行内元素再插入图片,而这里把a变大，自然就把父元素h1撑开了 */
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* 让a里面的文字隐藏 */
    /* font-size: 0;方法1：直接让文字大小为0 （京东）*/
    /* 方法2：淘宝的做法：让文字移动到最左侧，隐藏溢出的文字 */
    text-indent: -1100px;
    overflow: hidden;
}
/* 搜索模块的制作 */
.search {
    /* 定位、子绝父相 */
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    /* 边框厚度，实线、红色 */
    border: 2px solid #b1191a;
}
/* 搜索框设置 */
.search input {
    /* 加浮动，取消自动添加的边距（直接贴上去） */
    float: left;
    width: 454px;
    height: 32px;
    /* 让默认的文字与左侧边框有一点距离 */
    padding-left: 10px;
}
.search button{
    /* 加浮动，取消自动添加的边距（直接贴上去） */
    float: left;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    /* 设置文字大小颜色 */
    color: #fff;
    font-size: 14px;
}
/* 设置热词、定位以及设置间距 */
.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}
.hotwords a {
    margin: 0 5px;
}

/* 购物车模块制作 */
.shopcar {
    /* 定位至右侧 */
    position: absolute;
    top: 25px;
    right: 60px;
    width: 140px;
    height: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    /* 文字垂直水平居中 */
    line-height: 35px;
    text-align: center;
}
/* 文字左边加入购物车图片 */
.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
    color: #b1191a;
}
/* 文字右边加入小三角 */
.shopcar::after {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 10px;
}
/* count购物车统计模块 */
.count {
    /* 子绝父绝，定位到上边框 */
    position: absolute;
    top: -5px;
    /* 用左对齐的原因，是为了当数字长度过大时，长度向右延长 */
    left: 101px;
    height: 14px;
    /* 居中对齐，否则继承的行高是34px */
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    /* 用padding来拉开文字与盒子i之间的间距 */
    padding: 0 5px;
    /* 制作圆角（左上、右上、右下） */
    border-radius: 7px 7px 7px 0;
}

/* nav模块制作 */
.nav {
    height: 47px;
    /* 设置下边框（贯穿左右的一条线） */
    border-bottom: 2px solid #b1191a;
}
/* 浮动使两个子盒子处于同一行 */
.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}
.nav .navitems {
    float: left;
}
/* 全部商品栏和它的各种子类 */
.nav .dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
}
.nav .dropdown .dd {
    /* 真正展示的时候要把这一部分隐藏起来，显示效果要用js */
    display: none;
    width: 210px;
    height: 465px;
    background-color: #c81623;
    /* 去掉和nav下边框多余的线 */
    margin-top: 2px;
}

/* 导航详细分类制作，其中每一个链接a都由li标签来包装，设置宽高、背景时修改li，而设置文字时才用a标签 */
.nav .dropdown .dd ul li {
    /* 子绝父相，伪类的父标签是li */
    position: relative;
    height: 31px;
    line-height: 31px;
    /* 左侧的小缝隙 */
    margin-left: 2px;
    /* 文字离左边的距离 */
    padding-left: 10px;
}
.nav .dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}
/* 在盒子li中制作after伪类小三角图标（因为内容要放在链接a的后面） */
.nav .dropdown .dd ul li::after{
    /* 把图标定位到盒子最右边 */
    position: absolute;
    top: 1px;
    right: 10px;
    color: #fff;
    font-size: 14px;
    content: '\e920';
    font-family: 'icomoon';
}

/* 鼠标经过时的变化情况li和标签a（注意写法）的变化 */
.nav .dropdown .dd ul li:hover {
    background-color: #fff;
}
.nav .dropdown .dd ul li:hover a {
    color: #c81623;
}   

/* 制作navitems里面的样式 */
.navitems ul li {
    /* 处于同一行 */
    float: left;
}
.navitems ul li a {
    /* 行内元素转换为块元素 */
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    /* 给a一个左右的padding值，有两个功能：1、使得每个a左右之间有一定的距离，2、同时，增加了a的范围，使得点击的范围更大 */
    padding: 0 25px;
}

/* footer底部模型制作 */
.footer {
    height: 415px;
    background-color: #f5f5f5;
    /* 增加一个padding值，使得里面的内容离顶部有一定的距离，更好看 */
    padding-top: 30px;
}
/* 制作服务模块 */
.mod-service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}
.mod-service ul li {
    /* 使他们在同一行上（用左浮动） */
    float: left;
    /* 内容离左边距35px */
    padding-left: 35px;
    width: 300px;
    height: 50px;
}
/* 图片需要插在h5中，所以修改h5的样式就是在修改图片的样式 */
.mod-service ul li h5 {
    /* 为图片盒子加浮动之后，其他的文字就会围绕在盒子周围，不会占掉浮动起来的位置 */
    float: left;
    width: 50px;
    height: 50px;
    /* 插入精灵图\不重复、左移252px、上移2px */
    background: url(../images/icons.png) no-repeat -252px -2px;
    /* 离右侧的文字也留有一定的距离 */
    margin-right: 8px;
}
.service_txt h4 {
    font-size: 14px;
}
.service_txt p {
    font-size: 12px;
}

/* 制作mod_help帮助模块 */
.mod_help {
    height: 185px;
    /* 制作这个模块的下边框 */
    border-bottom: 1px solid #ccc;
    /* 给里面的内容有一个和上、左边框的距离 */
    padding-top: 20px;
    padding-left: 50px;
}
.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}
.mod_help dl {
    /* 一行显示，使用左浮动 */
    float: left;
    /* 为了加大间距，设置宽度 */
    width: 200px;
}
/* 如果都是这么个宽度的话会有一个多出去，把最后一个的宽度调小 */
.mod_help dl:last-child{
    width: 90px;
    text-align: center;
}

/* 设置版权模块的连接 */
.mod_copyright {
    /* 文字全部放中间 */
    text-align: center;
    /* 文字与边距有点间隔 */
    padding-top: 20px;
}
.links {
    margin-bottom: 15px;
}
.copyright {
    /* 调整一下文字间距 */
    line-height: 20px;
}

-----------------------------第二天-------------------------------------

1、main主题盒子的搭建

在这里插入图片描述
在这里插入图片描述

02、newsflash模块创建

ctrl+f ——查找功能
1、

                <!-- 由于轮播图的特性，放置图片应该以ul加li的方式，方便js的动态交互 -->
                <ul>
                    <li><img src="upload/focus1.png" alt=""></li>
                </ul>

2、在这里插入图片描述

03、news-hd模块制作

在这里插入图片描述

04、news-bd模块

strong标签可以在html里面直接给文字加粗
用ul+li的模式制作即可

05、lifeservice模块

ul+12个li

.lifeservice {
    /* 把多余的边框隐藏起来 */
    overflow: hidden;
    height: 209px;
    border: 1px solid #e4e4e4;
    /* 去掉上边框（因为已经有了，避免重叠） */
    border-top: 0;
}

.lifeservice ul {
    /* 防止盒子宽度过大，第四个盒子装不下，就把ul的宽度加大一点，再把多余的边框隐藏起来 */
    width: 252px;
}

.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

06、lifeservice图片

每个小li里面放内容，i标签存放图片、p标签存放文字

.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    background: url(../images/icons.png) no-repeat -19px -15px;
    margin-top: 12px;
}

设置超出文字的部分加省略

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    /* 超出部分用省略号代替 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

07、08、推荐模块recom

在这里插入图片描述
图片之间的小竖线在图片上方，不占位置——用定位来做

/* 只有前三个有竖线 */
.recom-bd ul li:nth-child(-n+3)::after {
    content: '';
    /* 加绝对地位放置竖线的位置，子绝父相 */
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

09-14课、商品的楼层搭建

电梯导航栏、楼层区的概念
在这里插入图片描述
1、楼层取制作floor
注意这个floor，不要给高度，内容有多少，算多少，让他自然撑开
2、第一楼是家用电器模块，里面包含两个盒子
在这里插入图片描述

3、box-hd制作：
在这里插入图片描述
4、tab栏选项卡布局要求
准备两个盒子：tab_list和tab_content
在第一个盒子中进行选择，选哪个就展示那个，其余隐藏
在这里插入图片描述
5、tab_list_item布局

     <!-- tab_list_item对应tab_list中的第一个选择器的部分，由5个盒子组成 -->
     <div class="tab_list_item">
         <div class="col_210">
             <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>
             </ul>
             <a href="#">
                 <img src="upload/floor-1-1.png" alt="">
             </a>
         </div>
         <div class="col_329">
             <a href="#">
                 <img src="upload/floor-1-b01.png" alt="">
             </a>
         </div>
         <div class="col_221">
             <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt=""></a>
             <a href="#"> <img src="upload/floor-1-3.png" alt=""></a>
         </div>
         <div class="col_221">
             <a href="#"> <img src="upload/floor-1-4.png" alt=""></a>

         </div>
         <div class="col_219">
             <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt=""></a>
             <a href="#"> <img src="upload/floor-1-6.png" alt=""></a>
         </div>
     </div>

首页基本完成了

15、品优购列表-结构搭建

在这里插入图片描述

16、17制作头部和导航栏（只有一点点不同）

18、列表页一个小问题

在这里插入图片描述
！！！一个常见的bug：如果新的内容在下一行的右边，很可能是上一行的内容溢出导致的
在这里插入图片描述
在这里插入图片描述
把上面多出来的部分切掉即可

19、品优购列表页，放置商品

注意要清除浮动

      <!-- 这里一定要清除浮动，这是为了防止底部模块把浮动的位置占掉 -->
      <ul class="clearfix">

20、21、注册页-header制作

在这里插入图片描述

注册页面的html页面比较私密，为了保护用户信息，我们不需要对当前页面所seo优化
命名标准：
在这里插入图片描述

22、23、24、主体区域制作

1、先给一个父盒子装起来
2、每一行都是一个li
3、每个小li里面有3个部分：label（右对齐） input span
在这里插入图片描述
4、span里面有两个小盒子：i和文字

<span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span>

图片转为行内块，设置大小
文字和图片垂直居中的方法：vertical-align:middle;

25、安全程度模块

用li封装，弱中强3个字用padding+颜色设置的em盒子来设置

26、同意模块复选框和完成注册的提交按钮

         <li class="agree"><input type="checkbox" name="" id=""> 
             同意协议并注册 <a href="#">《知晓用户协议》</a>

整个表单的代码如下：（记得用表单域封装所有的东西）

<div class="reg_form">
   <form action="">
       <ul>
           <li><label for="">手机号：</label> <input type="text" class="inp">
               <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
           <li><label for="">短信验证码：</label> <input type="text" class="inp">
               <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li>
           <li><label for="">登录密码：</label> <input type="password" class="inp">
               <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
           <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
           <li><label for="">确认密码：</label> <input type="password" class="inp">
               <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
           <li class="agree"><input type="checkbox" name="" id=""> 
               同意协议并注册 <a href="#">《知晓用户协议》</a>
           
           </li>
           <li>
               <input type="submit" value="完成注册" class="btn">
           </li>
       </ul>
   </form>
</div>

27、底部模块

28-30、web服务器

1、服务器极其相关概念
在这里插入图片描述

本地服务器：
在这里插入图片描述
远程服务器：
在这里插入图片描述
2、申请免费空间以及网站上传：

http://free.3v.do/

在这里插入图片描述
第二部中要激活ftp（花10块钱）

皮匠大大
关注
  • 4
    点赞
  • 踩
  • 71
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
品优购项目案例制作需要注意的内容笔记
YuKing_HONG的博客
11-29 472
ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接。专业的综合网购商城，销售家电，数码通讯，电脑、家居百货、服饰服装、母婴、图书、食品等优质商品，便捷，诚信服务，为您提供愉悦的上网购物体验。写好一个样式，其余的页面用到这些相同的样式。具有不可替代性，是我们内页的一个重要标签，是搜索引擎了解网页的入口喝对网页主题归属的最佳判断点。，从而帮助网站获取免费的流量，进而在搜索引擎上提高网站的排名，提高网站的知名度。
前端Javascript第一天理论：初识 JavaScript
m0_46597922的博客
04-20 445
1. 初识 JavaScript 1.1 JavaScript 是什么 布兰登·艾奇（Brendan Eich，1961年～）。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语...
pink老师【品优购商城】
aaaa_fan的博客
07-02 485
好久之前学过H5 CSS JS，跟着黑马的pink老师写了品优购商城的静态界面，复习一下的同时也学到了许多东西！
pink老师品优购项目
04-03
什么都要积分 不觉得可耻吗？ 此项目免费 不需要积分 赠与正在学习前端与想要学习前端的同学 素材来源于网络
PC端品优购项目（详细思路+代码实现）
最新发布
GaoshangD1209的博客
06-12 1219
项目名称：品优购项目描述：品优购是一个电商网站，我们要完成PC 端首页、列表页、注册页面的制作我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了。服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。Web 服务器一般指网站服务器。
品优购项目——黑马程序员pink老师/完整源代码/项目讲解
m0_46830821的博客
03-30 2万+
话不多说，先上效果图，代码在文末 首页 结尾页 个人注册页 女鞋模块页 1、品优购项目搭建工作 images：放置背景等不经常更换的图片 upload：放置产品类需要经常更换的图片 index.html文件对应首页 common.css对应CSS 公共样式文件 base.css对应CSS 初始化样式文件 2、HTML页面引入 favicon 图标 在 html 页面里面的<head> </head>元素之间引入代码 ...
品优购前端静态页面(HTML+CSS)
weixin_48681975的博客
07-11 2128
最近在复习前端的知识，在B站上面跟着黑马前端pink老师过了一部分HTML+CSS的知识，然后跟着视频写了一下品优购的项目。在跟着pink老师敲完品优购和商品列表这几个页面后，pink老师为了不水视频时长，还剩下几个页面没有完成就没出视频带着我们来做了。秉着复习和巩固的心态，自己对照着ps效果图把剩下的两个比较重要的页面给做出来了，仅以此文章来纪念复习的一个小阶段。 品优购项目里面还剩下注册页面，提交订单页面等几个较简单的页面没做出来，那几个页面布局比较简单，暂时就不再花时间去做了，希望以后有时间再把那几
html+css大作业（pink老师）PYG品优购项目源代码
02-28
【HTML+CSS大作业——PYG品优购项目源代码详解】 HTML与CSS是构建网页设计的基础技术，这个“PYG品优购项目”无疑是学习者在掌握这两门语言后进行的一次实战演练。通过这个项目，我们可以深入理解HTML结构布局和CSS...
前端品优购网页项目源码
09-07
【前端品优购网页项目源码】是一个涵盖了前端开发技术的实践项目，旨在提供一个电商网站的用户界面。在这个项目中，我们可以深入学习和理解多种前端技术，包括HTML、CSS、JavaScript，以及可能用到的前端框架如React...
品优购电商项目资料（案例笔记素材）
11-25
【品优购电商项目资料（案例笔记素材）】 在当今数字化时代，电商平台的开发与运营已经成为企业不可或缺的一部分。"品优购"作为一个电子商务项目，其资料涵盖了从项目规划、技术选型、系统架构到运营策略等多个重要...
品优购学习项目(html+css)
10-06
综上所述，“品优购学习项目(html+css)”涵盖了前端开发的核心技术，包括HTML内容构建、CSS样式设计、JavaScript交互实现等，是学习和提升前端技能的宝贵实践案例。通过这样的项目，开发者能够深入理解网页制作的全...
品优购静态页面结果，内含psd文件。
07-20
学习完基础的HTML及CSS知识后，独立完成的品优购项目，运用到了浮动、定位、清除浮动、页面跳转等知识，能够熟练运用常用的标签。
品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
热门推荐
imByte的博客
09-09 2万+
品优购项目规划 1. 网站制作流程 现阶段，主要是做前台页面设计 2. 品优购项目整体介绍 项目名称：品优购 项目描述：品优购是一个电商网站，需求是完成 PC 端首页、列表页、注册页面 的制作 3. 开发工具以及技术栈 开发工具 VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主） 技术栈 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式 采取结构与样式相分离，模块化开发 ...
Web网页设计：HTML(品优购)电商购物商城项目设计与实现（html前端源码和论文设计）
qq_524614081的博客
01-06 2373
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
HTML(Basic) Chapter5(Pink) 综合案例品优购小导航栏 & 圆角边框、阴影的使用
LeungSr的博客
07-16 210
文章目录1.综合案例 品优购小导航栏HTML源代码（导航栏.html）导航栏最终效果2.综合案例 圆角边框、阴影的使用最终效果写在最后 1.综合案例 品优购小导航栏 注意小导航栏的空白处padding还是使用margin 首先使用*把所有的案例的边框都设置为无padding 再使用list-style: none去掉li前面的小圆点 HTML源代码（导航栏.html） <!DOCTYPE html> <html lang="en"> <head> &l.
品优购-HTML+CSS大项目2：源码
m0_67495444的博客
10-12 355
【代码】品优购-HTML+CSS大项目2：源码。
CSS/HTML静态购物网站项目源码解析（品优购）——该项目包含主页、注册页、列表页三个网页
Etui۹(･༥･´)و的博客
02-19 1万+
注：该项目所涉及的素材文件请QQ联系作者（Etui：3416252112） 首先： 上图！ index.html------主页 register.html-------注册页 list.html-----列表页 摘要：作为一个前端初学者，这是我学完html和css基础后做的第二个练习（第一个是小米商城），在练习过程中也遇到了很多困难，好在最终都一一解决，这是一个成长的过程！ 这个项目是我在B站中pink老师的教程里看到的，我先是自己尝试敲了一遍，然后再回头看一遍老师的方法。（我感觉这种学习方法很不错
【整理+总结】pink老师前端三件套之CSS笔记（四）HTML和CSS补充知识
weixin_42771853的博客
12-20 2029
随着技术的发展进步，为适应不断增长的网页设计需求，HTML5和CSS3新增了一些特性。此文介绍CSS的一些高阶特性，以及HTML5和CSS3的新增特性
14.------------------------------------------------------------------------------【PC端品优购项目】
你说的白是什么白_
01-18 1271
文章目录【PC端品优购项目】前端小抄(14)电商—主页电商—分类列表页电商—注册页一、品优购项目规划1.1 网站制作流程1.2 品优购项目整体介绍1.3 品优购项目的学习目的1.4 开发工具以及技术栈1.5 品优购项目搭建工作1.6 网站favicon图标1.7 网站TDK三大标签SEO优化二、品优购首页制作2.1 常用模块类名命名2.2 快捷导航shortcut制作2.3 header制作2.4 nav导航制作2.5 footer底部制作2.6 main主体模块制作2.7 推荐模块制作2.8 楼层区flo
品优购项目素材图片.psd
12-17
品优购项目素材图片.psd是指品优购项目所使用的素材图片的PSD格式文件。PSD是Adobe Photoshop软件的原生文件格式，它允许用户使用图层、滤镜、调色等功能进行设计和编辑。在品优购项目中，这些素材图片可能用于网站页面设计、广告宣传、产品展示等方面。 通过使用PSD格式的素材图片，可以有效地提升品优购项目的视觉效果和用户体验。首先， PSD格式的文件具有图层功能，可以把不同元素分开编辑和管理，方便设计师进行修改和调整。其次， PSD文件可以保留高质量的图片细节和透明度，使得图片在网页传输和显示过程中不会失真或变形。此外， PSD文件还支持不同的颜色模式，能够满足品优购项目不同需求下的色彩表现。 品优购项目素材图片.psd的使用需要专业的设计师或者有相关经验的人才能够利用Photoshop软件进行编辑。设计师可以在PSD文件中增加或删除元素，进行图层融合、调整亮度和对比度等操作，以达到项目所需的效果。项目团队可以通过与设计师沟通协作，根据需求对图片进行修改，并最终应用于品优购项目的各个环节。 总而言之，品优购项目素材图片.psd是为了优化品优购项目的视觉效果和用户体验而使用的一种图像文件格式。它提供了专业的设计工具和功能，可供设计师进行创造性的编辑和定制，以满足项目的需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值