项⽬实战（⼀）HTML5+CSS3+JS完成前端⽹站的制作css样式：
*{
padding:0;
margin:0;
box-sizing: border-box;
}
html,body{
font-family: 'segoe UI',Tahoma,Geneva,verdana,sans-serif;
line-height: 1.7em;
}
a{
color: #333;
text-decoration: none;
}
h1,h2,h3{
padding-bottom: 20px;
}
p{
margin: 10px 0;
}
.container{
margin:0 auto;
max-width: 1100px;
overflow: hidden;
padding: 0 20px;
}
.text-primary{
color: #f7c08a;
}
.bg-dark{
background: #444;
color: #fff;
}
.
clr{
clear: both;
}
.py{
padding: 10px 0;
}
.l-heading{
font-size: 40px;
padding-top: 20px;
}
#navber{
background: #333;
color: #fff;
overflow: auto;
}
#navber a{
color: #fff;
}
#navber h1{
float: left;
padding-top: 20px;
}
#navber ul{
float: right;
list-style: none;
}
#navber ul li{
float: left;
#navber ul li a{
display: block;
padding: 20px;
text-align: center;
}
#navber ul li a:hover,
#navber ul li a.current{
background: #444;
color: #f7c08a;
}
#showcase{
background: url('../img/1.jpg') no-repeat center center/cover; height: 600px;
}
#showcase .showcase-content{
color: #fff;
text-align: center;
padding-top: 170px;
}
#showcase .showcase-content h1{
font-size:60px;
line-height: 1.2em;
}
#showcase .showcase-content p{
font-size:20px;
line-height: 1.7em;
padding-bottom: 20px;
}
.
btn{
display: inline-block;
font-size:18px;
color: #fff;
background: #333;
padding: 13px 20px;
border:none;
}
.btn:hover{
background: #f7c08a;
}
.
btn-light{
background: #f4f4f4;
color: #333;
}
#home-info{
height: 400px;
}
#home-info .info-img{
float: left;
width: 50%;
background: url('../img/2.jpg') no-repeat center center/cover; height: 100%;
}
#home-info .info-content{
float: right;
width: 50%;
text-align: center;
height: 100%;
padding: 50px 30px;
overflow: hidden;
}
#home-info .info-content p{
padding-bottom: 30px;
.
box{
float: left;
width: 33.3%;
padding: 50px;
text-align: center;
}
.box i{
margin-bottom: 10px;
}
.bg-light{
background: #f4f4f4;
color: #333;
}
.bg-primary{
background: #f7c08a;
color: #333;
}
#about-info .info-left{
html网页设计cssfloat: left;
width: 50%;
height: 100%;
}
#about-info .info-right{
float: right;
width: 50%;
height:100;
}
#about-info .info-right img{
display: block;
width: 80%;
margin: 0 auto;
border-radius: 50%;
}
#testimonials{
height: 600px;
background: url('../img/6.jpg')  no-repeat center center/cover; padding-top: 100px;
}
#testimonials h2{
color: #fff;
text-align:  center;
padding-bottom: 40px;
}
#testimonials .testimonial{
padding: 20px;
margin-bottom: 40px;
border-radius: 5px;
opacity: 0.9;
}
#testimonials .testimonial img{
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
margin-right: 20px;
}
#contact-form .form-group{
margin-right: 20px;
}
#contact-form label{
display: block;
margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea{
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea{
height: 200px;
}
#contact-form input,
#contact-form textarea:focus{
outline: none;
border-color: #f7c08a;
}
#main-footer{
text-align: center;
background: #333;
color: #fff;
padding:20px;
}
制作⾸页HTML框架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0"> <meta name="X-UA-Compatible"content="ie=edg">
<meta name ="description" content="欢迎来到德云社">
<meta name="keywords"content="413德云社">
<link rel="stylesheet"href="css/style.css">
<link rel="stylesheet"href="css/font-awesome.min.css">
<title>德云社|⾸页</title>
</head>
<body>
<header>
<nav id="navber">
<div class="container">
<h1><a href="index.html">德云社</a></h1>
<ul>
<li><a href="index.html">⾸页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="album.html">我们的回忆</a></li>
<li><a href="contact.html"></a></li>
</ul>
</div>
</nav>
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h1>欢迎来到<span class="text-primary">德云社</span></h1>
<p>德云社，带给你的欢乐⽆限。欢迎您的到来！</p>
<a class="btn"href="about.html">关于我们</a>
</div>
</div>
</div>
</header>
<section id="home-info"class="bg-dark">
<div class="info-img"></div>
<div class="info-content">
<h2><span class="text-primary">德云社</span>介绍</h2>
<p>"德云社"是以弘扬中华民族⽂化、培养曲艺⼈才、服务⼤众为主旨的曲艺演出团体。社团最初由著名相声演员刘洋、汤东霖、臧传奇、吴超于1995年创建，经历了⼆⼗五年的风⾬历程⾛到今⽇实属艰⾟，然值得欣慰的是经过哈源先⽣和众多位新⽼相声演员的不懈努⼒，德云社正在逐步⾛向辉煌。德云社所属的"江苏相声⼤会"每周都在江苏农林职业技术学院等地演出五、六场。取得这么⼤的成功都是因为有郭⽼师的指导帮助。<br /></p>
<a class="btn btn-light"href="about.html">阅读更多</a>
</div>
</section>
<section id="features">
<div class="box bg-light">
<i class="fa fa-users fa-3x"></i>
<h3>成员介绍</h3>
<p>德云社演员：<br />汤⼩脸，刘野鸡，哈萨K，超<br />⼀⼑999，郭班主</p>
</div>
<div class="box bg-primary">
<i class="fa fa-handshake-o fa-3x"></i>
<h3>商务合作</h3>
<p>关于相声表演<br />关于校园演出<br />关于喜剧演出</p>
</div>
<div class="box bg-light">
<i class="fa fa-envelope fa-3x"></i>
<h3></h3>
<p>电话：163524996 <br />邮箱：756@163 <br />地址：江苏农林职业技术学院</p>
</div>
</section>
<div class="clr"></div>
<footer id="main-footer">
<p>德云社© 2020, All Rights Reserved</p>
</footer>
</body>
</html>
附页HTML代码框架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<meta name="X-UA-Compatible"content="ie=edg">
<meta name ="description" content="欢迎来到德云社">
<meta name="keywords"content="413德云社">
<link rel="stylesheet"href="css/style.css">
<link rel="stylesheet"href="css/font-awesome.min.css">
<title>德云社|</title>
</head>
<body>
<header>
<nav id="navber">
<div class="container">
<h1><a href="index.html">德云社</a></h1>
<ul>
<li><a href="index.html">⾸页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="album.html">我们的回忆</a></li>
<li><a class="current"href="contact.html"></a></li>
</ul>
</div>
</nav>
</header>
<section id="contact-form"class="py">
<div class="container">
<h1 class="l-heading"><span class="text-primary">联系</span>我们</h1>
<p>如果有疑问请填写以下信息！</p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。