尚品会网页开发所带来的问题与思考（上）

最新推荐文章于 2024-06-16 15:59:05 发布
最新推荐文章于 2024-06-16 15:59:05 发布
阅读量257 收藏 3
点赞数 2
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74079013/article/details/130668794
版权

一、背景介绍

尚品会网页是尚硅谷在b站发布html+css教学视频后的一个实例，主要分为以下几个部分：顶部导航栏，头部，主导航栏，主要内容区，页脚。而主要内容区又分为：侧面导航栏，侧面导航栏二级菜单，横幅，右侧导航栏。

二、网页设计名词解释

1.版心

在pc网页中，都有一个固定宽度且水平居中的盒子，用来显示网页的主要内容，这个盒子叫做版心（container），版心可以有多个，宽度一般在960px-1200px之间

2.常用布局名词

名词英文
顶部导航条topbar
页头header
导航nav
搜索框search
横幅广告bar
主要内容content，main
侧边栏sidebar
页脚footer

三、顶部导航条

1.版心水平居中

.container{
    width: 1190px;
    margin: 0 auto;
}

2.换行导致文字间有空格

令父元素字体大小为0，子元素重新设置字体大小

.welcome{
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666;
}
.welcome span , .welcome a{
    font-size: 12px;
}

3.令文字垂直居中

设置行内元素的height，令行高等于height

.topbar-nav .list{
    height: 30px;
    line-height: 30px;
}

代码组成：html文件

    <body>
        
        <!-- 顶部导航条 -->
        <div class="topbar">
            <!-- 版心 -->
            <div class="container clearfix">
                <!-- 左侧的欢迎区 -->
                <div class="welcome leftfix" >
                    <span class="hello">尚品汇欢迎您</span>
                    <span>请</span>
                    <a href="#" class="login">登录</a>
                    <a href="#" class="register">免费注册</a>
                </div>
                <!-- 右侧的导航区 -->
                <div class="topbar-nav rightfix">
                    <ul class="list clearfix">
                        <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>
        </div>

        <!-- 头部 -->
        <div class="header">
            <div class="container clearfix">
                <!-- 左侧的logo区域 -->
                <div class="logo leftfix">
                    <img src="../images/logo.png" alt="尚品汇">
                </div>
                <!-- 右侧的搜索区域 -->
                <div class="search rightfix">
                    <form action="#">
                        <input type="text">
                        <button></button>
                    </form>
                </div>
            </div>
        </div>

    </body>

css文件：

/* #region顶部导航条start */
.topbar{
    height: 30px;
    background-color: #ECECEC;
}
.welcome{
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666;
}
.welcome span , .welcome a{
    font-size: 12px;
}
.welcome .hello{
    margin-right: 28px;
}
.welcome .login{
    padding-right: 10px;
    border-right: 1px solid #666;
}
.welcome .register{
    padding-left: 10px;
}
.topbar-nav .list{
    height: 30px;
    line-height: 30px;
}
.topbar-nav .list li{
    float: left;
}
.topbar-nav .list li a{
    padding: 0 15px ;
    border-right: 1px solid #666;
}
.topbar-nav .list li:first-child a{
    padding-left: 0;
}
.topbar-nav .list li:last-child a{
    padding-right: 0;
    border: 0;
}
/* #endregion顶部导航条end */

最终达成效果：

二、页头

1.搜索框与按钮不对齐

给按钮加一个vertical-align值，值可以取除了默认以外的任何值

.header button{
    width: 80px;
    height: 36px;
    background-color:#DD302d;
    /* 解决搜索框与按钮不对齐 */
    vertical-align:bottom;
}

2.背景图像重复，不对齐。

 给按钮加一个background-repeat属性：

