阴阳师页面

body部分

<div class="header">
		<div class="news">
			<div class="inner">
				<div class="download-wrap">
					<div class="download">
						<ul>
							<li class="code">
								<img class="er" src="../images/erweima.png" alt="">
								<img class="line" src="../images/line.png">
							</li>
							<li class="but">
								<a href="#" title="下载桌面版"></a><!--a标签是一个内联元素标签,不支持宽高和大小,给一个转换-->
							</li>
						</ul>	
					</div>
				</div>
				<div class="news-desc">
					<div class="tab">新闻资讯<i></i></div>
					<div class="content">
						<ul>
							<li>
								<img src="../images/01(1).png" alt="">
							</li>
							<li>
								<img src="../images/02(1).jpg" alt="">
							</li>
							<li>
								<img src="../images/03(1).jpg" alt="">
							</li>
							<li>
								<img src="../images/04(1).jpg" alt="">
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>

css部分

 /*样式表书写地址*/
	body,ul{/*多元素选择器,中间逗号隔开*/
		margin:0;/*外边距:0;*/
		padding:0;/*内边距*/
	}
	ul{list-style:none;}/*清除ul前面的标识小黑圆点*/
	.header{/*选择class类名: . + 类名{ 样式表 }*/
		position:relative;/*定位:相对定位*/
		width:100%;/*宽度:100%;(继承父级的宽度)*/
		height:844px;/*高度*/
		background-image:url("../images/banner_a6225ba.jpg");/*背景图片:图片路径;*/
		background-repeat:no-repeat;/*背景平铺:不平铺;*/
	}
	.news{
		position:absolute;/*定位:绝对定位;*/
		width:100%;
		height:287px;
		bottom:0;/*位置变化关键词:下边*/
		/*background-image:url("images/bot_head_bg_450ba6b.png");
		background-repeat:repeat-x;/*x轴方向是平铺*/
		/*background-position:0 bottom;*/
		background:url("../images/bot_head_bg_450ba6b.png") repeat-x 0 bottom;
	}
	.news .inner{
		width:1180px;
		height:100%;
		margin:0 auto;/*auto自适应左右居中*/
	}
	.news .download-wrap{
		float:left;
		width:145px;
		height:240px;
		padding-top:47px;/*上内边距*/
		background-image:url("../images/index_z_71df05e.png");
		background-repeat:no-repeat;/*背景平铺:不平铺;*/
	}
	.news .download{
		width:107px;
		height:224px;
		margin:auto;
	}
	.news .download ul li{
		position:relative;
		width:100%;
		height:107px;
	}
	.code .er{
		width:100%;
		height:100%;
	}
	.code .line{
		position:absolute;
		top:0;/*上*/
		left:-7px;/*左*/
		animation:run 4s linear infinite;/*动画属性:动画名称 动画执行时间 速度 执行次数*/
	}
	@keyframes run{/*设置动画帧 , 这个run是随便取的动画名字*/
		0%{top:0;}
		50%{top:96px;}
		100%{top:0;}/*时间轴,从0%-100%*/
	}
	.news .download .but a{
		display:block;/*元素类型转换:块*/
		width:100%;
		height:107px;
		margin-top:10px;
		background-image:url("../images/zmb_bg_b51e4c7.jpg");
	}
	.news-desc{
		float:right;/*浮动:有浮动*/
		width:1021px;
		height:100%;
	}
	.news-desc .tab{
		width:162px;
		height:43px;
		background-color:rgba(0,0,0,.8);/*rgba:red green blue opacity(透明度)*/
		text-align:center;/*文字居中*/
		line-height:34px;/*字体和字体之间上下的高度*/
		letter-spacing:3px;/*字与字之间的距离*/
		color:#c2a060;
	}
	.news-desc .tab i{
		display:block;/*元素类型转换:块*/
		width:83px;
		height:4px;
		margin:auto;
		background:url("../images/index_z_71df05e.png") no-repeat -806px -492px;
	}
	.content{
		width:1021px;
		height:210px;
		padding-top:20px;
	}
	.content ul{
		width:2000px;
		height:100%;
	}
	.content ul li{
		float:left;
		margin-right:20px;
		width:240px;
		height:177px;
	}