html+css简单网页练习

    网页的大致效果

html代码

	
	
	
	
	


	
	

		
		

			

				
CONTACT
				
PAGES▼
				
PROJECTS
				
PRICE
				
SERVICES
				
ABOUT
				
HOME
				
			
		
	
	
	
	

   
	

	
	
	

		
Our latest projects
		

			

				
	
					

						

							
						
						

							
Lorem ipsum
							

								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							
							more
						
					
				
				
	
					

						

							
						
						

							
Lorem ipsum
							

								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							
							more
						
					
				
				
	
					

						

							
						
						

							
Lorem ipsum
							

								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							
							more
						
					
				
				
	
					

						

							
						
						

							
Lorem ipsum
							

								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							
							more
						
					
				
			
		
	

	
	
	

		

			

				

					
About Us
					
Perspiciatis unde omnis iste natus error sit voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus musull dui.
					
Lorem ipsumulum aenean noummy endrerit mauris. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Null dui. Fusce feugiat malesuada odio.
					read more
				
			
			

				

					
Projects
					

						

							
Singapore Township
							
Mega luxury Villas
							
RNT Commercial Shopping Mall
							
SVN Independent & Duplex Houses
							
World wide IT park
							
North Arena SNT Township
						
					
				
			
			

				

					
Our Clients
					

						
					
				

			
		
	

	
	
	

		

			

				

					

						

							Home | 
							About |
							Services |
							Price |
							Projects |
							Contact
						
					
				
				

					

						

							Copyright © 2016.Company name All rights reserved.More Templates 
							模板之家 
							- Collect from 
							网页模板
						
					
				
			
		
	

网页的css代码

body{
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

/*bootstrap基本样式*/
.container{
	width: 1140px;
	margin:15px auto;
    padding-left: 15px;
    padding-right: 15px;
}

/*导航条*/


#navbar{
	width: 1140px;
	height: 75px;
	margin: 0 auto;
	padding-top:25px;
	padding-left:15px;
	padding-right:15px; 
}

.navbar_L{
	display: inline-block;
	float: right;
}

.navbar_Ul{
	display: inline-block;
	padding-left: 0;
	margin-bottom: 0; 
}

.navbar_L li{
	font-family: Oswald,sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #8A8A8A;
	display: inline-block;
	text-align: center;
	margin: 0 10px;
	float: right;
}


/*幻灯图片*/
.ppt{
	width: 1024px;
	height: 720px;
	margin: 20px auto;
	background-image: url(../pic/twoimg1.jpg);
	background-size:1920px 1200px;
	background-position:center; 
	background-repeat: no-repeat;
	animation:ppta 5s;
	-moz-animation:ppta 5s; 
	-webkit-animation:ppta 5s; 
	-o-animation:ppta 5s;
	animation-iteration-count:300;
	-moz-animation-iteration-count:300;
	-webkit-animation-iteration-count:300; 
	-o-animation-iteration-count:300;
}

@keyframes ppta
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg2.jpg);}
}

@-moz-keyframes ppta
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg2.jpg);}
}

@-webkit-keyframes ppta 
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg2.jpg);}
}

@-o-keyframes ppta 
{
	0%   {background-image: url(../pic/twoimg1.jpg);}
	50% {background-image: url(../pic/twoimg1.jpg);}
}




/*Our latest projects*/

h2{
	margin: 30px 0;
	font-family: Oswald,sans-serif;
	font-size: 30px;
	color:inherit;
}

.picBox{
	border: 1px solid #D5D5D5;
    padding: 4px;
}

.pic_p1{
	font-family:'Lato',sans-serif;
	font-size:14px;
	font-weight:700;
	margin-top:16px;
}

.pic_p2{
	font-weight:normal;
	line-height: 1.4;"
}

.more{
	font-family: 'Lato', sans-serif;
	color: #ae130c;font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/*3排那个位置*/
.h2_Fond{
	margin:30px 0; 
}

.p_p{
	font-family:'Lato',sans-serif; 
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 9px;
}


.fUl ul{
	font: 14px/1.2em 'Roboto', sans-serif;
    color: #ae130c;
	padding-left: 0;

}

.fUl li{
	border-top: 1px solid #f2f2f2;
	padding: 6px 0 7px 30px;
}

/*图层*/

/*最底部*/
.big{
	width: 100%;
	background-color: #ae130c;
	padding-top: 10px ;
}


.footerText{
	background-color: #ae130c;
	color: #aaa;
	font-size: 12px;
}

.footerP{
	color: #aaa;
	padding: 4px 8px;
}

.footerP:hover {
    color: #fff;
}