前端基础学习-（4）小米商城首屏

最新推荐文章于 2024-06-12 12:52:53 发布
最新推荐文章于 2024-06-12 12:52:53 发布
阅读量206 收藏 1
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YYLOVEYY520/article/details/113463625
版权

前端基础学习-（4）小米商城首屏

作为前端学习的小白，个人在学习过程中认知：京东搜索框使用到了浮动(float)、定位(position)、垂直水平居中、基础控件、背景图片的使用等知识。其中需要注意input控件的css的部分属性使用。

实现效果

在这里插入图片描述

代码实现

html代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/小米商城.css">
    <link rel="stylesheet" href="../CSS/fontawesome-free-5.12.1-web/css/all.min.css">
</head>

<body>
    <div class="topbar_wrapper">
        <div class="mi_topbar">
            <ul class="mi_topbar_left_content">
                <li> <a href="#">小米商城</a></li>
                <li> <a href="#">MIUI</a></li>
                <li> <a href="#">IOT</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="#">下载app</a></li>
                <li> <a href="#">智能生活</a></li>
                <li> <a href="#">Select Location</a></li>
            </ul>
            <ul class="mi_topbar_right_content">
                <li>
                    <a href="#">
                        <i class="fas fa-shopping-cart"></i>
                        购物车(0)
                    </a>
                    <div class="shop_list">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>
    <div class="main_content">
        <div class="main_top_content clearfix">
            <div class="logo">  
               <a href="#">MI</a> 
            </div>
            <div class="main_top_content_right">
                <ul>
                    <li ><a href="#">小米手机</a></li>
                    <li ><a href="#">Redmi 红米</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 class="search_all">
                    <input type="text" placeholder="小米10" class="search">
                    <!-- <i class="fas fa-search"></i> -->
                    <input type="button" value="" class="search_do">
                    <div class="search_list">
                        搜索列表...
                    </div>
                </div>
            </div>
        </div>
        <div class="main_middle_content clearfix">
            <ul class="main_middle_content_left">
                <li> <a href="#">手机 电话卡</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">电视 盒子</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">笔记本 显示器</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">家电 插线板</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">出行 穿戴</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">智能 路由器</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">电moshi源 配件</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">健康 儿童</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">耳机 音箱</a><i class="fas fa-angle-right"></i></li>
                <li> <a href="#">生活 箱包</a><i class="fas fa-angle-right"></i></li>
                <div class="main_middle_content_left_list">

                </div>
            </ul>
            <ul class="main_middle_content_right">
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
        <div class="main_foot_content"></div>
    </div>
</body>

</html>

小米商城基本样式
.mi_topbar a,li {
    text-decoration: none;
    font-size: 12px;
    line-height: 40px;
    color: #B0B0B0;
}

/* 上方导航条背景颜色 */
.topbar_wrapper {
    background-color: #333333;
}

/* 导航条大小及位置 */
.mi_topbar {
    width: 1226px;
    height: 40px;
    margin: 0 auto;
}

/* 导航条左侧内容 */
.mi_topbar_left_content {
    float: left;
}

.mi_topbar_left_content li {
    float: left;

}

.mi_topbar_left_content li a {
    border-right: solid 1px #3F423C;
    padding: 0 7px;
}

.mi_topbar_left_content li:last-of-type a{
    border: none;
}

.mi_topbar_left_content li a:hover {
    color: #FFFFFF;
}

/* 导航条右侧内容 */
.mi_topbar_right_content {
    float: right;
    position: relative;
}

.mi_topbar_right_content li{
    float: right;
}

.mi_topbar_right_content li a{
    float: right;
    padding: 0 7px;
    text-align: center;
}

.mi_topbar_right_content li:first-of-type {
    position: relative;
}


.mi_topbar_right_content li:first-of-type a{
    width: 120px;
    background-color: #424242;
}

.mi_topbar_right_content li a:hover {
    color: #FFFFFF;
}

.mi_topbar_right_content li:first-of-type:hover a{
    color: #FF832F;
    background-color: #ffffff;
}

.shop_list {
    display: none;
    position: absolute;
    background-color: #ffffff;
    color: #424242;
    width: 316px;
    /* 基本文字的垂直水平居中：line-height = height + text-align: center可以垂直水平居中*/
    line-height: 80px;
    text-align: center;
    right: 0;
    top: 40px;
    box-shadow: -3px 0 20px rgba(104, 104, 104, 0.1);
    z-index: 999;
}

.mi_topbar_right_content li:first-of-type:hover .shop_list {
    display: block;
}

/* 下方主要内容 */
.main_content {
    width: 1226px;
    margin: 25px auto;
}

.main_top_content {
    height: 55px;
    line-height: 55px;
}

