静态网页设计——宝马官网（HTML+CSS+JavaScript）

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：
https://www.bilibili.com/video/BV1v64y1E7og/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术：HTML+CSS+JS（静态网页设计）
主要内容：对宝马官网进行仿造

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。
在这里插入图片描述

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，或者点击下方的按钮可以手动切换图片。
在这里插入图片描述

该页面使用html+css设计结构和样式，将图片img标签设计成排列整齐的卡片，有些还是卡片超链接，鼠标放上去卡片或者卡片上的文字会变色。
在这里插入图片描述

代码：

<!--导航栏模块开始-->
		<div class="nav">
			<div class="nav_one">
	    		<a href="BMWindex.html">全部车型</a>
	            <a href="html/service.html" class="nav_service">BMW服务</a>
	            <a href="html/BMWworld.html">BMW天地</a>
	            <a href="html/shop.html" class="nav_x">BMW官方商城</a>
       		   <a href="html/search.html"><img src="images/shouye/s_head/1-1.png" /></a>
               <a href="#"><img src="images/shouye/s_head/1-2.png" /></a>
       			<a href="html/BMWpersonal.html"><img src="images/shouye/s_head/1-3.png" /></a>
       		</div>
       		<div class="nav_two">
            	<a href="#"><img src="images/shouye/s_head/logo-bmw.png"/></a>
        	</div>
		</div>
		<!--导航栏模块结束-->

2、服务页

该页面使用了很多的li列表+css样式设计，设计出许多排列整齐的菜单按钮，可以在这里切换到网站中的其他页面当中去，属于网站的交通中转站。
在这里插入图片描述

代码：

<div class="box" id="box">
            <!--1-->
            <dir class="current1">
                <div class="imgs">
                    <img src="../images/service/a1.png" alt="">
                </div>
                <div class="box1">
                    <div class="boxx">
                        <p>BMW二手车官方网站</p>
                        <img src="../images/service/next.png" alt="">
                    </div>
                    
                </div>
            </dir>