弹性盒子实战

nav导航栏：

HTML：

复制代码
<nav id="navbar">
        <h1 class="logo">
            <span class="text-primary">
                <i class="fas fa-book-open"></i>
            </span>
            秋裤在线
        </h1>
        <ul>
            <li>
                <h1><a>Hello</a></h1>
            </li>
            <li>
                <h1><a>What</a></h1>
            </li>
            <li>
                <h1><a>Who</a></h1>
            </li>
            <li>
                <h1><a>Contact</a></h1>
            </li>
        </ul>
    </nav>
复制代码

CSS：

先初始化

注意：navbar使用了粘性定位

复制代码
/* rest */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4rem;
}
a{
    text-decoration: none;

}
p{
    margin: 0.75rem 0;
}
/* utility classes */
.text-primary{
    color: #93cb52;
}
/* navbar */
#navbar{
    display: flex;
    justify-content: space-between;
    background: #333;
    color: #fff;
    /* 定位：粘性定位 */
    /* 结合固定定位和相对定位 */
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 1rem;
}
#navbar ul{
    display: flex;
    list-style: none;
    align-items: center;
}
#navbar ul li a{
    color: white;
    padding: 0.75rem;
    margin: 0 0.25rem;
}
#navbar ul li a:hover{
    background: #93cb52;
    border-radius: 5px;
}
复制代码

2.页面制作

创作header

使用盒子包裹文本内容

 添加相应的内容

HTML：

复制代码
<!-- header:Home -->
    <header id="home">
        <div class="home-content">
            <h1 class="l-heading">欢迎来到秋裤在线</h1>
            <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur eius accusamus ex
                numquam odit facere.
            </p>
            <a href="#what" class="btn">阅读更多</a>
        </div>
    </header>
复制代码

CSS：

复制代码
/* home */
#home{
    background: url('../img/111.png') no-repeat center center/cover;
    height: 100vh;
    color: #fff;
    position: relative;
}
#home .home-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding: 0 2rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
}
复制代码

3.What We Do页面制作

使用section标签进行包裹

添加所需要的盒子内容

HTML：

复制代码
<section id="what" class="bg-light py-1">
        <div class="container">
            <h2 class="m-heading text-center"><span class="text-primary">What</span>We Do</h2>
            <div class="items">
                <div class="item">
                    <i class="fas fa-university fa-2x"></i>
                    <h3>前端基础课程</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, fugit.</p>
                </div>
                <div class="item">
                    <i class="fas fa-book-reader fa-2x"></i>
                    <h3>前端进阶课程</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, fugit.</p>
                </div>
                <div class="item">
                    <i class="fas fa-pencil-alt fa-2x"></i>
                    <h3>前端高阶课程</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, fugit.</p>
                </div>
            </div>
        </div>
    </section>
复制代码

CSS：

复制代码
/* section :what we do */
#what .items{
    display: flex;
    padding: 1rem;
}
#what .items .item{
    flex: 1;
    text-align: center;
}
#what .item i{
    background: #93cb52;
    padding: 1rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}
复制代码

4.Who We Are 部分

运用section标签进行包裹

HTML：

复制代码
<section id="clients" class="py-1">
        <div class="container">
            <h2 class="m-heading text-center">Our<span class="text-primary"> clients</span></h2>
            <div class="items py-1">
                <div><img src="img/333.jpg" alt="clients"></div>
                <div><img src="img/333.jpg" alt="clients"></div>
                <div><img src="img/333.jpg" alt="clients"></div>
                <div><img src="img/333.jpg" alt="clients"></div>
                <div><img src="img/333.jpg" alt="clients"></div>
            </div>
        </div>

    </section>
复制代码

CSS：

复制代码
/* section :Who we are */
#who{
    display: flex;
}
#who div{
    flex: 1;
    flex-basis: 50%;
}
#who .who-img{
    background: url('../img/222.jpg') no-repeat center center/cover;

}
/* section:clients */
#clients .items{
    display: flex;
}
#clients .items img{
    display: block;
    margin: 0 auto;
    width: 60%;
    border-radius: 50%;
}
复制代码

