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

最新推荐文章于 2024-06-15 21:29:25 发布
最新推荐文章于 2024-06-15 21:29:25 发布
阅读量2.1k 收藏 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;
}

过分优秀
关注
  • 3
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
利用HTML完成登陆界面设计
weixin_43694643的博客
03-19 5721
原本是想用表单形式设计，但是由于最后没有得到想要的效果，就用了div设计，但是我觉得div似乎有点多，容易混乱，不过由于懒癌作祟，所以没改。 以下是代码源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录界面</title> </head> <style type="text/css"> *{ margin:
html+css仿写NIKE官网静态页面
lucky_kundy的博客
03-27 2176
第一次较完整的网页，没有动画，纯静态，没有调式各种窗口大小，谷歌浏览器缩放90%为正常比例 部分效果图 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="view...
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整vue聊天窗口列表（超实用）轻松搞定简单聊天功能：完整源代码与详细教程（新手必看）轻松入门前端开
最新发布
南北极之间
06-15 1202
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
【前端】【HTML+CSS+JavaScript(JS)】简易登陆界面的实现
cc2855816075的博客
02-12 2969
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ font-family: "微软雅黑"; border: 0px solid #464646; margin-top: 15px; } #log
HTML+CSS仿BMW官网
weixin_50926516的博客
12-17 4373
看着苹果官网使劲敲代码。 我的期末作业。 先看看两张参考图片。。。 再来一个参考视频。。。。。 乐爷宝马 - 360极速浏览器 12.0 2020-12-17 20-14-05 再来看看我敲的东东。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
一文详解spring循环依赖
ksisn的博客
12-06 418
一文详解Spring循环依赖 什么是循环依赖？ 大家都知道spring的核心是一个实现了AOP的IOC容器，那么IOC容器对于bean的初始化，会遇到以下情况：当BeanA初始化时，它依赖的对象BeanB也需要执行初始化，如果BeanB里也依赖了BeanA,则又会开始执行BeanA的初始化，那么这样会无限循环，导致初始化异常如下所示。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hLomiOY-1607186217719)(%E4%B8%80%E6%96%87%E8%AF
HTML/CSS大作业--仿联想官网
qq_52659550的博客
12-03 2579
用到了一些图片跟轮播插件 效果图如下 唔~~有亿点点粗糙 代码如下：忘记哪是哪了，就不分开了 <!DOCTYPE html> <html> <head> <title>联想</title> <link rel="stylesheet" href="dist1\swiper-bundle.min.css"> <meta charset="utf-8"> <style type="te...
HTML+CSS仿小米官网首页 项目总结
weixin_48701221的博客
08-25 3715
使用css+html仿写小米官网首页静态页面
仿windows web桌面
12-16
web桌面 js桌面 仿windows桌面 仿windows web桌面 jsp桌面 一款与windows一样操作效果的js web桌面程序.
基于HTML / CSS的.NetGUI封装.zip
05-09
基于以上信息，我们可以推断这个项目的核心是将一个Web渲染引擎（如Chromium的blink引擎的一个轻量级版本）集成到.NET环境中，使得开发者可以使用HTML和CSS来定义应用程序的界面。这样的库通常提供API来处理事件绑定...
.net前端界面框架源码20170808
01-12
.NET前端界面框架是用于构建用户交互界面的工具集，它主要负责将数据和业务逻辑转化为用户可见并可操作的元素。此源码包名为".net前端界面框架源码20170808"，可能包含了一套特定日期（2017年8月8日）的.NET前端开发...
仿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程序。
一个仿Windows10界面的网页导航
08-10
一个仿Windows 10界面的网页导航
jQuery+CSS3仿windows8 Metro风格界面布局效果
09-20
总的来说，这个项目展示了如何通过jQuery和CSS3的结合，实现具有动态交互和现代视觉效果的前端界面，这在现代网页和应用开发中是非常常见的做法。通过学习和实践这样的项目，开发者可以提升自己的前端技能，更好地...
.net 前端界面网站框架
01-11
《.NET前端界面网站框架深度解析》 在现代互联网开发中，前端界面设计与实现扮演着至关重要的角色。本文将围绕".NET前端界面网站框架"这一主题，深入探讨其设计理念、核心特性以及如何构建出“漂亮的左侧导航，右侧...
web网页设计（c#）：学生管理系统
08-13
【描述】"学生管理系统 C#语言 web大作业 数据库的增删改查"表明该系统的核心是通过C#进行后端开发，利用Web技术展示前端界面，并与数据库交互以实现数据管理。数据库操作是系统的核心部分，包括添加新学生记录（Add...
帮我用bootstrap4写一个有关诗词歌赋的主页，带有轮播图，导航栏，下拉菜单，字体图标、按钮组、输入框组、巨幕、缩略图、列表组、面板、媒体对象等组件
06-09
好的，我可以帮您实现这个需求。以下是一个简单的示例页面： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>诗词歌赋主页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.13.0/css/all.min.css"> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">诗词歌赋</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">诗歌</a> </li> <li class="nav-item"> <a class="nav-link" href="#">词曲</a> </li> <li class="nav-item"> <a class="nav-link" href="#">赋文</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 更多 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">唐诗三百首</a> <a class="dropdown-item" href="#">宋词精选</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">古诗词大全</a> </div> </li> </ul> </div> </nav> <!-- 轮播图 --> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://picsum.photos/id/1018/1920/600" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/1015/1920/600" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/1016/1920/600" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- 巨幕 --> <div class="jumbotron"> <h1 class="display-4">诗词歌赋</h1> <p class="lead">一种文学艺术形式</p> <hr class="my-4"> <p>诗是用语言来表现人类生活、情感、思想的一种文学艺术形式，是文学的重要组成部分。 </p> <a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a> </div> <!-- 列表组 --> <div class="container"> <div class="row"> <div class="col"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> 诗歌 </a> <a href="#" class="list-group-item list-group-item-action">唐诗三百首</a> <a href="#" class="list-group-item list-group-item-action">宋词精选</a> <a href="#" class="list-group-item list-group-item-action">元曲选</a> </div> </div> <div class="col"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> 词曲 </a> <a href="#" class="list-group-item list-group-item-action">红楼梦词</a> <a href="#" class="list-group-item list-group-item-action">宋词精选</a> <a href="#" class="list-group-item list-group-item-action">元曲选</a> </div> </div> <div class="col"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> 赋文 </a> <a href="#" class="list-group-item list-group-item-action">韩愈集</a> <a href="#" class="list-group-item list-group-item-action">唐宋八大家</a> <a href="#" class="list-group-item list-group-item-action">元曲选</a> </div> </div> </div> </div> <!-- 媒体对象 --> <div class="container"> <div class="media"> <img src="https://picsum.photos/id/1020/200/200" class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">李白</h5> 李白（701年－762年），字太白，号青莲居士，唐朝浪漫主义诗人，被后人誉为“诗仙”。 </div> </div> <div class="media"> <img src="https://picsum.photos/id/1021/200/200" class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">杜甫</h5> 杜甫（712年－770年），字子美，自号少陵野老，唐代伟大的现实主义诗人，与李白合称“李杜”。 </div> </div> <div class="media"> <img src="https://picsum.photos/id/1022/200/200" class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">白居易</h5> 白居易（772年－846年），字乐天，唐代中期著名的诗人、文学家、书法家、政治家等多重身份。 </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> </body> </html> ``` 此页面包含了以下组件： - 导航栏 - 轮播图 - 巨幕 - 下拉菜单 - 列表组 - 媒体对象 - 字体图标 - 按钮组 - 输入框组 - 面板 请根据您的需求进行修改和调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值