web前端网页界面/css 仿微软官网界面

最新推荐文章于 2022-08-25 19:38:47 发布
最新推荐文章于 2022-08-25 19:38:47 发布
阅读量2.2k 收藏 35
点赞数 3
分类专栏： web网页界面设计 文章标签： web设计 css 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A485320/article/details/119335764
版权

Html5+css做的一款网页设计界面，仿微软官网，导航栏下拉列表，轮播图，具体界面效果如下：

 HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Windows | Microsoft Windows 10 家庭版和 Windows 10 专业版操作系统、笔记本电脑、电脑、平板电脑等内容的官方网站</title>
		<link rel="shortcut icon" href="img/19.png"/>
		<link rel="stylesheet" href="css/ms.css" />
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<link rel="stylesheet" href="css/Footer.css" />
		<script type="text/javascript" src="js/Surface Pro 6.js"></script>
		<script type="text/javascript" src="js/ms.js" ></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js" ></script>
		
	</head>
	<body>
		<!--整个页面-->
		<div class="page">
				<!--导航开始-->
		<div class="HeaderBase">
			<div class="Logo">
				<a href="#">
				<img src="img/1.png" />
				</a>
			</div>
			<div class="VerticalLine">|</div>
			<div class="Surface">
				<a href="#"><span>Windows</span></a>
			</div>
			<ul class="Choose">
				<li id="one" onmouseover="showUnderList1()" onmouseout="hidUnderList1()"><a href="#">Windows 10∨</a></li>
				<li id="two" onmouseover="showUnderList2()" onmouseout="hidUnderList2()"><a href="#">设备∨</a></li>
				<li onmouseover="showUnder3()" onmouseout="hidUnder3()"><a href="#">应用</a></li>
				<li onmouseover="showUnder4()" onmouseout="hidUnder4()"><a href="#">游戏</a></li>
				<li onmouseover="showUnder5()" onmouseout="hidUnder5()"><a href="#">面向企业</a></li>
				<li><a class="Purchase" href="#" style="border: 1px solid;border-radius: 3px;padding: 7px;">购买WINDOWS 10</a></li>
			</ul>
			<ul class="Choose-">
				<li style="font-size: 15px;"><a class="DL">登录</a></li>
				<li onmouseover="showUnder8()" onmouseout="hidUnder8()"><a href="#">购物车</a><span class="fa fa-shopping-cart fa-lg"></span></li>
				<li onmouseover="showUnder7()" onmouseout="hidUnder7()"><a href="#">搜索</a><span class="fa fa-search fa-lg"></span></li>
				<li id="three" onmouseover="showUnder6()" onmouseout="hidUnder6()"><a href="#">所有 Microsoft∨</a></li>
			</ul>
		</div>
		<div id="Under1" onmouseover="showUnderList1()" onmouseout="hidUnderList1()"></div>
		<div id="Under2" onmouseover="showUnderList2()" onmouseout="hidUnderList2()"></div>
		<div id="Under3" onmouseover="showUnder3()" onmouseout="hidUnder3()"></div>
		<div id="Under4" onmouseover="showUnder4()" onmouseout="hidUnder4()"></div>
		<div id="Under5" onmouseover="showUnder5()" onmouseout="hidUnder5()"></div>
		<div id="Under6" onmouseover="showUnder6()" onmouseout="hidUnder6()"></div>
		<div id="Under7" onmouseover="showUnder7()" onmouseout="hidUnder7()"></div>
		<div id="Under8" onmouseover="showUnder8()" onmouseout="hidUnder8()"></div>
		<div id="UnderList1" onmouseover="showUnderList1()" onmouseout="hidUnderList1()">
			<ul>
				<li id="Pro" onmouseover="changePro()" onmouseout="rechangePro()">获取 Windows 10 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li>
				<li id="Laptop" onmouseover="changeLaptop()" onmouseout="rechangeLaptop()">为什么使用Windows 10 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li>
				<li id="Go" onmouseover="changeGo()" onmouseout="rechangeGo()">功能  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li>
				<li id="Book" onmouseover="changeBook()" onmouseout="rechangeBook()">Window Maxed Reality &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li>
				<li id="Studio" onmouseover="changeStudio()" onmouseout="rechangeStudio()">比较Windows 10 的各个版本&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li>
				<li><a href="#">规格</a></li>
				
			</ul>
		</div>
		<div id="UnderList2" onmouseover="showUnderList2()" onmouseout="hidUnderList2()">
			<ul>
			<li><a href="#">概述</a></li>
			<li><a href="#">笔记本电脑</a></li>
			<li><a href="#">二合一设备</a></li>
			<li><a href="#">一体机</a></li>
			<li><a href="#">游戏电脑</a></li>
			<li><a href="#">Windows Mixed Reality 头戴显示设备</a></li>
			<li><a href="#">Windows Mixed Reality Ready PC</a></li>
			<li><a href="#">手机</a></li>
			<li><a href="#">查看所有 设备</a></li>
			</ul>
		</div>
	
	<div id="All" onmouseover="showUnder6()" onmouseout="hidUnder6()">
		<div class="AllNav">
			<ul>
				<li><a href="#">Office</a></li>
				<li><a href="#">Windows</a></li>
				<li><a href="#">Surface</a></li>
				<li><a href="#">Xbox</a></li>
				<li><a href="#">支持</a></li>
			</ul>
		</div>
		<div class="All_Nav">
			<h5>Software</h5>
			<ul>
				<li><a href="#">游戏</a></li>
				<li><a href="#">Onedrive</a></li>
				<li><a href="#">Outlook</a></li>
				<li><a href="#">Skype</a></li>
				<li><a href="#">OneNote</a></li>
			</ul>
		</div>
		<div class="All_Nav">
			<h5>Pcs & Devices</h5>
			<ul>
				<li><a href="#">Pcs & tablets</a></li>
				<li><a href="#">配件</a></li>
			</ul>
		</div>
		<div class="All_Nav">
			<h5>Entertainment</h5>
			<ul>
				<li><a href="#">Xbox 与游戏</a></li>
				<li><a href="#">游戏</a></li>
			</ul>
		</div>
		<div class="All_Nav">
			<h5>Business</h5>
			<ul>
				<li><a href="#">Miscrosoft Azure</a></li>
				<li><a href="#">Microsoft 365</a></li>
				<li><a href="#">Microsoft Industry</a></li>
				<li><a href="#">数据平台</a></li>
			</ul>
		</div>
		<div class="All_Nav">
			<h5>Developer & IT</h5>
			<ul>
				<li><a href="#">NET</a></li>
				<li><a href="#">Visual Studio</a></li>
				<li><a href="#">Windows Server</a></li>
				<li><a href="#">开发 Windows 应用</a></li>
				<li><a href="#">文档</a></li>
			</ul>
		</div>
		<div class="All_Nav">
			<h5>Other</h5>
			<ul>
				<li><a href="#">Microsoft Store</a></li>
				<li><a href="#">免费下载与安全性</a></li>
				<li><a href="#">教育</a></li>
			</ul>
		</div>
	</div>
	<!--导航结束-->
		<!--主页面-->
			<div class="b1"></div>
			<div>
			<div class="b2">
				<div class="b3">
					<div class="b4">
						<h1 class="b5">Windows 10 2020 年 10 月更新</h1>
						<p class="b6">为确保更佳体验，更新将在你的电脑做好准备时自动推送。<sup>*</sup></p>
						<div class="dgj">
						<a class="b7" href="#">立即更新>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
						<a class="b8" href="#">了解详细信息></a>
						</div>
					</div>
				</div>
			</div>
			<div class="b9">
				<div><img src="img/2.jpg"width="1355"height="508"></div>
			</div>
			<div class="b10"></div>
			<!--第二块-->
			<div class="c1">
				<div class="c2">需要我们帮助你找到哪些内容？</div>
			</div>
			
			<div class="c"></div>
			
			<div class="c3">
				<div class="c4">
				<div class="c5"><img src="img/3.jpg"width="296"height="166">
				<div class="c6">Windows 10 电脑</div>
				<p>Windows 10 是强大的新一代设备的佼佼者。</p>
				<div class="c7">购买设备></div>
				</div>
				
				
				
				<div class="c8"><img src="img/4.jpg"width="296"height="166">
				<div class="c9">Windows 10 操作系统</div>
				<p>总有一款Windows 10适合你-找到适合你的。</p>
				<div class="c10">购买WINDOWS 10家庭版></div>
				</div>
				
				
				<div class="c11"><img src="img/5.jpg"width="296"height="166">
				<div class="c12">功能</div>
				<p>享受最新的Windows 10 功能和内置的持续安全性。</p>
				<div class="c13">了解最新版本></div>
				</div>
				
			     
				<div class="c14"><img src="img/6.jpg"width="296"height="166">
				<div class="c15">支持</div>
				<p>获取Windows 10帮助、提示和常见问题解答。</p>
				<div class="c16">WINDOWS 10支持></div>
				</div>
			</div>
			<div class="C17"></div>
			
			<!--第三块-->
			<div class="d1"></div>
			<div>
			<div class="d2">
				<div class="d3">
					<div class="d4">
						<p class="d5">您需要了解有关Windows 7的知识</p>
						<p class="d6">在2020 年 1 月 14 日后，Microsoft将不再为运行Windows 7 的电脑提供安全更新程序或技术支持。了解如何为下一步做好准备。</p>
						<div class="d7">
						<a class="d8" href="#">了解详细信息></a>
						</div>
					</div>
				</div>
			</div>
			<div class="d9"></div>
			<!--第四块-->
			<div class="e1"></div>
			<div class="e2">
				<div class="e3">
				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						
					</ol>   
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img style="height: 500px;" src="img/7.jpg" alt="First slide">
						</div>
						
						<div class="item">
							<img style="height: 500px;" src="img/8.jpg" alt="Second slide">
							
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
				<!--切换-->
				
				<div class="e4">
						<div class="e6">耀出众</div>
						<div class="e7">了解 Surface 的新功能。</div>
						<div class="e8"><a href="#">选择您的SURFACE ></a></div>
				</div>
				
				</div>
			</div>
			
			<!--重复-->
			<div class="w1">
				<div class="w2">购买 Windows 10 设备</div>
			</div>
			
			<div class="w"></div>
			
			<div class="w3">
				<div class="w4">
				<div class="w5"><img src="img/9.jpg"width="296"height="166">
				<div class="w6">超薄、轻巧的笔记本电脑</div>
				<p>拥有让你心动的一切特点甚至更多 – 便携性、高性能以及最新的处理器。</p>
				<div class="w7">购买笔记本电脑></div>
				</div>
				
				
				
				<div class="w8"><img src="img/10.jpg"width="296"height="166">
				<div class="w9">多才多艺的二合一设备</div>
				<p>二合一设备兼具强大性能与灵活性。触控、键入、单击或触控笔 - 根据自己的风格随意选择。</p>
				<div class="w10">购买二合一设备></div>
				</div>
				
				
				<div class="w11"><img src="img/11.jpg"width="296"height="166">
				<div class="w12">台式机和一体机</div>
				<p>获得能够满足苛刻任务要求的性能而又不失时尚风格。</p>
				<div class="w13">购买台式机></div>
				</div>
				
			     
				<div class="w14"><img src="img/12.jpg"width="296"height="166">
				<div class="w15">¥4,000 以下的设备</div>
				<p>购买价格实惠的全新 Windows 10 设备</p>
				<div class="w16">购买￥4,000以下设备></div>
				</div>
			</div>
			<div class="w17"></div>
			
			<div class="w18"></div>
			
			
			<!--最后块-->
			<div class="n1">
				<div class="n2"><img src="img/15.PNG">
				<div class="n3">Windows预览体验计划</div>
				</div>
		
				<div class="n4"><img src="img/16.PNG">
				<div class="n5">Windows支持</div>
				</div>
			
				<div class="n6"><img src="img/17.PNG">
					<div class="n7">Windows博客</div>
				</div>
			
				<div class="n8"><img src="img/18.PNG">
				<div class="n9">访问社区</div>
				</div>
			</div>
			
			<div class="n10"></div>
			
			<div class="n11">
				<p>
					<sup>*</sup>Windows 10 2018 年 10 月更新通过 Windows 更新自动推送。下载完成后，我们会通知你选择正确的时间完成安装。如果你的 Windows 10 版本已达到<a href="#">服务终止</a>，请立即使用<a  href="#">更新助手</a>进行更新。
				</p>
			</div>
			<div class="n12"></div>
			
		<!--结尾-->
		<div class="BigFooter">
        <div class="BigFooterBase">
            <div class="BigFooterBaseNav">
                <div class="BigFooterBaseNavList">
                    <h4>新增内容</h4>
                    <ul>
                        <li><a href="#">全新 Surface pro 6</a>
                        </li>
                        <li><a href="#">全新 Surface Laptop 2</a>
                        </li>
                        <li><a href="#">全新 Surface Go</a>
                        </li>
                        <li><a href="#">Xbox One X</a>
                        </li>
						<li><a href="#">Xbox One S</a>
						</li>
                        <li><a href="#">Windows 10 应用程序</a>
                        </li>
                    </ul>
                </div>
                <div class="BigFooterBaseNavList">
                    <h4>应用商店和支持</h4>
                    <ul>
                        <li><a href="#">帐户个人资料</a>
                        </li>
                        <li><a href="#">下载中心</a>
                        </li>
                        <li><a href="#">订单跟踪</a>
                        </li>
                        <li><a href="#">支持</a>
                        </li>
                    </ul>
                </div>
                <div class="BigFooterBaseNavList">
                    <h4>教育</h4>
                    <ul>
                        <li><a href="#">Microsoft 教育领域</a>
                        </li>
                        <li><a href="#">适合学生的 Office</a>
                        </li>
                        <li><a href="#">适用于学校的 Office 365</a>
                        </li>
                        </li>
                        <li><a href="#">Microsoft Azure 教育领域</a>
                        </li>
                    </ul>
                </div>
                <div class="BigFooterBaseNavList">
                    <h4>企业</h4>
                    <ul>
                        <li><a href="#">企业</a>
                        </li>
						<li><a href="#">Microsoft Industry</a>
						</li>
                        <li><a href="#">数据平台</a>
                        </li>
                        <li><a href="#">查找解决方案提供商</a>
                        </li>
                        <li><a href="#">Microsoft 合作伙伴资源</a>
                        </li>
                        <li><a href="#">Microsoft AppSource</a>
                        </li>
                        <li><a href="#">医疗业</a>
                        </li>
                        <li><a href="#">金融服务</a>
                        </li>
                    </ul>
                </div>
                <div class="BigFooterBaseNavList">
                    <h4>开发人员</h4>
                    <ul>
                        <li><a href="#">Microsoft Visual Studio</a>
                        </li>
                        <li><a href="#">Windows 开发人员中心</a>
                        </li>
                        <li><a href="#">开发人员网络</a>
                        </li>
                        <li><a href="#">TechNet</a>
                        </li>
                        <li><a href="#">Microsoft 开发人员计划</a>
                        </li>
                        <li><a href="#">第9频道</a>
                        </li>
                        <li><a href="#">Office 开发人员中心</a>
                        </li>
                    </ul>
                </div>
                <div class="BigFooterBaseNavList">
                    <h4>公司</h4>
                    <ul>
                        <li><a href="#">招贤纳士</a>
                        </li>
                        <li><a href="#">关于 Microsoft</a>
                        </li>
                        <li><a href="#">公司新闻</a>
                        </li>
                        <li><a href="#">Microsoft 隐私</a>
                        </li>
                        <li><a href="#">投资人</a>
                        </li>
                        <li><a href="#">安全性</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="BigFooterBaseButtom">
            <div class="BigFooterBaseButtom1">
                <div class="BigFooterBaseButtom1left">
					<a href="#" style="color: #616161;"><img src="img/20.PNG" width="24px"  height="23px" align="center"/>  中文(中国)</a>
				</div>
                <div class="BigFooterBaseButtom1right">
					<ul>
						<li><a href="#">与 Microsoft 联系</a></li>
						<li><a href="#">隐私与 Cookie</a></li>
						<li><a href="#">使用条款</a></li>
						<li><a href="#">商标</a></li>
						<li><a href="#">关于我们的广告</a></li>
						<li><a href="#">京ICP备09042378号-6</a></li>
						<li><a href="#">京公网安备 11010802023178</a></li>
						<li> © Microsoft 2019</li>
					</ul>
				</div>
            </div>
        </div>
    </div>
			

