1. 程式人生 > >html+css簡單網頁練習

html+css簡單網頁練習

    網頁的大致效果



html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Design</title>
	<script type="text/javascript" src="js/conPanel.js"></script>
	<link rel="stylesheet" type="text/css" href="css/onLoad.css">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<!-- 導航條 -->
	<div id="navbar">
		<img src="pic\logo.png" width="171px" height="50px" style="text-align: center;">
		<div class="navbar_L"  >
			<ul class="navbar_Ul">
				<li>CONTACT</li>
				<li>PAGES▼</li>
				<li>PROJECTS</li>
				<li>PRICE</li>
				<li>SERVICES</li>
				<li>ABOUT</li>
				<li style="color: #ae130c;">HOME</li>
				
			</ul>
		</div>
	</div>
	
	<!-- 幻燈圖 -->
	<div class="ppt">
   
	</div>

	<!-- Our latest projects -->
	<!-- bootstrap -->
	<div class="container">
		<h2>Our latest projects</h2>
		<div class="pic_S">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">	
					<div class="picBox">
						<div style=" width:244.5px height:160px ">
							<img src="pic/news1.jpg"  width="100%" height=auto  >
						</div>
						<div>
							<p class="pic_p1" >Lorem ipsum</p>
							<p class="pic_p1 pic_p2" >
								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							</p>
							<a class="more" href="#">more</a>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">	
					<div class="picBox">
						<div style=" width:244.5px height:160px ">
							<img src="pic/news2.jpg" width="100%" height=auto   >
						</div>
						<div>
							<p class="pic_p1">Lorem ipsum</p>
							<p class="pic_p1 pic_p2">
								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							</p>
							<a class="more" href="#">more</a>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">	
					<div class="picBox">
						<div style=" width:244.5px height:160px ">
							<img src="pic/news3.jpg" width="100%" height=auto >
						</div>
						<div>
							<p class="pic_p1" >Lorem ipsum</p>
							<p class="pic_p1 pic_p2" >
								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							</p>
							<a class="more" href="#">more</a>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">	
					<div class="picBox">
						<div style=" width:244.5px height:160px ">
							<img src="pic/news4.jpg" width="100%" height=auto >
						</div>
						<div>
							<p class="pic_p1" >Lorem ipsum</p>
							<p class="pic_p1 pic_p2">
								Lorem ipsum dolor sit amet, conc tetu er adipi scing. Praesent ves tibuum molestie lacuiirhs. Aenean.
							</p>
							<a class="more" href="#">more</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- footer -->
	<!-- bootstrap -->
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<div style="padding: 0 15px">
					<h2 class="h2_Fond">About Us</h2>
					<p class="p_p">Perspiciatis unde omnis iste natus error sit voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus musull dui.</p>
					<p class="p_p">Lorem ipsumulum aenean noummy endrerit mauris. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Null dui. Fusce feugiat malesuada odio.</p>
					<a href="#" class="more" >read more</a>
				</div>
			</div>
			<div class="col-md-4">
				<div style="padding: 0 15px">
					<h2 class="h2_Fond">Projects</h2>
					<div class="fUl">
						<ul >
							<li>Singapore Township</li>
							<li>Mega luxury Villas</li>
							<li>RNT Commercial Shopping Mall</li>
							<li>SVN Independent & Duplex Houses</li>
							<li>World wide IT park</li>
							<li>North Arena SNT Township</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div style="padding: 0 15px">
					<h2 class="h2_Fond">Our Clients</h2>
					<div style="width:349px height:153px">
						<img src="pic\text.png" width="100%" height=auto>
					</div>
				</div>

			</div>
		</div>
	</div>

	<!-- 最底部 -->
	<!-- bootstrap -->
	<div class="big">
		<div class="container footerText">
			<div class="row">
				<div class="col-md-6 panel">
					<div>
						<p>
							<a class="footerP" href="index.html">Home</a> | 
							<a class="footerP" href="about.html">About</a> |
							<a class="footerP" href="services.html">Services</a> |
							<a class="footerP" href="price.html">Price</a> |
							<a class="footerP" href="projects.html">Projects</a> |
							<a class="footerP" href="contact.html">Contact</a>
						</p>
					</div>
				</div>
				<div class="col-md-6 panel">
					<div>
						<p>
							Copyright © 2016.Company name All rights reserved.More Templates 
							<a href="http://www.cssmoban.com/" target="_blank" style="color: #aaa;" >模板之家</a> 
							- Collect from 
							<a href="http://www.cssmoban.com/" title="網頁模板" target="_blank" style="color: #aaa;">網頁模板</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

網頁的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;
}