秋裤的CSS

秋裤在线实战项目

一.第一部分首页

1.编写第一部分的第一部分和第二部分

　　首先运用一个<header>标签进行包裹

　　运用nav导航条

　　用盒子包裹顶部需要跳转的链接

　　之后在创建一个盒子用来放置文字

　　利用section创造新节点：进行文字简介以及跳转按钮

 <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. Id illum unde repellat qui, labore quisquam reprehenderit, quod facilis 
                        blanditiis mollitia minima! Quas eum provident saepe, voluptatem quia omnis enim eligendi.
                    </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. Voluptas dolore quod dignissimos illum, optio placeat neque accusamus dolorem
                 quae, quis eligendi debitis corporis labore assumenda consequatur eaque sint deserunt rerum.
            </p>
            <a class="btn btn-light" href="about.html">阅读更多</a>
        </div>
    </section>

　　在设置样式之前需要重置页面样式（写在最顶部）：

/* reset  */
/* 重置页面样式 */
*{
    padding: 0;
    margin: 0;
    /* 不影响整体布局 */
    box-sizing: border-box;
}
/* main styling */
html,body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7em;
}
/* 重置a标签样式 */
a{
    color: #333;
    /* 清除下划线 */
    text-decoration: none;
}

h1,h2,h3{
    padding-bottom: 20px;
}

p{
    margin: 10px 0;
}

之后就可以设置页面的样式：

/* utility classes */
.container{
    margin: 0 auto;
    max-width: 1100px;
    /* 防止塌陷清除浮动 */
    overflow: hidden;
    padding: 0 20px;
}
.text-primary{
    color: #4A2E00;
}
.bg-dark{
    background:#B4BF3D;
    color: #fff;
}
/* navbar */
#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-color: #444;
    color: #f7c08a;
}
/* showcase */
/* 插入背景图图片 */
#showcase{
    /* no-repeat不重复 */
    /* cover覆盖 */
    background: url(../img/111.png) 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-color: #333;
    padding: 13px 20px;
}
.btn:hover{
    background-color: #4A2E00;
}
.btn-light{
    background: #F4F4F4;
    color: #333;
}
/* home-info */
#home-info{
    height: 400px;
}
#home-info .info-img{
    float: left;
    width: 50%;
    background: url(../img/222.png) 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{
    padding-bottom: 30px;
}

2.编写第三部分：

首先需要先下载一个字体图标

网址：http://www.fontawesome.com.cn/

　　如何使用字体图标：

1.打开以上网址

2.下载后将会使用到的文件：

　　在css下

　　整个fonts文件夹都复制在项目的文件中

3.在<head>处引入

　　要使用link标签

4.在官网中查看使用方法

5.查看图标库里的图标（可以精准搜索但只支持英文）

第三部分：

　　分为三个内容，可以使用div盒子进行包裹；先进行一个框架的搭建

1.重新创建<section>标签进行包裹表示这是新的一部分

第一个box的创建：

<!-- 第三部分 -->
    <section id="features">
        <div class="box"></div>
    </section>

第一个box的内容：

引用i标签使用字体图标

<i class="fa fa-users"></i>

fa-3x改变图标大小

第一个盒子添加文字后：

 <div class="box">
            <i class="fa fa-users fa-3x"></i>
            <h3>讲师介绍</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, provident.</p>
        </div>

可以进行拷贝得到三个盒子进行相应的修改：

<div class="box">
            <i class="fa fa-users fa-3x"></i>
            <h3>讲师介绍</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, provident.</p>
        </div>
        <div class="box">
            <i class="fa fa-leanpub fa-3x"></i>
            <h3>课程详情</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, provident.</p>
        </div>
        <div class="box">
            <i class="fa fa-graduation-cap fa-3x"></i>
            <h3>学员反馈</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, provident.</p>
        </div>

第三部分样式：

/* 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: #8A9221;
    color: #333;
}

3.底部版权部分

footer标签进行包裹，内容使用p标签包裹

<footer id="main-footer">
        <p>秋裤在线 &copy; 2006 AAA</p>
    </footer>

在样式之前需要创建一个盒子清除浮动

 <div class="clr"></div>

清除浮动样式：

.clr{
    clear: both;
}

底部版权样式：

/* footer */
#main-footer{
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 20px;
}

二.第二部分：关于我们

拷贝首页代码复制到about.html里面

　　修改相应部分：“首页”改为”关于我们“

