82导航条结构的搭建

最新推荐文章于 2021-12-04 12:16:34 发布
最新推荐文章于 2021-12-04 12:16:34 发布
阅读量58 收藏
点赞数
分类专栏： html+css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quanxiaobai_/article/details/118054856
版权

min-width 响应式布局 网页开发 CSS body
关键词由CSDN通过智能技术生成

我们在实际开发的时候，都会拿到一个设计图。
正常的一般都是拿到一个psd的分层文件。

下面开始开发本节
这节有一个新的东西min-width。我们在缩小网页的时候，body的宽度也会缩小，缩小到一定程度后，会影响我们整个页面的布局。这时候我们就可以设置min-width，在缩小到min-width值后，body就不会继续缩小了。

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- 引入index.css -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 顶部导航条外部容器 -->
    <div class="top-bar-wrapper">
        <!-- 顶部导航条 -->
        <div class="top-bar">
            <ul class="service">
                <li><a href="javasript:;">小米商城</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">MIUI</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">loT</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">云服务</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">天星数科</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">有品</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">小爱开放平台</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">企业团购</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">资质证照</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">协议规则</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">下载app</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">智能生活</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">Select Location</a></li>
            </ul>

            <ul class="shop-cart">
                <li><a href="javascript:;"><i class="fa fa-shopping-cart"></i>购物车</a></li>
            </ul>

            <ul class="user-info">
                <li><a href="javasript:;">登陆</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">注册</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">消息通知</a></li>
            </ul>
        </div>
    </div>
</body>

</html>
广东码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
绿色线条导航BLOG网页模板
01-14
这样的模板通常包括一系列预先设计好的页面布局、颜色方案、字体样式以及交互元素，使得博主可以快速搭建一个具有专业外观的个人博客，而无需具备深厚的前端开发技能。 【描述】"绿色线条导航BLOG网页模板"描述了...
web前端 导航条的简单实现
weixin_41514525的博客
04-06 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> *{ margin: 0px; padding: 0px; } ...
制作web网页头部导航栏
热门推荐
yuwoxinanA3的博客
12-04 2万+
（1）新建HTML文件。写入代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> （2）网页头部导航栏的一堆按钮实际是由<ul>和<li>标签制作..
7.1.1导航模块简介
赵虚左
04-08 1351
ROS入门 7.1.1导航模块简介 《ROS入门-理论与实践》视频教程镇楼 机器人是如何实现导航的呢？或换言之，机器人是如何从 A 点移动到 B 点呢？ROS 官方为了提供了一张导航功能包集的图示,该图中囊括了 ROS 导航的一些关键技术: 假定我们已经以特定方式配置机器人，导航功能包集将使其可以运动。上图概述了这种配置方式。白色的部分是必须且已实现的组件，灰色的部分是可选且已实现的组件，蓝色的部分是必须为每一个机器人平台创建的组件。 总结下来，涉及的关键技术有如下五点: 全局地图 自身定位 路径规
导航条效果
03-21
#### HTML结构搭建 HTML部分为导航条提供了基本的骨架。在给定的代码中，`<ul>`元素作为导航条的容器，而`<li>`元素则代表了每个菜单项。每个菜单项内嵌有`<a>`标签，用于创建超链接，同时包含`<span>`和`<em>`元素...
用CSS手写导航条没有任何图片附效果图
09-25
在创建一个纯CSS导航条时，我们首先需要搭建一个基础的HTML文档结构。这个结构主要包括`<!DOCTYPE html>`声明，`<html>`、`<head>`和`<body>`等基本标签。在`<head>`部分，我们需要引入CSS样式表，这通常是通过`...
简约型横向css导航条
09-17
总的来说，这两款简约型横向CSS导航条提供了很好的学习素材，无论你是想要快速搭建一个美观的导航条，还是想深入学习CSS，都能从中获益。通过实际操作和不断尝试，你将能够掌握创建各种风格导航条的技巧，进一步提升...
matlab实现结构光条纹三维重建程序
05-28
结构光三维重建技术广泛应用于工业检测、文物数字化、医学成像、机器人导航等多个领域。通过MATLAB实现的程序，不仅可以进行科研探索，也可以为实际应用提供快速原型开发和测试。 总结，MATLAB实现的结构光条纹三...
1. 网页、B/S架构
quanxiaobai_的博客
04-12 1633
B/S架构 B:Browser，意为浏览器 S:Server，意为服务 B/S架构对应的是C/S架构。C:意为客户端；S:意为Server。关于C/S架构，可以自行百度。 网页的特点： 不需要安装 比如我们需要上淘宝、天猫、京东买东西，或者上某个游戏网站玩小游戏，我们都不需要安装软件。 无需更新 比如淘宝需要更新哪些功能了，我们都不用管，都是服务器的事。 跨平台 比如电脑可以访问某个网站，手机也可以访问这个网站。windows系统可以访问这个网站，linux系统也可以访问这个网站 。 网
2. html、zeal文档查看
quanxiaobai_的博客
04-14 604
html 1. html：超文本标记语言 江雪 千山鸟飞绝，万径人踪灭。 孤舟蓑笠翁，独钓寒江雪。 比如这首诗，我们的浏览器并不知道哪里是标题，哪里是正文，哪里应该加粗，哪里应该标红。所以，我们作为程序员需要告诉浏览器应该怎么做，html就是这样的一门语言，告诉浏览器应该怎么做。用特殊的“标记”，“标记”了某些内容，这样浏览器就会根据不同的“标记”，从而去对不同的内容做不同的事情。 <h2>江雪</h2> <p>千山鸟飞绝，万径人踪灭。 </p
59字体族
quanxiaobai_的博客
06-13 588
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体族
50使用after伪类解决高度塌陷问题
quanxiaobai_的博客
06-09 568
重现高度塌陷问题 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
83导航条基本样式
quanxiaobai_的博客
06-21 276
index.html <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
8. 超链接
quanxiaobai_的博客
04-14 274
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- - 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置 使用a来定义超链接 href属性指定跳
25. 选择器的权重
quanxiaobai_的博客
04-19 234
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 样式的冲突 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
6. 结构化语义标签
quanxiaobai_的博客
04-14 209
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 标签！我们主要关注的是它的语义！而不是样式！样式我们都可以通过css改，html负责的是结构！我们主要关注它的语义! header表示网页
26. 像素、百分比
quanxiaobai_的博客
04-19 190
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
62iconfont
quanxiaobai_的博客
06-14 189
注意 font awsome虽然图标丑，图标数量少，但是用上面的免费图标，版权没有问题。 iconfont虽然图标多、好看，但是版权不明确，如果实际工作中需要用到的话，最好是先联系下作者，确定版权没问题再用。 iconfont使用 来到iconfont官网，然后找到我们想要的图标，然后点击加购物车 选择所有想要的图标之后，我们点击右上角的购物车图标，然后点击下载代码（当然也可以点击添加至项目，不过会麻烦一点，要再去我的项目那里下载代码） 下载代码之后，解压出来，是下面这样的一个文件夹
38.行内元素的盒子模型
quanxiaobai_的博客
06-07 171
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
bootstrap后台系统垂直导航菜单
最新发布
06-28
Bootstrap是一个流行的前端开发框架，可以用于快速搭建响应式网站或后台系统。其中一个常用的组件是垂直导航菜单，通常用于显示系统的各种功能和页面。一个典型的bootstrap后台系统垂直导航菜单包含以下特点： 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值