html+css简单网页练习
程序员文章站
2024-02-26 18:02:22
...
网页的大致效果
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;
}