　　删掉不需要的链接

　　删除showcase

　　删除内容以及清除浮动的盒子

　　最后的代码：

<!-- 文档声明 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="欢迎来到秋裤在线">
    <meta name="keywords" content="前端学习，秋裤在线"> 
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <title>秋裤在线 | 关于我们</title>
</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>
       
    </header>
    
    <footer id="main-footer">
        <p>秋裤在线 &copy; 2006 AAA</p>
    </footer>
</body>
</html>

　　更改a标签的类：如下：

　　重新设置内容使用section标签

　　添加一个盒子让内容居中

　　创建两个盒子：.info-left info-right

　　在.info-left盒子中使用h1标签并写入内容

　　使用p标签输入文本内容

　　在.info-right中插入图片

呈现的代码：

 <section id="about-info">
           <div class="container">
                <div class="info-left">
                    <h1>关于<span class="text-primary">秋裤在线</span></h1>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Tenetur unde iure qui harum? Iure harum ipsam reiciendis
                    officiis quasi, reprehenderit unde cumque hic modi doloribus odit
                    explicabo placeat praesentium eius.
                    </p>    
                    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias corrupti    
                    fuga quas sapiente quaerat earum numquam, deleniti et perspiciatis veniam.
                    </p>    
                </div>
                <div class="info-right">
                    <img src="./img/333.png" alt="秋裤在线">
                </div>
           </div>
       </section>

然后设置样式：

如下：

.py{
    padding: 10px 0;
}
.l-heading{
    font-size: 40px;
    padding-top: 20px;
}

/* 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%;
}

继续制作学员评价

　　添加section标签

　　创建盒子

　　添加h2标签并编辑文本

　　引入图片

　　运用p标签编辑文本内容

　　在复制一个盒子修改内容

代码如下：　　

<section id="testimonials">
           <div class="container">
               <h2>学员评价</h2>
               <div class="testimonial">
                   <img src="./img/444.jpg" alt="Jan">
                   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi iure veniam voluptate et quaerat eius. </p>
               </div>
               <div class="testimonial">
                <img src="./img/555.jpg" alt="Lucy">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi iure veniam voluptate et quaerat eius. </p>
            </div>
           </div>
       </section>

然后设置样式

/* testimonials */
#testimonials{
    height: 600px;
    background: url('../img/666.jpg') no-repeat center center/cover;
}
#testimonials h2{
    color: #fff;
    text-align: center;
    padding-bottom: 40px;
}
#testimonials .testimonial img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

三、

制作”联系我们“

　　复制首页代码

　　修改相应部分：“首页”改为”联系我们“

　　删掉不需要的链接

　　删除showcase

　　删除内容以及清除浮动的盒子

　更改a标签的类：如下：

　　添加section标签进行包裹

　　添加div盒子

　　添加span标签以及h1

　　使用p标签添加段落

　　设置from表单

代码如下：

<!-- 文档声明 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="欢迎来到秋裤在线">
    <meta name="keywords" content="前端学习，秋裤在线">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <title>秋裤在线 | 联系我们 </title>
</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">
        <div class="container">
            <span class="text-primary">联系</span>我们
            <p>如有疑问请填写以下信息联系我们！</p>
            <form action="process.php">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" name="name" id="name">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="text" name="email" id="email">
                </div>
                <div class="form-group">
                    <label for="message">反馈内容</label>
                    <input type="text" name="message" id="message">
                </div>

            </form>
        </div>
    </section>
    <footer id="main-footer">
        <p>秋裤在线 &copy; 2006 AAA</p>
    </footer>
</body>

</html>

设置样式：

/* contact-form */
#contact-form .form-group{
    margin-bottom: 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:focus,
#contact-form textarea:focus{
    outline: none;
    border-color: #f7c08a;
}

下面的部分和的首页第三部分一样可以直接进行复制

代码如下：

 <section id="contact-info" class="bg-dark">
        <div class="container">
            <div class="box">
                <i class="fa fa-home fa-3x"></i>
                <h3>联系地址</h3>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="box">
                <i class="fa fa-phone fa-3x"></i>
                <h3>联系电话</h3>
                <p>111-11111111</p>
            </div>
            <div class="box">
                <i class="fa fa-envelope fa-3x"></i>
                <h3>邮箱地址</h3>
                <p>秋裤在线@163.com</p>
            </div>
        </div>

    </section>