Yin Yang master page

body part

<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=" Download the desktop version "></a><!--a A tag is an inline element tag , Width, height and size are not supported , Give a conversion -->
							</li>
						</ul>	
					</div>
				</div>
				<div class="news-desc">
					<div class="tab"> News and information <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 part

 /* Style sheet writing address */
	body,ul{/* Multi element selector , Separated by commas */
		margin:0;/* Margin :0;*/
		padding:0;/* padding */
	}
	ul{list-style:none;}/* eliminate ul Small black dots on the front logo */
	.header{/* choice class Class name : . +  Class name {  Style sheets  }*/
		position:relative;/* location : Relative positioning */
		width:100%;/* Width :100%;( Inherit the width of the parent )*/
		height:844px;/* Height */
		background-image:url("../images/banner_a6225ba.jpg");/* Background image : Picture path ;*/
		background-repeat:no-repeat;/* Background tile : Don't spread ;*/
	}
	.news{
		position:absolute;/* location : Absolute positioning ;*/
		width:100%;
		height:287px;
		bottom:0;/* Position change keywords : Underside */
		/*background-image:url("images/bot_head_bg_450ba6b.png");
		background-repeat:repeat-x;/*x Axis direction is tile */
		/*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 Adaptive left and right centering */
	}
	.news .download-wrap{
		float:left;
		width:145px;
		height:240px;
		padding-top:47px;/* Top inner margin */
		background-image:url("../images/index_z_71df05e.png");
		background-repeat:no-repeat;/* Background tile : Don't spread ;*/
	}
	.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;/* On */
		left:-7px;/* Left */
		animation:run 4s linear infinite;/* Animation properties : The name of the animation   Animation execution time   Speed   Number of executions */
	}
	@keyframes run{/* Set animation frame  ,  This run It's a random animation name */
		0%{top:0;}
		50%{top:96px;}
		100%{top:0;}/* time axis , from 0%-100%*/
	}
	.news .download .but a{
		display:block;/* Element type conversion : block */
		width:100%;
		height:107px;
		margin-top:10px;
		background-image:url("../images/zmb_bg_b51e4c7.jpg");
	}
	.news-desc{
		float:right;/* float : There is a float */
		width:1021px;
		height:100%;
	}
	.news-desc .tab{
		width:162px;
		height:43px;
		background-color:rgba(0,0,0,.8);/*rgba:red green blue opacity( transparency )*/
		text-align:center;/* Writing in the middle */
		line-height:34px;/* The height between fonts */
		letter-spacing:3px;/* The distance between words */
		color:#c2a060;
	}
	.news-desc .tab i{
		display:block;/* Element type conversion : 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;
	}