本文代码来自米修在线教学视频：https://www.bilibili/video/BV1oJ411j7M1
已获取授权转载
模板效果：
目录结构：
Website
>css
style.css
>fonts （字体图标存放目录）
>img（图片存放目录）
about.html
contact.html
index.html
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页模板</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1><a href="index.html">网页模板</a></h1>
<ul>
<li><a class="current" href="index.html">首页</a></li>
<li><a href="about.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>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia blanditiis at, dolorem saepe, nulla
perspiciatis molestias, numquam quas rem recusandae ipsa pariatur eaque quidem itaque rerum alias
repellat harum iusto!
</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>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia blanditiis at, dolorem saepe, nulla
perspiciatis molestias, numquam quas rem recusandae ipsa pariatur eaque quidem itaque rerum alias
repellat harum iusto!
</p>
<a class="btn btn-light" href="about.html">阅读更多</a>
</div>
</section>
<section id="features">
<div class="box bg-light">
<i class="iconfont"></i>
<h3>样式展示一</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ratione vitae suscipit accusantium minima
aperiam amet, quo debitis assumenda odio ducimus accusamus animi consequuntur nisi minus. Dolorum
reiciendis magni quaerat.</p>
</div>
<div class="box bg-primary">
<i class="iconfont"></i>
<h3>样式展示二</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ratione vitae suscipit accusantium minima
aperiam amet, quo debitis assumenda odio ducimus accusamus animi consequuntur nisi minus. Dolorum
reiciendis magni quaerat.</p>
</div>
<div class="box bg-light">
<i class="iconfont"></i>
<h3>样式展示三</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ratione vitae suscipit accusantium minima
aperiam amet, quo debitis assumenda odio ducimus accusamus animi consequuntur nisi minus. Dolorum
reiciendis magni quaerat.</p>
</div>
</section>
<div class="clr"></div>
<footer id="main-footer">
<p>网页模板展示 © 2020/04/23, AllRights Reserved</p>
</footer>
</body>
</html>contact.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页模板 | 关于我们</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav id="navbar">
<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 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>
<form action="process.php">
<div class="form-group">
<label for="">姓名：</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="">邮箱：</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="">反馈内容</label>
<textarea type="text" name="message" id="message"></textarea>
</div>
<button type="submit" class="btn">提交</button>
</form>
</div>
</section>
<section id="features" class="bg-dark">
<div class="container">
<div class="box">
<i class="iconfont"></i>
<h3>联系地址</h3>
<p>广东省深圳市龙岗区广东省深圳市龙岗区</p>
</div>
<div class="box">
<i class="iconfont"></i>
<h3>联系电话</h3>
<p>Lorem ipsum .</p>
</div>
<div class="box">
<i class="iconfont"></i>
<h3>邮箱地址</h3>
<p>Lorem ipsum </p>
</div>
</div>
</section>
<footer id="main-footer">
<p>网页模板展示 © 2020/04/23, AllRights Reserved</p>
</footer>
</body>
</html>about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页模板 | 关于我们</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1><a href="index.html">网页模板</a></h1>
<ul>
<li><a href="index.html">首页</a></li>
<li><a class="current" href="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</nav>
</header>
<section id="about-info" class="py bg-light">
<div class="container">
<div class="info-left">
<h1 class="l-heading">文本内容</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus repellat rerum minima, numquam
nulla veritatis architecto atque iure, inventore quidem culpa corporis vitae saepe assumenda ullam
asperiores. Repellendus, itaque recusandae!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus repellat rerum minima, numquam
nulla veritatis architecto atque iure, inventore quidem culpa corporis vitae saepe assumenda ullam
asperiores. Repellendus, itaque recusandae!
</p>
</div>
<div class="info-right">
<img src="./img/95.jpg" alt="网页模板图片">
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<h2 class="l-heading">文本内容</h2>
<div class="testimonial bg-primary">
<img src="./img/ph-01.jpg" alt="头像">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, commodi.
</p>
</div>
<div class="testimonial bg-primary">
<img src="./img/ph-02.jpg" alt="头像">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore vel autem ipsa corrupti maiores
quod aut. Minima laboriosam pariatur, sint mollitia asperiores hic beatae, dignissimos harum
excepturi, perferendis totam doloribus?
</p>
</div>
</div>
</section>
<footer id="main-footer">
<p>网页模板展示 © 2020/04/23, AllRights Reserved</p>
</footer>
</body>
</html>style.css代码：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 字体图标 */
@font-face {
font-family: 'iconfont';
src: url('../fonts/font_h4idbytpnmf/iconfont.eot');
src: url('../fonts/font_h4idbytpnmf/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/font_h4idbytpnmf/iconfont.woff2') format('woff2'),
url('../fonts/font_h4idbytpnmf/iconfont.woff') format('woff'),
url('../fonts/font_h4idbytpnmf/iconfont.ttf') format('truetype'),
url('../fonts/font_h4idbytpnmf/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 56px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 整体样式 */
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;
}
/* 头部导航 */
#navbar{
background:#333;
color: #fff;
overflow: auto;
}
#navbar a{
color: #fff;
}
#navbar h1{
float: left;
padding-top: 20px;
}
#navbar ul{
float: right;
list-style: none;
}
#navbar ul li{
float: left;
}
#navbar ul li a{
display: block;
padding: 20px;
text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current{
background: #444;
color: #f7c08a;
}
/* showcase */
#showcase{
background: url(../img/xp.jpg)no-repeat center center/cover;
height: 600px;
}
#showcase .showcase-content{
text-align: center;
color: #fff;
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 */
#home-info{
height: 400px;
}
#home-info .info-img{
float: left;
width: 50%;
background: url('../img/98.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;
}
/* features */
.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 */
#about-info .info-left{
float: 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%;
}
/* testimonals*/
#testimonials{
height: 600px;
background: url('../img/pic-01.jpg') no-repeat center center/cover;
}
#testimonials h2{
padding-top: 100px;
color: #fff;
text-align: center;
padding-bottom: 40px;
}
#testimonials .testimonial{
padding: 20px;
margin-bottom: 40px;
border-radius: 5px;
margin-right: 20px;
min-height: 140px;
opacity: 0.9;
}
#testimonials .testimonial img{
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 15px;
float: left;
}
/* contact-form */
#contact-form .form-group{
margin-bottom: 20px;
}
#contact-form label{
display: block;
margin-bottom: 5px;
}
#contact-form input,
textarea{
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea{
height: 200px;
}
#contact-form input:focus,
#contact-form textarea:focus{
outline: none;
border-color: #f7c08a;
}
/* footer */
#main-footer{
text-align: center;
background: #333;
color: #fff;
padding: 20px;
}
更多推荐
简洁的静态网页模板
发布评论