xx闪购——顶部的菜单栏

最新推荐文章于 2021-12-22 19:29:40 发布

iheyu

最新推荐文章于 2021-12-22 19:29:40 发布

阅读量345

点赞数

分类专栏： html 文章标签：居中效果解决浮动所带来的边界塌陷 opbar-cart tapbar-info

本文链接：https://blog.csdn.net/iheyu/article/details/103892157

版权

本文详细介绍了如何创建类似小米商城顶部菜单栏的布局和样式，包括居中效果的实现、浮动元素引起的边界塌陷问题的解决，以及添加链接、调整字体和间距等步骤。同时，还涉及了topbar-cart和tapbar-info组件的样式设计。

摘要由CSDN通过智能技术生成

一.做小米商城的菜单栏：

1.页面结构：

1.1.在html的body里面有一个 div 包裹着所有内容与控制背景和高度；

1.2.在用1个 div 标签限制宽度和整体居中；

1.3.在用1个 div 标签让文字靠最左侧 ——>用另1个 div 标签让文字靠最右侧；

<!DOCTYPE html>
<html lang="zh">
<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">
    <title>小米闪购 - 小米商城</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!--把图片放到cc文件夹下，直接引入图片-->
    <link rel="stylesheet" href="style.css">
    <!--引入CSS的样式-->
</head>
<body>
    <div>
        <div>
            <div>小米商城|MIUI|IOT|云服务|金融|有品|小爱开放平台|企业服务|Select Region</div>
            <div>登录|注册|消息通知 </div>
            <div>购物车（0）</div>
        </div>
    </div>
</body>
</html>

在浏览器中显示的效果！

2.给div加样式：

2.1.给每个div起名字；

<!DOCTYPE html>
<html lang="zh">
<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">
    <title>小米闪购 - 小米商城</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!--把图片放到cc文件夹下，直接引入图片-->
    <link rel="stylesheet" href="css/style.css">
    <!--引入CSS的样式-->
</head>
<body>
    <div class="topbar">
        <div class="container">
            <div class="topbar-nav">小米商城|MIUI|IOT|云服务|金融|有品|小爱开放平台|企业服务|Select Region</div>
            <div class="topbar-info">登录|注册|消息通知 </div>
            <div class="topbar-cart">购物车（0）</div>
        </div>
    </div>
</body>
</html>

2.2.给每个div加样式：

2.2.1.

body {
    /*去掉 body里面的默认属性*/
    margin:0;
    padding: 0;
}
.topbar {
    background-color: #333;
    height: 40px;
}

在浏览器中显示的效果！

2.2.2

body {
    /*去掉 body里面的默认属性*/
    margin:0;
    padding: 0;
}
.topbar {
    /*加边框*/
    border: 1px solid black;
    /*为了调试方便去掉 背景色*/
    /*background-color: #333;*/
    height: 40px;
}

在浏览器中显示的效果！

2.2.3 居中效果

body {
    /*去掉 body里面的默认属性*/
    margin:0;
    padding: 0;
}
.topbar {
    /*加边框*/
    border: 1px solid black;
    /*background-color: #333;*/
    height: 40px;
}
.container {
    border: 1px solid black;
    /*居中*/
    margin: 0 auto;
    width: 1226px;
}

在浏览器中显示的效果！

2.2.4.把居中的内容，放到对应位置上：

body {
    /*去掉 body里面的默认属性*/
    margin:0;
    padding: 0;
}
.topbar {
    /*加边框*/
    border: 1px solid black;
    /*background-color: #333;*/
    height: 40px;
}
.container {
    border: 1px solid black;
    /*居中*/
    margin: 0 auto;
    width: 1226px;
}
.topbar-nav {
    /*浮动*/
    float: left;
}
.topbar-info,.topbar-cart {
    float:right;
}

在浏览器中显示的效果！

2.3.解决浮动所带来的边界塌陷

2.3.1. div边框把具体内容包裹住：

body {
    /*去掉 body里面的默认属性*/
    margin:0;
    padding: 0;
}
.topbar {
    /*加边框*/
    border: 1px solid black;

最低0.47元/天解锁文章

iheyu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录