体系课

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

请老师检查代码是否正确

来源：4-10 自由编程

慕先生9380059

2021-06-01 14:39:07

相关代码：CSS部分

*{
    margin: 0;
    padding: 0;
}
ul ,lo li{
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    font:normal 16px "微软雅黑";
}
header {
    height: 80px;
    background-color: #07cbc9;

}
header .header-banner {
    width: 1200px;
    margin: 0 auto;
}
header .header-banner .logo{
    margin-top: 16px;
    float: left;
    margin-right: 300px;
}
header .header-banner nav  {
    float:right;

}header .header-banner nav ul li{
    float: left;
    margin-right: 20px;
}
header .header-banner nav ul li a {
    display: block;
    font-size: 16px;
    height: 80px;
    line-height: 80px;
    color:white
}
.banner {
   position: relative;
}
.banner .pic{
    width: 100%;
    height: 600px;
}
.banner .pic img {
    width: 100%;
    height: 600px;
}
.banner .shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    background: rgba(0, 0, 0, .5);
    z-index: 99;

}
.banner .table {
    position: absolute;
    width: 504px;
    height: 600px;
    left: 50%;
    margin-left: -255px;
    top: 0;
    z-index:999;
}
.banner .table .public {
    width: 500px;
    height: 40px;
    background: none;
    margin-bottom: 15px;
    border: 2px solid #808080;
    color:#808080 ;
}
.banner .table .name {
    margin-top: 100px;
}
.banner .table .send {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    bottom:200px;
    width: 200px;
    height: 40px;
    text-align: center;
    font-size: 20px;

}
.about .about_header {
    width: 500px;
    margin: 0 auto;
}
.about .about_header h2{
   text-align: center;
   font-size: 32px;
   margin-top: 30px;
}
.cut{
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin:10px auto;
}
.about .about_header .des {
    text-align: center;
    font-size: 15px;
    color: gray;
}
.about .about-body {
   position: relative;
    width: 1201px;
    height: 464px;
    margin: 0 auto;
    margin-top: 30px;
    overflow: hidden;
}
.about .about-body h2 {
    width: 200px;
    font-size: 30px;
}
.about .about-body .left {
    float: left;
    width: 260px;
    position: relative;
}
.about .about-body .left .main {
    position: absolute;
    left: 0;
    top:100px ;
    width: 300px;
    padding: 20px;
    font-size: 18px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid gray;
    z-index: 999;
}
.about .about-body .left .main a {
    display: block;
    border: 1px solid black;
    width: 138px;
    height: 38px;
    line-height: 38px;
    margin-top: 30px;
    text-align: center;
    background-color: black;
    color: white;
    font-size: 25px;
}
.about .about-body .pic {
    float: left;
    width: 650px;
    height: 435px;
    z-index: 99;
}
.about .about-body .right {
    float: right;
    width: 260px;
    height: 400px;
}
.about .about-body .right .top {
    padding: 40px 0;
    width: 260px;
    height: 100px;
    border: 1px solid skyblue;
    margin-bottom: 30px;
    text-align: center;
}
.about .about-body .right .number {
    font-size: 28px;
    font-weight: 700;
}
.about .about-body .right .bottom {
    padding: 40px 0;
    width: 260px;
    height: 100px;
    border: 1px solid skyblue;
    text-align: center;
}
.about .about_main {
    width: 100%;
    overflow: hidden;
    height: 760px;
}
.about .about_main img{
    height: 380px;
}
.about .about_main .left {
    float: left;
    width: 25%;
    height: 380px;
   background-color: #07cbc9;
   color: white;
}
.about .about_main .left p {
    text-align: center;
}
.about .about_main .left .par1 {
    font-size: 16px;
    margin-bottom: 20px;
}
.about .about_main .left .par2 {
    font-size: 14px;
    color: gray;
}
.about .about_main .left h3 {
font-size: 24px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 30px;
}

.about .about_main .left a {
    display: block;
    width: 138px;
    height: 40px;
    margin: 0 auto;
    background-color: black;
    color:white;
    line-height: 40px;
    font-size: 25px;
    margin-top: 25px;

}

相关代码：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>小木医生</title>
    <link rel="stylesheet" href="css.css">
</head>

