day-13、14 移动端页面、导航条响应

最新推荐文章于 2024-08-17 12:45:11 发布
最新推荐文章于 2024-08-17 12:45:11 发布
阅读量202 收藏 1
点赞数
分类专栏： 移动端 HTML5 和 CSS3 less 文章标签： css html less css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43361287/article/details/109569021
版权
HTML5 和 CSS3 同时被 3 个专栏收录
19 篇文章 1 订阅
订阅专栏
移动端
3 篇文章 0 订阅
订阅专栏
less
2 篇文章 0 订阅
订阅专栏

移动端页面、导航条响应

移动端页面

项目搭建

移动端

实现效果

移动端

实现代码

这里引用图片均在官网下载，放在和本.html同级目录下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: #333;
            
            size: 12px;
        }
        /* 设置外层容器 */
        .rongqi{
            width: 100%;
        }
        /* 设置每一行的容器 */
        .rongqi .xiangmu{
            /* 设置为弹性容器 */
            display: flex;
            justify-content: space-around;
        }
        .rongqi .xiangmu .tiaotiao{
            /* background-color: blue; */
            width: 17%;
            text-align: center;
        }
        .rongqi .xiangmu .tiaotiao img{
            /* 设置图片的宽度和父元素一样 */
            width: 100%;
        }
    </style>
</head>
<body>
    <nav class="rongqi">
        <div class="xiangmu">
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/01.png" alt="">
                    <span>天猫新品</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/02.png" alt="">
                    <span>今日爆款</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/03.png" alt="">
                    <span>天猫国际</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/04.png" alt="">
                    <span>饿了么</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/05.png" alt="">
                    <span>天猫超市</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/06.png" alt="">
                    <span>分类</span>
                </a>
            </div>
           
        </div>
        <div class="xiangmu">
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/11.png" alt="">
                    <span>充值中心</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/12.png" alt="">
                    <span>机票酒店</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/13.png" alt="">
                    <span>金币庄园</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/14.png" alt="">
                    <span>阿里拍卖</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/15.png" alt="">
                    <span>淘宝吃货</span>
                </a>
            </div>
            <div class="tiaotiao">
                <a href="#">
                    <img src="./tupian/16.png" alt="">
                    <span>闲鱼</span>
                </a>
            </div>
           
        </div>
    </nav>
</body>
</html>

导航条响应

项目搭建

项目搭建
项目搭建

实现效果

实现效果
实现效果

实现代码

这里引用图片均在官网下载，放在和本.html同级目录下，
本文是在引用了reset.css文件去除浏览器默认样式的情况下进行的渲染，可参考day02-layout盒模型中浏览器的默认样式模块下的reset.css链接自行下载使用
这里将渲染写在外部.less文件中，通过自动生成的.css文件引入
此部分运用媒体特性；