.header button{
    width: 80px;
    height: 36px;
    background-color:#DD302d;
    /* 解决搜索框与按钮不对齐 */
    vertical-align:bottom;
    background-image: url('../images/serch_icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

最终达成效果：

 

三、主导航区

导航栏一般都用无序列表或自定义列表来写

最终达成效果：

 

四、主要内容区

1.鼠标悬停变色效果

.slide-nav li:hover{
    background-color: #DD302d;
}

.slide-nav li:hover >a{
    color: white;
}

2.二级菜单达成效果

①默认隐藏，点击导航栏时出现

将二级菜单的display属性改成none，当鼠标悬停在侧边导航栏时改成block

.second-menu{
    width: 680px;
    height: 458px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 190px;
    padding-left: 20px;
    display: none;
}
.slide-nav li:hover .second-menu{
display: block;

②每个侧边栏定位效果相同

把父元素的position设为relative，二级菜单的position属性设置为absolute

将二级菜单相对于整个侧边导航栏相对定位

.main-content .slide-nav{
    width: 190px;
    height: 458px;
    background-color: #f4f4f4;
    position: relative;
}
.second-menu{
    width: 680px;
    height: 458px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 190px;
    padding-left: 20px;
    display: none;
}

③精灵图的使用

所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。这样可以节约网络资源。

html文件：

 <div class="other-nav">
                        <ul class="other-nav-list clearfix">
                            <li>
                                <div class="picture"></div>
                                <span>话费</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>火车票</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>加油卡</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>白条</span>
                            </li>
                        </ul>
                        <ul class="other-nav-list clearfix">
                            <li>
                                <div class="picture"></div>
                                <span>电影票</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>酒店</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>理财</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>机票</span>
                            </li>
                        </ul>
                        <ul class="other-nav-list clearfix">
                            <li>
                                <div class="picture"></div>
                                <span>礼品卡</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>彩票</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>游戏</span>
                            </li>
                            <li>
                                <div class="picture"></div>
                                <span>众筹</span>
                            </li>
                        </ul>
                    </div>
.other-nav-list .picture{
    width: 48px;
    height: 48px;
    background-image: url("../images/精灵图-侧边功能.png");
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture{
    background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture{
    background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture{
    background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(4) .picture{
    background-position: -144px 0;
}

.other-nav-list:nth-child(2) li:nth-child(1) .picture{
    background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture{
    background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture{
    background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture{
    background-position: -144px -48px;
}

.other-nav-list:nth-child(3) li:nth-child(1) .picture{
    background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture{
    background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture{
    background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture{
    background-position: -144px -96px;
}

④鼠标放在精灵图上假装可以点击

给精灵图所在区域加上 cursor: pointer属性

.other-nav-list li{

    width: 48px;

    height: 70px;

    float: left;

    margin: 0 11px;

    text-align: center;

    cursor: pointer;

}

最终达成效果：

 五、思考与总结

1.盒子加了padding或board后要重新调整盒子的宽高

2.盒子左右浮动后应该取消父元素的浮动

3.因为有些符号与html的标签产生冲突，所以我们可以用一些特殊的形式来表示某些字符，我们称之为"字符实体"

空格&nbsp
小于号&lt
大于号&gt

浅吟幻风
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue项目实战-尚品汇--交易页面的开发（11）
cxd_dxc的博客
01-18 643
内容包括92-98 交易页面，并完成提交订单功能，但由于公用一个账号会经常报错。
前端实战——尚品汇（网页开发）
qq_46574748的博客
07-04 1031
/* 基础设置 */ .container { width: 1190px; margin: 0 auto; } /* #region顶部导航条start */ .topbar { height: 30px; background-color: #ececec; } .welcome { height: 30px; line-height: 30px; font-size: 0; color: #666; } .welcome span,.
前端“尚品汇”大型购物商城项目（前台页面）系列1
阿卡内的博客
07-07 4947
前端“尚品汇”大型购物商城项目（前台页面）系列1
Day133.尚品汇：项目介绍、Linux软件环境部署、项目环境搭建、表设计
a111042555的博客
08-24 2416
尚品汇
项目笔记14（尚品汇）
Revin的博客
03-20 630
文章目录search页面静态页面搭建search模块vuex操作动态展示产品列表 search页面 静态页面搭建 首先书写静态页面，如下图所示。（代码过长就不直接粘贴了）。书写完静态页面的效果如下图。 search模块vuex操作 1.获取接口数据 2.vuex三连环以及在search模块中发送dispatch与获取vuex数据 动态展示产品列表 动态展示页面，用请求到的数据替换原来写死的数据。最终效果如下所示。 ......
尚品会项目-购物车-商品数量更改
qq_43756487的博客
08-23 153
发送请求的url地址栏携带的参数出现undefined
前端项目-尚品会-来自b站尚硅谷视频
weixin_44286392的博客
08-12 577
看视频时能听懂，自己写代码时就懵
Java微服务项目-尚品甄选总结
总之，一起加油吧~
05-28 990
尚品甄选是一个B2C模式的电子商务平台，包含后台管理系统和前台用户系统。项目采用前后端分离开发模式，基于SpringBoot + SpringCloud微服务架构。后台管理系统后端采用的是单体架构【就是把所有的功能写在同一个项目中】，如下所示：前台用户系统的后端采用的是微服务系统架构【一个模块就是一个独立服务】，如下图所示：项目使用技术栈：后端：Spring Boot、Spring Cloud Alibaba、Redis、EasyExcel、Minio、短信平台、支付宝支付等。
CRMEB_PRO_尚品优选模板，适配v1.3，uniapp商城模板
08-14
CRMEB_PRO_尚品优选模板，适配v1.3，uniapp商城模板
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
需要自取，找资源不易，请多多点赞吧
01 尚品甄选-项目概述.md
12-27
01 尚品甄选-项目概述.md
尚品备忘客 v4.4.zip
07-11
尚品备忘客辅助用户轻松管理时间碎片，积累资料，高效完成日常工作。尚品备忘客软件还兼顾定时关机，桌面便签，文档资料收集存档，自编辑音乐提醒等强大功能。 尚品备忘客 v4.3更新： 1.提醒模块:增加提前xx分钟、...
尚品旅行社网站
03-17
声明：本站资源全部都是购买的VIP资源和商业程序，仅作学习交流之用，请勿用于商业用途， 请勿转载，使用时请修改版权信息，产生一切纠纷与本站无关！ 更有许多贴切站长朋友的服务...尚品社区发展部致上 www.shpcn.com
尚品备忘录桌面版 v1.17
11-01
尚品备忘录桌面版是一款绿色，免安装的桌面备忘录软件，他的特点有：1.小巧，不占资源。2.可按需要进行单次、多次，或不提醒。3.提醒时播放音乐（可关闭） 尚品备忘录桌面版是站长朋友每天工作计划的好帮手。...
尚硅谷-尚品汇项目开发总结（第三天）
qq_48113035的博客
12-10 1059
11
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 387
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS从入门到精通——动画:CSS3动画延迟和完成后状态的保持
m0_73614626的博客
06-16 349
上面已经实现了绿色小球向右移动的动画， 怎么在绿色小球动画完成时保持这个状态呢？红色小球和绿色小球的动画基本是一样的，调整一下位置就可以了。为了完成本关任务，你需要掌握：1.动画状态，2.动画完成时的状态，3.动画延迟。这里以绿色小球的移动来说明小球的状态。小球向右移动是利用定位来改变它的。它规定了动画在播放之前或之后，其动画效果是否可见。本关任务：用 CSS3 实现小车等待红绿灯的效果。运用第一关学到的知识，先创建一个动画名称为。来实现，它定义了动画在何时开始，默认为。然后把这个动画绑定到。
CSS期末复习速览（二）
最新发布
2301_80369371的博客
06-16 341
4.行内块元素：常见的行内块元素：<img/> <input/> <td>，同时具有块元素和行内元素的特点，特点：和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）；高度，行高，内外边距都可以控制（块元素特点）2.块元素：常见的块元素：<h1>~<h6> <p> <div> <ul> <ol> <li>，特点：自己独占一行；3.行内元素：常见的行内元素：<a> <strong> <span>，特点：相邻行内元素在一行上，一行可以显示多个；
uniapp商城项目帮我起个名字
03-07
可以考虑使用与商城相关的词汇，如“购物天堂”、“优选商城”、“尚品购”等等。同时，也可以根据您的商城特色或定位来起名字，如“绿色生活”、“智能家居”、“时尚潮品”等等。希望这些建议能够帮到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值