</div>
	</div>
			</div>
			</div>
			</div>
			
	</body>
</html>

CSS代码如下：

Foot.css

.HeaderBase{
	padding-left: 5%;
	padding-right: 0%;
	width: 95%;
	height: 54px;
}

.Logo{
	float: left;
	height: 54px;
	
}

.Logo a img{
	padding-top: 14px;
	height: 38.5px;
}

.VerticalLine{
	line-height: 47px;
	text-align: center;
	width: 40px;
	height: 54px;
	padding-left: 10px;
	float: left;
	font-size: 22px;
}

.Surface{
	height: 54px;
	float: left;
}

.Surface a{
	text-decoration: none;
	height: 54px;
}

.Surface a span{
	font-size: 18px;
	line-height: 54px;
	text-align: center;
	color: black;
}

.Choose{
	height: 54px;
	float: left;
	list-style: none;
}

.Choose li{
	height: 54px;
	text-align: center;
	line-height: 54px;
	font-size: 13px;
	padding: 0px 15px;
	float: left;
}

.Choose li a{
	color: #262626;
	text-decoration: none;
}

.Purchase:hover{
	text-decoration:underline;
}

.Choose-{
	height: 54px;
	float: right;
	list-style: none;
}


.Choose- li{
	height: 54px;
	text-align: center;
	line-height: 54px;
	font-size: 13px;
	padding: 0px 20px;
	float: right;
}