5.联系我们

标签包裹

设置表单内容以及对应的id (运用input)

HTML：

复制代码
 <section id="contact">
        <div class="contact-form bg-primary p-2">
            <h2 class="m-heading"> ConTact Us</h2>
            <p>如有疑问请填写下列信息联系我们！</p>
            <form>
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" name="name" id="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="name">邮箱</label>
                    <input type="text" name="email" id="email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" name="phone" id="phone" placeholder="请输入电话">
                </div>
                <div class="form-group">
                    <label for="message">反馈信息</label>
                    <textarea type="text" name="message" id="message" placeholder="请输入内容"></textarea>
                </div>
                <input type="submit" value="send" class="btn btn-dark">
            </form>
        </div>
        <div class="contact-img "></div>
    </section>
复制代码

CSS：

复制代码
/* section:contact */
#contact{
    display: flex;
}
#contact .contact-form,
#contact .contact-img
{
flex: 1;

}
#contact .contact-img{
background: url('../img/444.jpg') no-repeat center center/cover;
}
#contact .contact-form .form-group{
    margin: 0.75rem;
}
#contact .contact-form label{
    display: block;

}
#contact .contact-form input,
#contact .contact-form textarea{
    width: 100%;
    padding: 0.5rem;
}
复制代码

6底部版权部分

footer标签包裹：

HTML：

    <!-- footer -->
    <footer id="main-footer" class="bg-dark text-center py-1">
        <div class="container">
            <p>Copy &copy; 2022,秋裤在线</p>
        </div>
    </footer>

因为上面给的类名都已经设置过样式 所以不在展示

7.点击标签滚动页面到对应位置

在相应的结构部分添加对应的跳转

HTML：

复制代码
<ul>
            <li>
                <a href="#home">Hello</a>
            </li>
            <li>
                <a href="#what">What</a>
            </li>
            <li>
                <a href="#who">Who</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>
复制代码

在CSS中添加：

html{
    scroll-behavior: smooth;
}

即可

8.页面的响应式设计：

用div对相应部分包裹

 

 进行css修改：当宽度大于等于1100px时：

复制代码
/* align icon to left */
#what .items .item{
    display: flex;
    text-align:left;
 }
 #what .items .item i{
     margin-right: 1.3rem;
     align-self: center;
     margin-bottom: 0;
 }
 /* contact-img */
 #contact .contact-img{
     flex: 2;
 }
复制代码

当最大的宽度等于768时：

复制代码
#what .items{
    display: block;

}
/* align icon to left */
#what .items .item{
    display: flex;
    text-align:left;
 }
 #what .items .item i{
     margin-right: 1.3rem;
     align-self: center;
     margin-bottom: 0;
 }
 /* samrtphons */
 @media (max-width:500px){
     #navbar{
         flex-direction: column;
         align-items: center;
     }
     #navbar .logo{
         margin-bottom: 0.5rem;
         text-align: center;
     }
     #navbar ul{
         padding: 0.5rem;
     }
     #who{
         display: block;
     }
     #who .who-img{
         height: 300px;
     }
     .l-heading {
        line-height: 5.1rem;
    }
    #clients .items img{
        width: 80%;

    }
    #clients .items div:last-child{
        display: none;
    }
    #contact{
        flex-direction: column;
    }
    #contact .contact-img{
        display: none;
    }
 }
复制代码

需要注意的是：

iphone5并不适配
所以：
复制代码
 /* iphone5 */
 @media (max-height:568px){
    .l-heading{
        font-size: 3rem;
    }
    .lead{
        font-size: 1rem;
    }
 }
复制代码
posted @ 2022-03-29 15:44  生活在北极的企鹅  阅读(29)  评论(0)    收藏  举报