体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师帮忙检查一下？

来源：2-17 自由编程

慕容5288970

2021-03-06 17:52:49

HTML

<!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">

    <title>Document</title>

    <link rel="stylesheet" href="css/css.css">

</head>


<body>

    <!-- 网页头部 -->

    <header>

        <div class="header-top">

            <!-- 网页的logo -->

            <div class="logo">

                <img src="images/logo.png">

            </div>

            <!-- 网页的导航条 -->

            <nav>

                <ul>

                    <li class="cur"><a href="">HOME</a></li>

                    <li><a href="">ABOUT</a></li>

                    <li><a href="">GALLERY</a></li>

                    <li><a href="">FACULTY</a></li>

                    <li><a href="">EVENTS</a></li>

                    <li><a href="">CONTACT</a></li>

                </ul>

            </nav>

        </div>

    </header>

    <!-- 网页的banner -->

    <section class="banner">

        <img class="banner-img" src="images/banner3.jpg">

        <div class="center">

            <h3>banner遮罩层</h3>

        </div>

        <form class="form" action="" method="">

            <p>

                <input class="name" type="text" placeholder="your Name">

                <input class="phone" type="text" placeholder="your Phone">

                <input class="email" type="text" placeholder="your Email">

                <textarea class="com" rows="10" cols="100" placeholder="your Comment"></textarea>

            </p>

            <p>

                <input class="sm" type="submit" value="SEND MESSAGE" </p>

        </form>

    </section>

    <!-- 网页的主要 内容 -->

    <section class="content">

        <!-- 常用链接 -->

        <div class="usefui-links">

            <div class="about">

                <div class="main1">

                    <h2>ABOUT</h2>

                    <dl>

                        <dt class="cutting-line"></dt>

                        <dt> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has

                            been

                            the industry's standard dummy text ever since the 1500s.</dt>

                    </dl>

                </div>

                <div class="main2">

                    <div class="aw">

                        <h2>A WORD </h2>

                        <h2>ABOUT US</h2>

                        <div class="aw-left">

                            <dl>

                                <dt class="hh">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac

                                    nisl et felisgravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam

                                    amet.</dt>

                            </dl>

                            <a class="aw-a" href="">EXPLORE</a>

                        </div>

                    </div>

                    <div>

                        <img class="ex-img" src="images/bb3.jpg">

                    </div>


                    <div class="sz">

                        <div class="sz1">

                            <h3>70000</h3>

                            <dl>

                                <dt class="cutting-line"></dt>

                                <dt class="st">Students</dt>

                            </dl>

                        </div>

                        <div class="sz2">

                            <h3>600</h3>

                            <dl>

                                <dt class="cutting-line"></dt>

                                <dt class="st">Faculty</dt>

                            </dl>

                        </div>

                    </div>

                </div>

            </div>

            <!-- 景区介绍 -->

            <div class="jqjs">

                <img class="pic" src="images/b1.jpg">

                <div class="wz left">

                    <h2>Library</h2>


                    <dl>

                        <dt>Lorem Ipsum is simply dummy text of the printing and typesetting industry</dt>

                        <dd>class="sjx">Lorem Ipsum has been the industry's standard dummy text ever since the

                            1500s, when

                            aunknownprinter took a galley of type and scrambled it to make a type specimen book.

                        </dd>

                    </dl>


                    <div class="wz-btn">EXPLORE</div>

                </div>

                <img class="pic" src="images/b2.jpg">

                <div class="wz left">

                    <h2>Library</h2>


                    <dl>

                        <dt>Lorem Ipsum is simply dummy text of the printing and typesetting industry</dt>

                        <dd class="sjx">Lorem Ipsum has been the industry's standard dummy text ever since the

                            1500s, when

                            anunknownprinter took a galley of type and scrambled it to make a type specimen book.

                        </dd>

                    </dl>


                    <div class="wz-btn">EXPLORE</div>

                </div>

                <div class="wz right">

                    <h2>Library</h2>


                    <dl>

                        <dt>Lorem Ipsum is simply dummy text of the printing and typesetting industry</dt>

                        <dd class="sjx">Lorem Ipsum has been the industry's standard dummy text ever since the

                            1500s, when

                            anunknownprinter took a galley of type and scrambled it to make a type specimen book.

                        </dd>

                    </dl>


                    <div class="wz-btn">EXPLORE</div>

                </div>

                <img class="pic" src="images/b3.jpg">

                <div class="wz right">

                    <h2>Library</h2>


                    <dl>

                        <dt>Lorem Ipsum is simply dummy text of the printing and typesetting industry</dt>

                        <dd class="sjx">Lorem Ipsum has been the industry's standard dummy text ever since the

                            1500s, when

                            anunknownprinter took a galley of type and scrambled it to make a type specimen book.

                        </dd>

                    </dl>


                    <div class="wz-btn">EXPLORE</div>

                </div>

                <img class="pic" src="images/b4.jpg">

            </div>

            <!-- 景区图片 -->

            <div class="gallery">

                <div class="main1">

                    <h2>GALLERY</h2>

                    <dl>

                        <div class="cutting-line"></div>

                        <dt>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has

                            been the industry's standard dummy text ever since the 1500s.</dt>

                    </dl>

                </div>

                <div class="main2">

                    <div class="pic-dt">

                        <img class="pic" src="images/03-01.jpg">

                        <dl>

                            <dt>Science Lab</dt>

                        </dl>

                    </div>

                    <div class="pic-dt">

                        <img class="pic" src="images/03-02.jpg">

                        <dl>

                            <dt>Indoor Stadium</dt>

                        </dl>

                    </div>

                    <div class="pic-dt">

                        <img class="pic" src="images/03-03.jpg">

                        <dl>

                            <dt>Transportation</dt>

                        </dl>

                    </div>

                    <div class="pic-dt">

                        <img class="pic" src="images/03-04.jpg">

                        <dl>

                            <dt>Kids Room</dt>

                        </dl>

                    </div>

                    <div class="pic-dt">

                        <img class="pic" src="images/03-05.jpg">

                        <dl>

                            <dt>Meditation Classes</dt>

                        </dl>

                    </div>

                    <div class="pic-dt">

                        <img class="pic" src="images/03-06.jpg">

                        <dl>

                            <dt>Kids Play Ground</dt>

                        </dl>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <!-- 页脚 -->

    <footer>

        <div class="address">

            <p>&copy;2016 imooc.com 京ICP备13046642号</p>

        </div>

    </footer>