<body>
    <!-- Header区域 -->
    <header>
        <div class="header-banner">
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <nav class="main-nav">
                <ul>
                    <li><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">
        <div class="pic">
            <img src="images/banner3.jpg" alt="">
        </div>
        <div class="shade"></div>
        <div class="table">
            <form action="">
                <input type="text" placeholder="Yourname" class="name public">
                <input type="tel" placeholder="Yourphone" class="phone public">
                <input type="email" placeholder="Youremail" class="mail public">
                <textarea cols="30" rows="10" placeholder="Write your comment" class="comment public"></textarea>
                <input type="submit" value="SEND MESSAGE" class="public send">

            </form>
        </div>
    </section>
    <!-- about区域 -->
    <section class="about">
        <div class="about_header">
            <h2>ABOUT</h2>
            <div class="cut"></div>
            <!-- ABOUT描述部分 -->
            <p class="des">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.
            </p>
        </div>
        <div class="about-body">
            <div class="left">
                <h2>A WORD ABOUT US</h2>
                <div class="main">
                    <p class="des2">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis
                        gravida commodo?
                        Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
                    <p><a href="">explore</a></p>
                </div>

            </div>
            <img src="images/bb3.jpg" alt="" class="pic">
            <div class="right">
                <div class="top">
                    <p class="number">70000</p>
                    <p class="cut"></p>
                    <p>students</p>
                </div>
                <div class="bottom">
                    <p class="number">600</p>
                    <p class="cut"></p>
                    <p>Faculty</p>
                </div>
            </div>
        </div>
        <!-- 图文混排区域 -->
        <div class="about_main">
            <div class="pic1 left">
                <img src="images/b1.jpg" alt="">
            </div>
            <div class="text1 left">
                <h3>Library</h3>
                <p class="par1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                   <p class="par2"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer
                    took a galley of type and scrambled it to make a type specimen book.
                </p>
                <P><a href="">EXPLORE</a></P>
            </div>
            <div class="pic2 left">
                <img src="images/b2.jpg" alt="">
            </div>
            <div class="text2 left">
                <h3>Library</h3>
                <p class="par1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="par2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                    took a galley of type and scrambled it to make a type specimen book.
                </p>
                <P><a href="">EXPLORE</a></P>
            </div>
            <div class="text3 left">
                <h3>Library</h3>
                <p class="par1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="par2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                    took a galley of type and scrambled it to make a type specimen book.
                </p>
                <P><a href="">EXPLORE</a></P>
            </div>
            <div class="pic3 left">
                <img src="images/b3.jpg" alt="">
            </div>

            <div class="text4 left">
                <h3>Library</h3>
                <p class="par1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="par2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                    took a galley of type and scrambled it to make a type specimen book.
                </p>
                <P><a href="">EXPLORE</a></P>
            </div>
            <div class="pic4 left">
                <img src="images/b4.jpg" alt="">
            </div>
        </div>
    </section>
    <!-- gallery区域 -->
    <section class="gallery">
        <div class="gallery-header">
            <h2>GALLERY</h2>
            <div>
                <p>分割线</p>
                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                    took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
        <div class="gallery-main">
            <div>
                <dl>
                    <dt><img src="images/03-01.jpg" alt=""></dt>
                    <dd>Science Lab</dd>
                </dl>
                <dl>
                    <dt><img src="images/03-02.jpg" alt=""></dt>
                    <dd>Indoor Stadium</dd>
                </dl>
                <dl>
                    <dt><img src="images/03-03.jpg" alt=""></dt>
                    <dd>Transportation</dd>
                </dl>
                <dl>
                    <dt><img src="images/03-04.jpg" alt=""></dt>
                    <dd>Kids Room</dd>
                </dl>
                <dl>
                    <dt><img src="images/03-05.jpg" alt=""></dt>
                    <dd>Meditation Clsases</dd>
                </dl>
                <dl>
                    <dt><img src="images/03-06.jpg" alt=""></dt>
                    <dd>Kids Play Ground</dd>
                </dl>
            </div>
        </div>
    </section>
    <!-- footer区域 -->
    <footer>
        <div></div>
        <footer>
</body>

</html>


写回答

1回答

好帮手慕然然

2021-06-01

同学你好，代码实现是可以的，不过建议给img图片设置width属性，让其等于父元素宽度，否则在分辨率大的电脑屏幕中打开该网页，会出现如下效果：

http://img.mukewang.com/climg/60b5fffe09ef358c17660716.jpg

参考代码如下：

http://img.mukewang.com/climg/60b60039090a535a04950226.jpg

另外，建议文字部分按照设计图居左对齐，参考代码如下：

http://img.mukewang.com/climg/60b6004709ce5dc405780309.jpg

祝学习愉快！

0

0 学习 · 15276 问题

查看课程

相似问题

请老师检查

回答 2

老师好，帮检查下代码是否正确

回答 1

请老师检查代码是否正确

回答 1

老师，请检查代码是否正确

回答 1

请老师检查一下代码是否正确

回答 1

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