.main_top_content .logo a{
    line-height: 55px;  
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

.main_top_content .logo{
    float: left;
    height: 55px;
    width: 55px;
    text-align: center;
    background-color: #FF6700;
}

.main_top_content .logo:hover {
    cursor: pointer;
}

.main_top_content .main_top_content_right {
    float: right;
}

.main_top_content .main_top_content_right ul{
    float: left;
    margin-right: 120px;
}

.main_top_content .main_top_content_right li{
    float: left;
    padding: 0 8px;
    line-height: 55px;
}

.main_top_content .main_top_content_right li a{
    text-decoration: none;
    color: #333333;
    font-size: 16px;
}

.main_top_content .main_top_content_right li a:hover {
    color: #FF7F00;
}

.main_top_content .main_top_content_right .search_all {
    float: left;
    position: relative;
}

.main_top_content .main_top_content_right .search_all .search {
    height: 48px;
    width: 233px;
    border: 1px solid #E0E0E0;
    outline: 0;
    padding-left: 10px;
    z-index: 9;
    float: left;
}

.main_top_content .main_top_content_right .search_all .search_do {
    height: 52px;
    width: 52px;
    border: 1px solid #E0E0E0;
    border-left: none;
    background-color: #ffffff;
    outline: 0;
    float: left;
}

.main_top_content .main_top_content_right .search_all .search_list {
    display: none;
    position: absolute;
    background-color: #ffffff;
    top: 52px;
    width: 245px;
    height: 250px;
    border: 1px solid #FF7F00;
    border-top: none;
    line-height: 250px;
    text-align: center;
    font-size: 12px;
}

.main_top_content .main_top_content_right .search_do:hover {
    cursor: pointer;
}

/* 设置搜索框移入时效果 */
.main_top_content .main_top_content_right .search_all:hover .search:not(:focus) {
    border: 1px solid #B0B0B0;
}

.main_top_content .main_top_content_right .search_all:hover .search_do {
    border: 1px solid #B0B0B0;
    border-left: none;
}

/* 设置搜索框点击后元素效果 */
.main_top_content .main_top_content_right .search:focus  {
    border: 1px solid #FF7F00;
}

.main_top_content .main_top_content_right .search:focus + .search_do{
    border: 1px solid #FF7F00;
    border-left: none;
}

.main_top_content .main_top_content_right .search:focus ~ .search_list {
    display: block;
}

.main_content .main_middle_content {
    margin: 20px auto;
    /* 设置背景图片及背景图片的覆盖方式 */
    background-image: url('../images/mi1.jpg');
    background-size: cover;
    width: 1226px;
    position: relative;
}

/* 设置下方主体左边的导航栏 */
.main_content .main_middle_content .main_middle_content_left {
    width: 234px;
    height: 420px;
    background-color: rgba(58, 57, 57, 0.3);
    float: left;
    padding: 20px 0;
    position: relative;
}

.main_content .main_middle_content .main_middle_content_left li {
    height: 42px;
    padding-left: 30px;
}

.main_content .main_middle_content .main_middle_content_left a {
    float: left;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    line-height: 42px;
}

.main_content .main_middle_content .main_middle_content_left i {
    line-height: 42px;
    float: right;
    font-size: 20px;
    color: #DFDFDF;
    padding-right: 20px;
}

.main_content .main_middle_content .main_middle_content_left .main_middle_content_left_list {
    display: none;
    width: 992px;
    height: 460px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 234px;
    box-shadow: 6px 6px 6px rgba(179, 179, 179, 0.2);
    z-index: 99;
}

/* 设置下方图片的小圆点 */
.main_content .main_middle_content .main_middle_content_right {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

.main_content .main_middle_content .main_middle_content_right li {
    float: left;
}

.main_content .main_middle_content .main_middle_content_right li a{
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color:rgba(59, 59, 59, 0.6);
    z-index: 99;
    margin: 0 10px;
    background-clip: content-box;
    border: 2px solid transparent;
}

.main_content .main_middle_content .main_middle_content_right li a:hover {
    background-color: rgb(204, 204, 204,.8);
    border: 2px solid rgba(59, 59, 59, 0.6);
}

.main_content .main_middle_content .main_middle_content_left li:hover {
    background-color: #FF6700;
    cursor: pointer;
}

.main_content .main_middle_content .main_middle_content_left li:hover ~ .main_middle_content_left_list{
    display: block;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: table;
    clear: both;
}
形同陌路love
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端小米商城项目总结（1）
m0_56722063的博客
05-06 1883
项目确定使用框架 首先用的Vue框架进行组件化开发，Element框架支撑，js，css，html的代码逻辑通过ajax进行接口的请求调用，达到获取服务器数据的目的。再完美的渲染的页面。 项目进行前开发规范定制 团队开发协作 **项目例会** 封装命名项目规范/统一 规范 命名规范 （方法名，变量名 ……） 封装规范 (功能，参数，返回值，如何使用……) 项目规范（主要模块，功能模块 ，组件，路劲，位置……） 开发项目
前端小米商城项目总结（2）
m0_56722063的博客
05-06 1333
之后使用的是组件化开发 4.布局and开发 首页 —>页面的布局+基本数据的渲染 ，项目页面的头部和底部是贯穿全文的，主要用头部导航去进行页面切换，内容商品上用router.push去跳转，以及使用一些css3动画 登陆注册 —>这里用到的正则匹配 商品分类 —>使用导航数据和商品数据的获取渲染 ，难点，导航数据跟商品数据的同步切换,使用变量下边同步切换的形式 订单列表，我的收藏页面等等…… —>从接口拿出的数据根据路由传递过来的id拿到想要的数据进行渲染 购物车
2021小米前端第二轮不懂的知识点
weixin_44855888的博客
08-09 109
1.浏览器的一次http请求：  1.对域名解析  2.发起tcp三次握手  3.连接成功后发起http请求  4.服务器端响应http请求，向浏览器端发送html  5.浏览器解析html并且渲染页面 2.http/2：http2.0，相对于之前的有优点：  解决了浏览器头阻塞的问题，使用了头部压缩，用二进  制封装了http消息 3.服务器端渲染和客户端渲染的区别：  首先了解三个专业名词：   SPA:：单页面应用   SEO：搜索引擎优化   SSR：服务器端渲染  所以：服务器端渲染就是后端提供完
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
热门推荐
高大志leo的博客
12-11 4万+
前言 我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。 今天所介绍的是基础且关键的一环--布局排版。其中，展开布局中常用的技术：Flex布局。 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
前端web实训——小米商城（第一天）
masdhsi的博客
04-27 4241
小米商城主界面一共可以分为四部分 顶部栏 导航栏 主页内容 内容详情 脚部 第一部分 可划分为： 实现步骤： 1.先用div创建出各个模块，观察网页发现所有部分都是剧中显示，在div中加入居中的div。 <body> <!-- 顶部栏 --> <div class="topBar"> <div class="container"></div> </div> <!-- 导航栏 --> &lt
web前端基础实战项目-小米商城
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
前端Web基础-小米商城开发实战.zip
08-22
前端Web基础-小米商城开发实战.zip
网页设计-仿小米商城-前端期末大作业
07-28
网页设计-仿小米商城-前端期末大作业（免积分下载），网页比较完美，详细情况请看我的文章介绍。
前端小白入门必修-小米商城开发实战（下）
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
前端开发基础-学习宝典
11-21
前端开发基础-学习宝典
8.12 Web前端-小米商城项目实战
执笔绘江山的博客
08-12 1399
底部上方再次用到了矢量图，来保证移入的效果显示，然后中间是用ul列表制作的文字，每个用a标签包裹起来实现链接功能，最后底部就是图片和文字的结合，使用p标签来包裹不同的文字格式来实现各种效果，整体难度不大，就是内容比较繁琐。hello，各位朋友们大家好，今天我来继续把小米商城的部分说完，最后剩余的部分就是主体和尾部了，这两部分内容相对于前面来说难度较小，只有几个点需要注意一下即可。主体部分内容相对简单，只需注意格式排列以及浮动效果的显示即可。...
HTML、CSS小练习-小米官网首屏静态页面
ZS74520的博客
07-29 2524
web前端练习，小米官网静态页面 在练习过程中没有找到相应的图片文字，所以有些图片文字都是重复使用的！ 效果图： html代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
左侧导航栏右侧内容
weixin_53715817的博客
07-13 3855
菜单与内容联动，实现左侧三级菜单并且点击左侧导航栏菜单跳转对应页面
小米官网首屏纯css代码
江小白的博客
08-08 5558
小米官网首屏代码（纯CSS编写） ** 1、html部分： ** 小米商城 <!-- bar的内部容器--> <div class="top-bar w"> <!-- 左侧导航的div--> <d...
前端实现小米商城网页1（头部导航栏）
weixin_44584059的博客
08-24 4689
模仿小米商城，写一个网页，头部主要通过HTML+CSS完成，用hover实现菜单栏的影藏与显示HTML部分style.CSS部分效果图小知识点写hover显示影藏内容时，通常是一个大的div包裹，当做一整个模块去掉list最后一个元素的某些样式，用:hover:last child HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g
css设置滚动条样式；滚动条设置透明
i_am_a_div的博客
06-12 262
css设置滚动条样式；滚动条设置透明
css实现多行文本的展开收起
我码玄黄的博客
06-12 1064
本文通过纯CSS实现多行文本展开收起效果，包括右下角环绕按钮、状态切换及文本行数判断。利用flex布局、input与label关联、伪元素生成等技术，解决展开收起按钮的显示与隐藏问题，实现动态高度和状态切换。
CSS中，设置 0.5px 会生效吗
最新发布
Keep trying, keep going
06-12 378
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
web前端仿小米商城项目
09-09
如果您想开发一个仿小米商城的前端项目，我可以给您一些建议。首先，确定您使用的技术栈，常见的前端技术栈包括HTML、CSS、JavaScript以及一些流行的框架和库，如React、Vue.js等。根据您的喜好和熟悉程度选择合适的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值