</body>


</html>

相关代码：

CSS
*{
    margin: 0;
    padding: 0;
}
/* 去掉小圆点 */
ul,ol{
    list-style: none;
}
去掉下划线
 a{
    text-decoration: none;
} 
/* 头部 */
header{
    height: 60px;
    background-color: rgb(46, 184, 226);
}
header .header-top{
    width: 1200px;
    height: 60px;
    margin: 0 auto;
}
header .header-top .logo{
    width: 200px;
    float: left;
    padding: 6px 0;;
    height: 48px;
    margin-right: 100px;
}
header .header-top nav.ul{
    width: 900px;   
}
header .header-top nav ul li{
    float: left;
    width: 150px;
    text-align: center;
    line-height: 60px;
}
header .header-top nav ul li.cur{
    background-color: tomato;
}
header .header-top nav ul li a{
    display: block; 
    width: 150px;
    height: 60px;
    font-size: 16px;
    color: white;
    text-decoration: none;
}
header .header-top nav ul li a:hover{
background-color: gold;
}

.banner{
    width: 100%;
    height: 600px;
    position: relative;
    /* overflow: hidden; */
}
.banner .banner-img{
    width:100% ;
    height: 600px;
    position: absolute;
}
.banner .center{
    position: absolute;
    width: 100%;
    height: 600px;
    background:rgba(0, 0, 0, 0.5);

}
.banner .form{
    width:504px;
    height:390px;
    position:absolute;
    left:50%;
    margin-top:100px;
    margin-left:-252px;
    margin-bottom: -110px;
    text-align: center; 
}
.banner .form .name{
    display:block;   
    width:502px;    
    height:38px;    
    border:1px solid #808080; 
    margin-bottom:30px;    
    background:none;
}
.banner .form .phone{
    display:block;   
    width:502px;    
    height:38px;    
    border:1px solid #808080; 
    margin-bottom:30px;    
    background:none;
}
.banner .form .email{
    display:block;   
    width:502px;    
    height:38px;    
    border:1px solid #808080; 
    margin-bottom:30px;    
    background:none;
}
.banner .form .com{
    display:block;   
    width:502px;    
    height:108px;    
    border:1px solid #808080; 
    margin-bottom:30px;    
    background:none;
}
.banner .form .sm{
    display:block;   
    width:198px;    
    height:38px;    
    border:1px solid #808080;     
    left: 50%; 
    margin: 0 auto;  
    background:none;
    color: salmon;
}
.banner .form .sm input:last-child{
    margin-bottom:0px;
}

/* about区域 */
.about .main1 {
    width: 1201px;
    margin: 0 auto;
    padding-top: 30px;
    overflow: hidden;
}
/* about区域上部分标题居中 */
.about .main1 h2 {
    font-size: 32px;
    text-align: center;
}
/* 分割线 */
.about .main1 .cutting-line {
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
}
/* about区域上部分文字居中 */
.about .main1 dl dt{
    text-align: center;
    color: gray;
    font-size: 14px;
    width: 450px;
    margin: 0 auto;
}
/* about区域下部分 */
.about .main2{
    width: 1201px;
    height: 462px;
    padding-top: 30px;
    position: relative;
    margin: 0 auto;     
}
/* 左侧标题 */
.about .main2 .aw {
    float: left;
}
.about .main2 .aw h2{
    width: 180px;
    font-size: 30px;
    padding-bottom: 30px;
}
/* 左侧框*/
.about .main2 .aw .aw-left{
    position: absolute;
    width: 300px;
    padding: 20px;
    border: 1px solid gray;
    background-color: rgba（255,255,255,.5）
}
.about .main2 .aw .aw-left .hh{
    font-size: 18px;
    padding-bottom: 20px;
}
.about .main2 .aw .aw-a{
    display: block;
    background-color: black;
    color: white;
    width: 140px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
}
.about .main2 .ex-img{
    float: left;
    height: 434px;
    width: 650px;
    margin-left: 90px;
}
/* 右侧 */
.about .main2 .sz {
    float: right;
}
.about .main2 .sz .sz1{
    border: 1px solid #07cbc9;
    width: 258px;
    height: 164px;
    margin-bottom: 30px;
}
.about .main2 .sz .sz1 h3{
    font-size: 28px;
    font-weight: bold;
    padding-top: 40px;
    text-align: center; 
}
.about .main2 .sz .sz1 .cutting-line{
    width: 60px;
    height: 3px;
    background-color:#07cbc9 ;
    margin: 10px auto;
}
.about .main2 .sz .sz1 .st{
    font-size: 18px;
    padding-bottom: 40px;
    text-align: center;
}

