本篇文章给大家介绍一下实现简单网页的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
网页的大致效果
html代码
Design 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.
moreAbout 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 moreProjects
- Singapore Township
- Mega luxury Villas
- RNT Commercial Shopping Mall
- SVN Independent & Duplex Houses
- World wide IT park
- North Arena SNT Township
Our Clients
@@##@@
网页的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视频教程
