如何实现简单网页

网页的大致效果

@H_406_11@

htML代码

!DOCTYPE html>
    html>
    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  >
    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>
       /div>
     !-- Our latest projects -->
    !-- bootstrap -->
    div>
    h2>
    Our latest projects/h2>
    div>
    div>
    div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    div>
    div style=" width:244.5px height:160px ">
    img src="pic/news1.jpg"  width="100%" height=auto  >
    /div>
    div>
    p >
    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 href="#">
    more/a>
    /div>
    /div>
    /div>
    div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    div>
    div style=" width:244.5px height:160px ">
    img src="pic/news2.jpg" width="100%" height=auto   >
    /div>
    div>
    p>
    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 href="#">
    more/a>
    /div>
    /div>
    /div>
    div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    div>
    div style=" width:244.5px height:160px ">
    img src="pic/news3.jpg" width="100%" height=auto >
    /div>
    div>
    p >
    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 href="#">
    more/a>
    /div>
    /div>
    /div>
    div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    div>
    div style=" width:244.5px height:160px ">
    img src="pic/news4.jpg" width="100%" height=auto >
    /div>
    div>
    p >
    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 href="#">
    more/a>
    /div>
    /div>
    /div>
    /div>
    /div>
    /div>
     !-- footer -->
    !-- bootstrap -->
    div>
    div>
    div>
    div style="padding: 0 15px">
    h2>
    About Us/h2>
    p>
    Perspiciatis unde omnis iste natus error sit voluptatem. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus musull dui./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="#" >
    read more/a>
    /div>
    /div>
    div>
    div style="padding: 0 15px">
    h2>
    Projects/h2>
    div>
    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>
    div style="padding: 0 15px">
    h2>
    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>
    div class="container footerText">
    div>
    div class="col-md-6 panel">
    div>
    p>
    a href="index.html">
    Home/a>
     | a href="about.html">
    About/a>
     |a href="services.html">
    Services/a>
     |a href="price.html">
    Price/a>
     |a href="projects.html">
    Projects/a>
     |a 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;
}
    

推荐学习：html视频教程

以上就是如何实现简单网页的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！