less部分代码参考

 body {
        background-image: url(./tupian/02.png);
        background-repeat: no-repeat;
        background-size: cover;
    a {
            text-decoration: none;
            color: rgb(89, 89, 89);
            }
 .rongqi {
            align-items: center;
            display: flex;
            height: 64px;
            padding: 0 26px;
            justify-content: space-between;
            .zuotubiao:hover ~ .neirong,
            .zuotubiao ~ .neirong:hover{
                display: block;
            }
            .zuoce{
                .zuotubiao{
                    .dianqian{
                        position: relative;
                        z-index: 999;
                    }
                    .dianhou{
                        display: none;
                        color: rgb(131, 131, 131);
                        position: relative;
                        z-index: 99;
                    }
                    .dianqian:active{
                        display: none;
                    }
                    .dianqian:active ~ .dianhou{
                        display: block;
                    }
                    img{
                        width: 16px;
                        height: 16px;
                    }
                }
                 .neirong{
                        display: none;
                        flex-direction: column;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        width: auto;
                        height: 100%;
                        font-size: 20px;
                        background-color: rgb(255, 255, 255);
                        padding-top: 40px;
                        li{
                            height: 64px;
                            display: flex;
                            justify-content: center;
                        }
                        
                        img{
                            width: 73px;
                            height: 20px;
                        }
                        span{
                            color: rgb(133, 133, 133);
                        }
                        span:nth-of-type(1){
                            color: rgb(89, 89, 89);
                        }
                        span:nth-of-type(2),:nth-of-type(4){
                            color: rgb(80, 80, 80);
                        }
                 }
                
            }
            .logo{
                img{
                width: 73px;
                height: 20px;
                }
            }
        }
           
 }
 @media only screen {
     @media (min-width:768px){
        body{
            .rongqi{
                justify-content: space-between;
                .zuoce{
                    color: #fff;
                    .zuotubiao{
                        display: none;
                    }
                    flex: auto;
                    .neirong{
                        order: 3;
                        display: block;
                        background-color: transparent;
                        padding-top: 0;
                        text-align: center;
                        width: 100%;
                        right: 0;
                        height: 64px;
                        li{
                            display: inline-block;
                            flex-direction: row-reverse;
                            justify-content: space-between;
                            color: rgb(255, 255, 255);
                            font-size: 16px;
                            a{
                                padding: 10px 10px;
                            }
                            
                            a,
                            span{
                                color: rgb(255, 255, 255);
                                align-items: center;
                                line-height: 64px;
                                font-size: 14px;
                                font-weight: 900;
                            }
                            span:nth-of-type(1)::before{
                                content: "☀";
                                padding: 0 5px;
                            }
                            span:nth-of-type(1),:nth-of-type(2),:nth-of-type(4){
                                color: rgb(255, 255, 255);
                            }
                            span:nth-of-type(2),:nth-of-type(3),:nth-of-type(4),:nth-of-type(5){
                                color: rgba(255, 255, 255, .6);
                            }
                        }
                        li:nth-of-type(1){
                            visibility: hidden;
                        }
                        li:hover a{
                            border-bottom: 5px solid red;
                            color: rgb(89, 89, 89);
                        }
                        li:nth-of-type(9){
                            padding-left: 50px;
                        }
                      
                    }
                    order: 3;
                }
                .logo{
                    order: 1;
                    width: 107px;
                    height: 30px;
                 }
                .zhanwei{
                    order: 2;
                }
             }
        }
    }
 }
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="./xuanran.css">
   <link rel="stylesheet" href="./inconfont/iconfont.css">
</head>

<body>
    <div class="rongqi">
        <!-- 左侧菜单 -->
        <div class="zuoce">
            <ul class="zuotubiao">
                <a href="#">
                    <img class="dianqian" src="./tupian/03.png" alt="">
                    <img class="dianhou" src="./tupian/04.png" alt="">
                </a>
            </ul>
            <ul class="neirong">
                <li>
                    <a href="#">
                        <img src="./tupian/05.png" alt="">
                    </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>
                    <span>简</span>
                    <span>|</span>
                    <span>繁</span>
                    <span>|</span>
                    <span>English</span>
                </li>
            </ul>
        </div>
        <!-- logo部分 -->
        <div class="logo">
            <a href="#">
                <img src="./tupian/01.png" alt="">
            </a>
        </div>
        <!-- 占位作用，使左侧菜单居左和logo居中 -->
        <div class="zhanwei">

        </div>

    </div>
</body>