.Choose- li a{
	color: #262626;
	text-decoration: none;
}

.Choose- li .DL:hover{
	color: #0067b8;
	cursor:pointer;
}

.Choose- li a{
	color: #262626;
	text-decoration: none;
}

#Under1{
	height: 2px;
	width: 83px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	left: 317px;
	display: none;
}

#Under2{
	height: 2px;
	width: 27px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	left: 430px;
	display: none;
}

#Under3{
	height: 2px;
	width: 33px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	left: 491px;
	display: none;
}

#Under4{
	height: 2px;
	width: 30px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	left: 548px;
	display: none;
}

#Under5{
	height: 2px;
	width: 60px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	left: 604px;
	display: none;
}

#Under6{
	height: 2px;
	width: 90px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	right: 314px;
	display: none;
}

#Under7{
	height: 2px;
	width: 30px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	right: 243px;
	display: none;
}

#Under8{
	height: 2px;
	width: 40px;
	background-color: #262626;
	position: absolute;
	top: 36px;
	right: 166px;
	display: none;
}

#UnderList1{
	height: 260px;
	width: 254px;
	background-color: #f2f2f2;
	position: absolute;
	top: 53px;
    left: 304px;
	display: none;
}

#UnderList2{
	height: 425px;
	width: 254px;
	background-color: #f2f2f2;
	position: absolute;
	top: 53px;
	left: 414px;
	display: none;
}

