小米商城项目实战(一)顶部导航栏

顶部导航栏需求

  • 小米商城官方网站: https://www.mi.com/index.html
  • 小米商城官方Logo下载网址: https://s01.mifile.cn/favicon.ico
    在这里插入图片描述
    在这里插入图片描述

项目结构

小米商城项目实战(一)顶部导航栏_第1张图片

HTML代码

# 编辑文件index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米闪购-小米商城title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
head>
<body>
<div class="topbar">
    <div class="container">
        <div class="topbar-nav">
            <a href="">小米商城<span>|span>a>
            <a href="">MIUI<span>|span>a>
            <a href="">云服务<span>|span>a>
            <a href="">金融<span>|span>a>
            <a href="">有品<span>|span>a>
            <a href="">小爱开放平台a>
        div>
        <div class="topbar-cart"><a href="">购物车 <span>(0)span>a>div>
        <div class="topbar-info">
            <a href="">登录<span>|span>a>
            <a href="">注册<span>|span>a>
            <a href="" class="sep">消息通知a>
        div>

    div>
div>
body>
html>

CSS样式

# 编辑文件css/style.css
body {
    margin: 0;
    padding: 0;
    height: 2500px;
    font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif
}

.topbar {
    background-color: #333;
    height: 40px;
}


.container {
    /*块级元素居中*/
    margin: 0 auto;
    width: 1226px;
}

.container::before .container::after {
    content: '';
    display: table;

}

.container::after {
    clear: both;
}

.topbar a {
    text-decoration: none;
    color: #b0b0b0;
    font-size: 10px;
}

.topbar a:hover {
    color: #ffffff;
}

.topbar-nav {
    float: left;
    line-height: 40px;
    height: 40px;
    font-size: 0;
}

.topbar-nav span {
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    margin: 0.5rem;


}

.topbar-info, .topbar-cart {
    float: right;
}


.topbar-cart a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 120px;
    background-color: #424242;
}

.topbar-cart a:hover {
    background-color: #ffffff;
    color: #ff6700;

}

.topbar-cart span {
    margin-left: -4px;
    font-size: 12px;
}

.topbar-info{
    margin-right: 15px;
}


.topbar-info a {
    float: left;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
}

.topbar-info span {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    margin: 0.5rem;
}

.topbar-info .sep {
    padding: 0 10px;
}

你可能感兴趣的:(小米商城项目实战,html,CSS,JavaScript,前端开发)