web前端框架Bootstrap框架下的仿华为购物网站

YYY南山

已于 2025-03-12 21:14:57 修改

阅读量143

点赞数 1

文章标签：前端前端框架 bootstrap html css

于 2025-03-12 20:28:19 首次发布

本文链接：https://blog.csdn.net/YYYnanshan/article/details/146213951

版权

这里使用的是Visual Studio Code（VSCode）设计的Web前端作业，包括了HTML、CSS，选用VSCode作为开发环境和工具来说有诸多优势VSCode智能代码提示和补全。

VSCode具备强大的代码提示功能，能够根据输入和上下文提供智能建议，减少拼写错误和语法问题，提高编码效率。

除此，是VSCode直观的用户界面，界面简洁直观，侧边栏导航、分栏编辑等功能设计合理，提高了操作的便捷性和效率。

本项目使用Bootstrap框架粗略仿造了华为的购物网站的前端设计界面，可以实现自适应大小，PC端与手机端效果不同以下是页面效果图:

HTML部分代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/bootstrap-icons.min.css">
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="./js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 顶部通栏 -->
<header class="topBar d-none d-lg-block">
    <div class="container">
        <div class="barleft"> 
            <ul class="tab">
                <li>
                    <a href="">华为商城</a>
                </li>
                <li>
                    <a href="">华为社区</a>
                </li>
                <li>
                    <a href="">联系客服</a>
                </li>
                <li>
                    <a href="">关于我们</a>
                </li>
            </ul>
    </div>
</header>



<!-- 导航栏 -->
<nav class="navbar navbar-expand-md sticky-top" style="background-color: #ffffff;">
    <div class="container">
         <a class="navbar-brand bar" href="#">
            <span>Logo</span>
            <!-- <img class="logo-img" src="./imges/logo.png" alt="" style="width: 150px;"> -->
         </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button> 
        <div class="collapse navbar-collapse justify-content-between" id="navbarNav" style="margin-left: 60px;">
            
            <ul class="navbar-nav tab">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./gouwu.html">我的订单</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系客服</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./fenlei.html">商品分类</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">个人中心</a>
                </li>
                <li class="nav-item d-block d-sm-none">
                    <a class="nav-link" href="#">搜索</a>
                </li>
            </ul>
            <form class="form-inline">
                <div class="row">
                    <div class="col-sm-8 d-none d-sm-block">
                        <input class="form-control" type="search" placeholder="搜索" aria-label="Search">
                    </div>
                    <div class="col-sm-4 d-none d-sm-block">
                        <button class="btn btn-outline-primary" type="submit">搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</nav>

<!-- 轮播 -->
<div id="demo" class="carousel slide mt-2" data-bs-ride="carousel" style="padding: 5px 0 0 0;">
    <div class="carousel-indicators" style="top: 90%;">
        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" style="background-color: #c6b9b9;"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="1" style="background-color: #c6b9b9;"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="2" style="background-color: #c6b9b9;"></button>
    </div>

css部分代码如下：

.topBar{
	border: 1px solid #ccc;
	color: rgb(255, 255, 255);
	position: relative;
	height: 30px;
	background-color: #000000;
}
.barleft{
	width: 100%;
}
.barleft .tab{
	display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;/*使导航项靠左*/
    margin-top: 10px;

}
.barleft .tab li{
	margin-top: -7px;
	width: 25%;
	font-size: 1rem;
	list-style: none;
	text-align: center;
}
.topBar a{
	display: block;
	color:  #a0a0a0;
	text-decoration: none;
	border-right: 1px solid #a0a0a0;
}
.barleft  li:nth-child(4) > a{
	border-right: none;
}
.topBar > .container > .row > div{
	height: 30px;
	text-align: center;
	top: 2px;
}

.navnex{
    width: 100%;
    height: auto;
    background-color: #f3f3f3;
    margin-bottom: 20px;
}
.navnex > .n{
	width: 100%;
	padding: 0 3% 0 3%;
}
.navnex > .n > ul{
	width: 100%;
	padding: 30px 0 0 0;
	list-style: none;
}
.navnex > .n > ul > li{
	width: 20%;
	float: left;
}
.navnex > .n > ul > li > a{
	display: block;
	text-decoration: none;
	transform: scale(1); /* 缩放元素1.5倍 */
    transition: transform 0.1s ease-in-out;
}
.navnex > .n > ul > li > a:hover{
	transform: scale(1.2);
	font-weight: 600;
}
.navnex > .n > ul > li > a >img{
	width: 30%;
	display: block;
	margin: 0 auto;
}
.navnex > .n > ul > li > a > p{
	text-align: center;
	color: #555;
	font-size: 12px;
	padding: 6px 0;
}
.fu{
	width: 100%;

	padding: 0 5% 0 5%;
}

啊哈哈哈哈