#UnderList1 ul{
	list-style: none;
}

#UnderList1 ul:hover{
	cursor:default;
}

#UnderList1 ul li a{
	text-decoration: none;
	color: #262626;
}

#UnderList1 ul li a:hover{
	text-decoration:underline;
}

#UnderList2 ul{
	list-style: none;
}

#UnderList1 ul li{
	font-size: 13px;
	color: #262626;
	padding: 10px 20px;
}

#one{
	background-color: white;
}

#two{
	background-color: white;
}

#UnderList2 ul li{
	font-size: 13px;
	color: #262626;
	padding: 14px 17px;
}

#UnderList2 ul li a{
	text-decoration: none;
	color: #262626;
}

#UnderList2 ul li a:hover{
	text-decoration:underline;
}

#UnderList1more{
	height: 371px;
	width: 254px;
	background-color: #e6e6e6;
	position: absolute;
	top: 53px;
	left: 547px;
	display: none;
}

#UnderList1more ul{
	list-style: none;
}



#UnderList1more ul li a{
	text-decoration: none;
	color: #262626;
}

#UnderList1more ul li a:hover{
	text-decoration: underline;
}

#All{
	width: 1200px;
	height: 350px;
	background-color: #f2f2f2;
	position: absolute;
	top: 53px;
	right: 90px;
	display: none;
}