</html>
蔡大爷的小甜心
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
UNIAPP day_04(9.2) 移动端对话框、节流防抖、跳转传参、补充API
m0_70328115的博客
09-13 363
移动端对话框、节流防抖、跳转传参、补充API、CSS的溢出文本显示省略号
BootStrap---day01
蜗牛的博客
08-24 335
bootstrap是当下最时兴的前端框架（也可以说是 界面工具集）具有移动端优先的设计理念特点就是灵活简洁，代码优雅，美观大方其目的是为了让web开发更敏捷学习bootstrap的第一天，总的来说，学习到了一些bootstrap中常用的插件、布局和使用bootstrap的方式方法。在之后的项目开发中，会对各种类名更加熟练，提升开发速度。
制作天猫国际HTML,HTML SiteMap
weixin_42626599的博客
07-03 173
URLLast ChangeChange FrequencyPriority2020-05-07T16:06:49+08:00Always0.42020-05-07T16:06:51+08:00Always0.42020-05-07T16:06:52+08:00Always0.42020-05-07T16:06:52+08:00Always0.42020-05-07T16:06:52+08:00A...
python全栈学习--day57(响应式页面-@media介绍,移动端单位介绍,Bootstrap学习)
weixin_30323631的博客
06-06 138
一、响应式页面-@media介绍　　　　　　　　　　　　　 我们为什么要写自适应的页面（响应式页面）　　　　　　　　　　　　　　　　　　 众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手...
React移动端项目-01
m0_73442777的博客
08-03 1063
>本项目对标`CSDN`、`博客园`等竞品，致力成为更加贴近年轻 IT 从业者的科技资讯类应用 >产品关键词：IT、极客、活力、科技、技术分享、前沿动态、内容社交 >用户特点：年轻有活力，对IT领域前言科技信息充满探索欲和学习热情
DAY14-前端之Bootstrap框架
weixin_34102807的博客
03-29 83
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？ 在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
shykevin的博客
06-06 310
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习) 昨日内容回顾　　　　　　　　　　　　　　 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 ...
day13-web前端之JS与JQuery
weixin_30338743的博客
05-27 296
第1章 JavaScript课堂总结 Blog链接： JS语法基础：http://www.cnblogs.com/liwenzhou/p/8004649.html BOM和DOM:http://www.cnblogs.com/liwenzhou/p/8011504.html jQuery：http://www.cnblogs.com/liw...
Vue移动端系列 =＞ [04] 首页-文章列表
Write less，do more
11-05 790
四、首页—文章列表 页面布局 头部导航栏 1、使用导航栏组件 2、在导航栏组件中插入按钮 文本 图标 3、样式调整 宽高 背景色 边框 文本大小 图标大小 <template> <div class="home-container"> <!-- 导航栏 --> <van-nav-bar class="page-nav-bar"> <van-button class="search-btn"
day建筑-V1.7.0移动端原型20170328.zip
10-14
标题“day建筑-V1.7.0移动端原型20170328.zip”表明这是一个与建筑行业相关的软件或应用的移动端原型设计文件，版本为V1.7.0，日期为2017年3月28日。这个压缩包可能是由设计师或开发团队用来分享和储存项目开发过程...
Day13-14:第13-14天
03-22
在"Day13-14:第13-14天"的学习中，你可能会完成一些实战练习，创建自己的HTML页面，并通过浏览器查看效果，从而巩固所学知识。对于初学者，这是一次很好的实践机会，能够帮助理解HTML是如何将文本转换为有组织、有...
day25-Sticky Navbar（粘性的导航条）
07-16
在网页设计中，一个“Sticky Navbar”（粘性导航条）是指当用户滚动页面时，导航栏会始终保持在屏幕顶部可见的元素。这种设计增强了用户体验，因为它使用户始终能够轻松地访问页面的主要导航链接，无论他们在页面的...
Day13-14
03-22
在"Day13-14"的学习中，我们可能深入探讨了HTML的基本概念、语法以及在实际网页开发中的应用。 HTML由一系列的元素组成，这些元素通过标签来表示。比如`<html>`是文档的根元素，`<head>`包含了页面的元数据如标题，...
css实现水滴效果图
yinge0508的博客
08-12 2006
【代码】css实现水滴效果图。
响应式Web设计：纯HTML和CSS的实现技巧
Caleb的博客
08-16 783
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 1008
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
CSS的:current伪类：精准定位当前活动元素
最新发布
2401_85439108的博客
08-17 516
CSS（层叠样式表）是控制网页样式的核心语言。随着CSS4的提出，一系列新的选择器被引入，其中:current伪类便是这些新特性之一。:current伪类允许开发者选择当前处于活动状态的元素，这在创建动态和交互性网页时非常有用。本文将详细介绍:current伪类的使用方式、应用场景以及如何通过它们增强网页的交互性和视觉表现。
【CSS】数字英文css没有转换成...换行点、没有换行、拆分的问题（非常常见的需求）
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-16 845
默认情况下，连续的英文或数字文本不会在空格处换行，这可能导致布局问题。
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将变为4，并且表达式的结果为5。这个操作符通常用于循环或迭代中，用于递减计数器或索引。 2. "day"是一个变量名或标识符，用于表示一个存储数据的位置。它可以是任何合法的变量名，用于存储某个特定类型的数据。例如，可以定义一个变量day来表示一周中的某一天。 总结起来，"day--"是一个操作符，用于递减变量的值；而"day"是一个变量名，用于表示存储数据的位置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值