.about .main2 .sz .sz2{
    border: 1px solid #07cbc9;
    width: 258px;
    height: 164px;
    margin-bottom: 30px;
}
.about .main2 .sz .sz2 h3{
    font-size: 28px;
    font-weight: bold;
    padding-top: 40px;
    text-align: center; 
}
.about .main2 .sz .sz2 .cutting-line{
    width: 60px;
    height: 3px;
    background-color:#07cbc9 ;
    margin: 10px auto;
}
.about .main2 .sz .sz2 .st{
    font-size: 18px;
    padding-bottom: 40px;
    text-align: center;
}
/* 图片 */
.jqjs{
    width: 100%;
    height: 760px;
    background-color: rgba(35, 195, 216, 0.616);
    position: relative;
}
.jqjs .pic{
    float: left;
    width: 25%;
    height: 380px;
    display: block;

}
.jqjs .wz{
    position: relative;
    float: left;
    width: 25%;
    height: 380px;
}
.jqjs .wz h2{
    margin:20px 0 0 20px;
    font-size: 24px;
    margin-bottom: 30px;
    color: white;
}
.jqjs .wz dl dt{
    margin-left: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    color: white;
}
.jqjs .wz dl dd{
    margin-left: 20px;
    font-size: 14px;
    margin-bottom: 30px;
    color: gray;
}
.jqjs .wz .wz-btn{
    display: block;
    width: 138px;
    height: 40px;
    margin:0 auto;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
/* 三角形区域 */

/* 左三角 */
.jqjs .left::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    position: absolute;
    border-right-color: #07cbc9;
    left: -40px;
    top:50%
}
.jqjs .right::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    position: absolute;
    border-left-color: #07cbc9;
    left: 100%;
    top: 50%;
}
 /*gallery区域  */
.content .usefui-links .gallery{

}
.content .usefui-links .gallery .main1{
    width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
    overflow: hidden;
}
.content .usefui-links .gallery .main1 h2{
    font-size: 32px;
    text-align: center;
}
.content .usefui-links .gallery .main1 dl .cutting-line{
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
}
.content .usefui-links .gallery .main1 dl dt{
    text-align: center;
    color: gray;
    font-size: 14px;
    width: 450px;
    margin: 0 auto; 
}
.content .usefui-links .gallery .main2{
    width: 1200px;
    height: 653px;
     /* background-color: pink;   */
    margin: 0 auto;
    padding: 20px;
}
.content .usefui-links .gallery .main2 .pic-dt{
    width: 360px;
    height: 290px;
    float: left;
    margin-right: 60px;
    margin-bottom: 45px;
}
.content .usefui-links .gallery .main2 .pic-dt:nth-child(3){
    margin-right: 0;
}
.content .usefui-links .gallery .main2 .pic-dt:last-child{
    margin-right: 0;
    margin-bottom: 0;
}
.content .usefui-links .gallery .main2 .pic-dt:nth-child(4){
    margin-bottom: 0;
}
.content .usefui-links .gallery .main2 .pic-dt:nth-child(5){
    margin-bottom: 0;
}
.content .usefui-links .gallery .main2 .pic-dt .pic{
    height: 240px; 
    display: block;  
}
.content .usefui-links .gallery .main2 .pic-dt dt{
    height: 50px;
    color: white;
    background-color: black;
    padding-left: 20px;
    line-height: 50px;
}
.address{
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background-color: #07cbc9;
}


写回答

1回答

好帮手慕张

2021-03-06

同学你好，小三角没有垂直居中，建议修改：设置margin-top:-三角高度的一半，才能实现垂直居中显示

http://img.mukewang.com/climg/604368c609ef95d412070768.jpg

代码修改如下：

​http://img.mukewang.com/climg/604368f909bf9d5003340320.jpg

祝学习愉快！

0

0 学习 · 15276 问题

查看课程

相似问题

请老师帮忙检查一下代码

回答 1

老师帮忙检查下

回答 1

请老师帮忙检查一下代码

回答 1

老师 帮忙检查下

回答 1

老师，麻烦检查一下有错误没

回答 1

打开慕课网App查看更多内容