.AllNav{
	width: 100%;
	height: 43px;
	border-bottom: 2px;
	border-style: solid;
	border-bottom-color: #d3d3d3;
}

.AllNav ul li{
	line-height: 43px;
	text-align: center;
	padding-left: 30px;
	padding-right: 40px;
	font-size: 13px;
	color: #262626;
	float: left;
}

#All a{
	text-decoration: none;
	color: #262626;
}

#All a:hover{
	text-decoration: underline;
}

#All ul{
	list-style: none;
}

.All_Nav{
	width: 200px;
	float: left;
}

.All_Nav h5{
	padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
}

.All_Nav ul li{
	font-size: 13px;
	padding-top: 7px;
	padding-left: 20px;
	padding-bottom: 20px;
}

*{
	margin: 0;
	border: 0;
	padding: 0;
}
.BigFooter{
	height: 350px;
	width: 100%;
	background-color: #f2f2f2;
}

.BigFooterBase{
	height: 350px;
	width: 1200px;
	margin: 0 auto;
}

.BigFooterBaseNav{
	height: 350px;
	width: 1200px;
}

.BigFooterBaseNavList{
	height: 350px;
	width: 190px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
}

.BigFooterBaseNavList h4{
	font-size: 15px;
	color: #616161;
	padding-top: 20px;
	padding-bottom: 4px;
}

.BigFooterBaseNavList ul{
	list-style: none;
}

.BigFooterBaseNavList ul li{
	padding: 6px 0px;
}

.BigFooterBaseNavList ul li a{
	font-size: 11px;
	color: #616161;
	text-decoration: none;
}

.BigFooterBaseNavList ul li a:hover{
	text-decoration: underline;
}

.BigFooterBaseButtom{
	width: 100%;
	height: 50px;
	background-color: #f2f2f2;
}

.BigFooterBaseButtom1{
	width: 1200px;
	height: 50px;
	margin: 0 auto;
	color: black;
	font-size: 15px;
	line-height: 50px;
}

.BigFooterBaseButtom1left{
	width: 30%;
	float: left;
	font-size: 11px;
}

.BigFooterBaseButtom1right{
	width: 70%;
	float: right;
	text-align: left;
}

.BigFooterBaseButtom1right ul{
	list-style: none;
}

.BigFooterBaseButtom1right ul li a{
	color: #616161;
	padding-right: 20px;
	font-size: 11px;
	text-decoration: none;
}

.BigFooterBaseButtom1right ul li{
	color: #616161;
	font-size: 11px;
	float: left;
}

.BigFooterBaseButtom1right ul li a:hover {
	text-decoration: underline;
}

ms.css:

*{
	margin: 0;
	padding: 0;
	border: 0;
}
/*整个页面*/
.page{
	width: 100%;
	height: auto;
}
/*页眉*/

	
/*主页面*/
.b1{
	width: 100%;
	height: 48px;
	
}
.b2{
	width: 100%;
	height: 205px;
}
.b3{
	width: 100%;
	height: 205px;
}
.b4{
	width: 1000px;
	height: 205px;
	margin: auto;
}
.b5{
	font-size: 62px;
    line-height: 78px;
    padding: 38px 10 6px;
    font-weight: 100;
    letter-spacing: 5px;
    text-align: center;
}
.b6{
	text-align: center;
	font-size: 18px;
    line-height: 28px;
    padding: 25px 0 3px;
    font-weight: 200;
    letter-spacing: -.01em;
}
.dgj{
	width: 1000px;
	height: 68px;
}
.b7{
	width: 60px;
	height: 19px;
	line-height: 36px;
	cursor: pointer;
    text-decoration: none;
    color: #0067B8;
    margin-left: 380px;
    font-weight: 400;
}
.b8{
	width: 60px;
	height: 19px;
	line-height: 36px;
	cursor: pointer;
    text-decoration:none;
    color: #0067B8;
    font-weight: 400;
}
.b9{
	width: auto;
	height: 508px;
	margin-left: 80px;
}
.b10{
	width: auto;
	height: 85px;
	border-bottom:1px solid #ccc;
	margin-left: 80px;
	margin-right: 80px;
}
/*第二块*/
.c1{
	width: auto;
	height: 143px;
}
.c2{
	width: 1000px;
	height: 59px;
	font-size: 46px;
    line-height: 56px;
    margin-left: 280px;
   text-align: center;
    font-weight: 100;
    padding-top: 80px;
}
.c{
	width: auto;
	height: 85px;
}
.c3{
	width: auto;
	height: 322px;
}
.c4{
	width: 1306px;
	height: 320px;
	margin-left: 120px;
}
/*一*/
.c5{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.c6{
	width: 296px;
	height: 44px;
	font-size: 24px;
	line-height: 24px;
}
.c7{
	width: 94px;
	height: 44px;
	margin-top: 20px;
	margin-left: 110px;
	cursor: pointer;
	color: #0067B8;
	
}
/*二*/
.c8{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.c9{
	width: 296px;
	height: 44px;
	font-size: 24px;
	line-height: 24px;
	
}
.c10{
	width: 210px;
	height: 44px;
	margin-top: 20px;
	margin-left: 50px;
	cursor: pointer;
	color: #0067B8;
}
/*三*/
.c11{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.c12{
	width: 296px;
	height: 44px;
	font-size: 24px;
	line-height: 24px;
	
}
.c13{
	width: 210px;
	height: 44px;
	margin-top: 20px;
	margin-left: 50px;
	cursor: pointer;
	color: #0067B8;
}
/*四*/
.c14{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.c15{
	width: 296px;
	height: 44px;
	font-size: 24px;
	line-height: 24px;
	
}
.c16{
	width: 210px;
	height: 44px;
	margin-top: 20px;
	margin-left: 50px;
	cursor: pointer;
	color: #0067B8;
}
.C17{
	width: auto;
	height: 49px;
	border-bottom:1px solid #ccc;
	margin-left: 80px;
	margin-right: 80px;
}
/*第三块*/
.d1{
	width: 100%;
	height: 48px;
}
.d2{
	width: 100%;
	height: 205px;
}
.d3{
	width: 100%;
	height: 205px;
}
.d4{
	width: 1000px;
	height: 205px;
	margin: auto;
	
}
.d5{
	width: 587px;
	height: 40px;
    text-align: center;
    font-size: 36px;
    line-height: 54px;
    font-weight: 300;
    margin-left: 205px;
}
.d6{
	width: 587px;
	height: 76px;
	text-align: center;
	font-size: 18px;
    line-height: 28px;
    padding: 25px 22px 3px;
    font-weight: 200;
    letter-spacing: -.01em;
    margin-left: 200px;
}
.d7{
	width: 1000px;
	height: 68px;
}

.d8{
	margin-left: 430px;
	width: 90px;
	height: 19px;
	line-height: 36px;
	cursor: pointer;
    text-decoration:none;
    color: #0067B8;
}
.d9{
	width: auto;
	height: 49px;
	border-bottom:1px solid #ccc;
	margin-left: 80px;
	margin-right: 80px;
	
}
/*第四块*/
.e1{
	width: auto;
	height: 84px;
	
}
.e2{
	width: auto;
	height: 650px;
	margin-left: 20px;
	
}
.e3{
	margin-left: 80px;
}

/*切换*/
 .e4{
	width: 1333px;
	height: 150px;
	
}

.e6{
	width: 1333px;
	height: 50px;
	text-align: center;
	font-size: 35px;
	margin-top: 20px;
}
.e7{
	width: 1333px;
	height: 50px;
	text-align: center;
	font-size: 20px;
}
.e8{
	width: 1333px;
	height: 50px;
	text-align: center;
	font-size: 20px;
	color: #0067B8;
	cursor: pointer;
}
/*重复*/
.w1{
	width: auto;
	height: 143px;
}
.w2{
	width: 1000px;
	height: 59px;
	font-size: 46px;
    line-height: 56px;
    margin-left: 280px;
   text-align: center;
    font-weight: 100;
    padding-top: 80px;
}
.w{
	width: auto;
	height: 85px;
}
.w3{
	width: auto;
	height: 322px;
}
.w4{
	width: 1306px;
	height: 320px;
	margin-left: 120px;
}
/*一*/
.w5{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.w6{
	width: 299px;
	height: 44px;
	font-size: 24px;
	
}
.w7{
	width: 110px;
	height: 44px;
	margin-top: 20px;
	
	cursor: pointer;
	color: #0067B8;
	
}
/*二*/
.w8{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.w9{
	width: 296px;
	height: 44px;
	font-size: 24px;
	line-height: 24px;
	
}
.w10{
	width: 210px;
	height: 44px;
	margin-top: 20px;
	margin-left: -37px;
	cursor: pointer;
	color: #0067B8;
}
/*三*/
.w11{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.w12{
	width: 296px;
	height: 44px;
	font-size: 24px;
	line-height: 24px;
	
}
.w13{
	width: 210px;
	height: 44px;
	margin-top: 20px;
	margin-left: -45px;
	cursor: pointer;
	color: #0067B8;
}
/*四*/
.w14{
	width: 320px;
	height: 320px;
	text-align: center;	
	float: left;
}
.w15{
	width: 296px;
	height: 44px;
	font-size: 24px;
	line-height: 24px;
	
}
.w16{
	width: 210px;
	height: 44px;
	margin-top: 38px;
	margin-left: 10px;
	cursor: pointer;
	color: #0067B8;
}
.w17{
	width: auto;
	height: 49px;
	text-decoration overline:1px solid #ccc;
	margin-left: -37px;
	margin-right: 80px;
}
.w18{
	width: auto;
	height: 60px;
	border-top:1px solid #ccc;
	margin-left: 80px;
	margin-right: 80px;
	
}
/*最后块*/
.n1{
	width: auto;
	height: 160px;
	border-bottom:1px solid #ccc;
	margin-left: 7px;
	margin-right: 80px;
}
.n2{
	width: 50px;
	height: 50px;
	margin-left: 200px;
	margin-top: 30px;
}
.n3{
	width: 155px;
	height: 28px;
	margin-left: -27px;
	margin-top: 30px;
	float: left;
	text-decoration:underline;
	color: #0067B8;
	cursor: pointer;
}
.n4{
	width: 50px;
	height: 50px;
	margin-left: 550px;
	margin-top: -50px;
}
.n5{
	width: 155px;
	height: 28px;
	margin-left: -8px;
	margin-top: 30px;
	color: #0067B8;
	text-decoration:underline;
	cursor: pointer;
}
.n6{
	width: 50px;
	height: 50px;
	margin-left: 900px;
	margin-top: -50px;
}
.n7{
	width: 155px;
	height: 28px;
	margin-left: 3px;
	margin-top: 30px;
	color: #0067B8;
	text-decoration:underline;
	cursor: pointer;
}
.n8{
	width: 50px;
	height: 50px;
	margin-left: 1200px;
	margin-top: -50px;
}
.n9{
	width: 155px;
	height: 28px;
	margin-left: 13px;
	margin-top: 30px;
	color: #0067B8;
	text-decoration:underline;
	cursor: pointer;
}
.n10{
	width: auto;
	height: 84px;
	margin-left: 80px;
}
.n11{
	width: auto;
	height: 64px;
	background-color: #333;
	padding-top: 20px;
	text-align: center;
	font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    color: white;
}
.n12{
	width: auto;
	height: 100px;
}
/*结尾*/
.BigFooter{
	height: 350px;
	width: 100%;
	background-color: #f2f2f2;
}

.BigFooterBase{
	height: 350px;
	width: 1200px;
	margin: 0 auto;
}

.BigFooterBaseNav{
	height: 350px;
	width: 1200px;
}

.BigFooterBaseNavList{
	height: 350px;
	width: 180px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
}

.BigFooterBaseNavList h4{
	font-size: 15px;
	color: #616161;
	padding-top: 20px;
	padding-bottom: 4px;
}

.BigFooterBaseNavList ul{
	list-style: none;
}

.BigFooterBaseNavList ul li{
	padding: 6px 0px;
}

.BigFooterBaseNavList ul li a{
	font-size: 11px;
	color: #616161;
	text-decoration: none;
}

.BigFooterBaseNavList ul li a:hover{
	text-decoration: underline;
}

.BigFooterBaseButtom{
	width: 100%;
	height: 50px;
	background-color: #f2f2f2;
}

.BigFooterBaseButtom1{
	width: 1200px;
	height: 50px;
	margin: 0 auto;
	color: black;
	font-size: 15px;
	line-height: 50px;
}

.BigFooterBaseButtom1left{
	width: 30%;
	float: left;
	font-size: 11px;
}

.BigFooterBaseButtom1right{
	width: 70%;
	float: right;
	text-align: left;
}

.BigFooterBaseButtom1right ul{
	list-style: none;
}

.BigFooterBaseButtom1right ul li a{
	color: #616161;
	padding-right: 20px;
	font-size: 11px;
	text-decoration: none;
}

.BigFooterBaseButtom1right ul li{
	color: #616161;
	font-size: 11px;
	float: left;
}

.BigFooterBaseButtom1right ul li a:hover {
	text-decoration: underline;
}

.bg{
	background-color: red;
}

过分优秀
关注
专栏目录
HTML+CSS仿BMW官网
weixin_50926516的博客
12-17 4437
看着苹果官网使劲敲代码。 我的期末作业。 先看看两张参考图片。。。 再来一个参考视频。。。。。 乐爷宝马 - 360极速浏览器 12.0 2020-12-17 20-14-05 再来看看我敲的东东。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
一文详解spring循环依赖
ksisn的博客
12-06 432
一文详解Spring循环依赖 什么是循环依赖？ 大家都知道spring的核心是一个实现了AOP的IOC容器，那么IOC容器对于bean的初始化，会遇到以下情况：当BeanA初始化时，它依赖的对象BeanB也需要执行初始化，如果BeanB里也依赖了BeanA,则又会开始执行BeanA的初始化，那么这样会无限循环，导致初始化异常如下所示。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hLomiOY-1607186217719)(%E4%B8%80%E6%96%87%E8%AF
仿windows web桌面
12-16
web桌面 js桌面 仿windows桌面 仿windows web桌面 jsp桌面 一款与windows一样操作效果的js web桌面程序.
一个仿Windows10界面的网页导航
08-10
一个仿Windows 10界面的网页导航
HTML/CSS大作业--仿联想官网
qq_52659550的博客
12-03 2723
用到了一些图片跟轮播插件 效果图如下 唔~~有亿点点粗糙 代码如下：忘记哪是哪了，就不分开了 <!DOCTYPE html> <html> <head> <title>联想</title> <link rel="stylesheet" href="dist1\swiper-bundle.min.css"> <meta charset="utf-8"> <style type="te...
html+css仿写NIKE官网静态页面
lucky_kundy的博客
03-27 2236
第一次较完整的网页，没有动画，纯静态，没有调式各种窗口大小，谷歌浏览器缩放90%为正常比例 部分效果图 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="view...
HTML+CSS仿小米官网首页 项目总结
weixin_48701221的博客
08-25 3864
使用css+html仿写小米官网首页静态页面
web前端网页制作课作业：甜甜圈蛋糕店(HTML+CSS+JavaScript)
08-10
- **Dreamweaver**：一款集网页制作和管理网站于一身的所见即所得网页编辑器，适用于网页初学者，提供直观的操作界面和丰富的功能。 - **HBuilder**：国内开发的一款速度最快的Web前端IDE，专为前端工程师量身打造。...
HTML+CSS+JS网页设计期末课程大作业——上海旅游景点（10页）web前端开发技术 web课程设计 网页规划与设计
08-10
- **HBuilder**: 一款快速开发IDE，支持HTML5，适用于Web前端开发。 - **VSCode**: 微软开发的一款免费开源的现代化轻量级代码编辑器，支持多种编程语言。 - **Sublime Text**: 一款跨平台的文字编辑器，支持插件...
HTML网页设计结课作业——基于HTML+CSS仿学校官网页面
08-10
该任务不仅要求学生能够熟练运用前端技术构建网页的基本结构，还需要考虑网页的美观性与交互性，以提升用户体验。 #### 二、技术栈与工具 - **HTML5**: 用于定义和组织网页内容的标准标记语言。 - **CSS3**: 用于...
仿windows UI html
08-19
仿windows UI html 大家共同学习
用JS做的仿WINDOWS的WEB页
08-26
用JS做的仿WINDOWS的WEB页，对于某些应用开发很有帮助，实在是写不出描述了，再凑点字！
仿桌面web框架
11-04
仿桌面的web框架，像windows一样的操作界面，适合开发应用类web项目
html+css+js仿windows桌面、windows窗口
04-13
用html、css、js实现的windows桌面和窗口。包括开始菜单、状态蓝、窗口等。和windows系统操作方法一样，如双击图标打开窗口，不用的窗口最小化到状态蓝，右击桌面图标可打开右键菜单。开始菜单中附件---游戏中有常见游戏。有适用万年历和设置壁纸功能。壁纸设置和windows设置壁纸一样。 你还可以自己新建新窗口，创建方法已封装好。可以自己修改开始菜单，桌面图标右键菜单。 窗口有最大化最小化还原功能。 每个窗口可以指向一个页面作为显示内容，可以做系统界面。 如果作为web项目主界面可以让用户像操作windows一样操作web程序。
【web网页设计期末课程大作业】基于HTML+CSS+JavaScript仿山东传媒职业站.md
08-10
通过这些特性，设计师可以轻松地创建出具有现代感和吸引力的网页界面。 #### 3. JavaScript JavaScript 是一种广泛使用的脚本语言，通常被用来向网页添加动态效果。通过JavaScript，可以实现用户交互功能，如动态...
基于HTML / CSS的.NetGUI封装.zip
05-09
基于以上信息，我们可以推断这个项目的核心是将一个Web渲染引擎（如Chromium的blink引擎的一个轻量级版本）集成到.NET环境中，使得开发者可以使用HTML和CSS来定义应用程序的界面。这样的库通常提供API来处理事件绑定...
WEB前端之网页设计①----最新最全详解/网页基础结构
qq_42129729的博客
09-09 9370
WEB前端之网页设计—-最全详解/网页基础结构① 一、网页的基础结构 &amp;amp;amp;lt;!doctype html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=”UTF-8”&amp;amp;amp;gt; &a
实现仿Windows程序无刷新的Web应用（Inber 个人收藏）
Inber
06-11 2560
实现仿Windows程序无刷新的Web应用 http://www.cnblogs.com/shangmeizhai/archive/2004/09/09/41421.aspx 现在一部分Web程序开发人员在做B/S程序时，其界面表现上模仿了C/S结构的windows程序，使得其程序看起来既美观又有创意，他们努力把IE的外观屏蔽掉，比如去除了IE的菜单栏，去除了IE的工具栏，甚至用ActiveX控件
web前端仿网易云官网
m0_58190791的博客
09-23 1688
网站主要运用了 html，css，JS。 只展示了部分重要的几部分 页面效果展示 头部切换运用了for循环 头部css .box-first { width: 1100px; height: 100%; margin: 0 auto; } .logo { float: left; width: 176px; .
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值