简洁的静态网页模板

最新推荐文章于 2025-05-30 10:16:38 发布

倔强的青铜崽

最新推荐文章于 2025-05-30 10:16:38 发布

阅读量7.9k

点赞数 15

分类专栏：成为高级静态网页工程师文章标签： html css

原文链接：https://www.bilibili.com/video/BV1oJ411j7M1

版权

成为高级静态网页工程师专栏收录该内容

1 篇文章

订阅专栏

本文代码来自米修在线教学视频：https://www.bilibili.com/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">&#xe6e3;</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">&#xe6e6;</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">&#xe6ef;</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>网页模板展示 &copy; 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">&#xe6e3;</i>
                <h3>联系地址</h3>
                <p>广东省深圳市龙岗区广东省深圳市龙岗区</p>
            </div>
            <div class="box">
                <i class="iconfont">&#xe6e6;</i>
                <h3>联系电话</h3>
                <p>Lorem ipsum .</p>
            </div>
            <div class="box">
                <i class="iconfont">&#xe6ef;</i>
                <h3>邮箱地址</h3>
                <p>Lorem ipsum </p>
            </div>
        </div>
    </section>
    <footer id="main-footer">
        <p>网页模板展示 &copy; 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>网页模板展示 &copy; 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;
}