前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）

前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）

注意：网页中的示例图片均出自米哈游–原神官网设计，如侵权，联系博主立马进行删除。

目标：网页实现前端图片＋文字显示（轮播图片+文字）。代码重点：轮播等等。

头部logo部分

HTML代码：

<div class="navbar">
		<div class="logo"><a href="html.html"><img src="logo.png"></a></div>
		<div class="word"><span><a href="web2.html">公司简介</a></span></div>
		<div class="word1"><span><a href="web3.html">社会招聘</a></span></div>
		<span class="word1"><a href="web4.html">加入我们</a></span>
		<span class="word1"><a href="web5.html">联系我们</a></span>
		<span class="word1"><a href="web6.html">米哈游成长关爱平台</a></span>
	</div>

CSS代码：

.navbar{
	width: 100%;
	height: 100px;
	background-color:#fff;
    border-bottom: 3px solid #4cd7e8;
    margin-bottom: 0px;
    position: relative;
    text-align: center;
	cursor: pointer;
}
.navbar .logo{
	width: 214px;
	height: 94px;
	float: left;
	margin-left: 250px;
	padding-top:10px;
}
.word{
	padding-left:150px;
	padding-top:  50px;
	font-size: 20px;
	float: left;
}
a{
	text-decoration: none;
	color: aqua;
}
.word1{
	padding-left:50px;
	padding-top: 50px;
	font-size: 20px;
	float: left;
}

头部主要作用是给用户起到一个导航和了解的作用。

（重点）轮播图

HTML代码：

<div id= "parent">
			<div id="uls">
				<ul id="img_ul">
					<li><img src="1.jpg"/></li>
					<li><img src="2.jpg"/></li>
					<li><img src="3.jpg"/></li>
				</ul>
				<ul id='litCir_ul'></ul>
			</div>
			<div id="buttons">
				<span id="left">&lt;</span>
				<span id="right">&gt;</span>
			</div>
		</div>

CSS代码：

#parent{
    position: rel