老师可以帮忙看下这节作业吗？谢谢！

老师可以帮忙看下这节作业吗？谢谢！

代码如下，我测试了实现效果OK，可以麻烦老师帮忙看看还有哪些可以优化的地方吗？谢谢！


相关代码：

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>HTML页面练习</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <div class="logo_nav">
            <!-- logo -->
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <!-- 导航区域 -->
            <div class="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>
            </div>
        </div>
    </header>
    <!-- Banner -->
    <section class="banner">
        <!-- banner图片 -->
        <div class="banner_images">
            <img src="images/banner3.jpg" alt="">
        </div>
        <!-- banner遮罩层 -->
        <div class="banner_cover"></div>
        <!-- banner表单 -->
        <div class="banner_form">
            <form action="">
                <div class="enter_content">
                    <input type="text"  placeholder="your Name">
                    <input type="text"   placeholder="your Phone">
                    <input type="email" " placeholder="your Email">
                    <textarea cols="60" rows="5" placeholder="Write Your Comment Here"></textarea>
                </div>
                <div class="send_message">
                    <input type="submit" value="SEND MESSAGE">
                </div>
            </form>
        </div>
    </section>
    <!-- about区域 -->
    <section class="about_section">
        <!-- about上半部分 -->
        <div class="about_upper_section">
            <h2>ABOUT</h2>
            <p>分割线</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            <p>industry. Lorem Ipsum has been the industry's standard dummy</p>
            <p>text ever since the 1500s.</p>
        </div>
        <!-- about下半部分 -->
        <div class="about_lower_section">
            <!-- about下半部分左 -->
            <div class="about_lower_section_left">
                <h3>A WORD</h3>
                <h3>ABOUT US</h3>
                <p>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>EXPLORE</p>
            </div>
            <!-- about下半部分中 -->
            <div class="about_lower_section_middle">
                <img src="images/bb3.jpg" alt="">
            </div>
            <!-- about下半部分右 -->
            <div class="about_lower_section_right">
                <p>70000</p>
                <p>分割线</p>
                <p>Students</p>
                <p>600</p>
                <p>分割线</p>
                <p>Faculty</p>
            </div>
        </div>
    </section>
    <!-- 图文混排区域 -->
    <section class="images&texts">
        <!-- 图片1 -->
        <div class="img_1">
            <img src="images/b1.jpg" alt="">
        </div>
        <!-- 文字2 -->
        <div class="tx_2">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</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>
            <p>EXPLORE</p>
        </div>
        <!-- 图片3 -->
        <div class="img_3">
            <img src="images/b2.jpg" alt="">
        </div>
        <!-- 文字4 -->
        <div class=tx_4"">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</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>
            <p>EXPLORE</p>
        </div>
        <!-- 文字5 -->
        <div class="tx_5">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</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>
            <p>EXPLORE</p>
        </div>
        <!-- 图片6 -->
        <div class="img_6">
            <img src="images/b3.jpg" alt="">
        </div>
        <!-- 文字7 -->
        <div class="tx_7">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</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>
            <p>EXPLORE</p>
        </div>
        <!-- 图片8 -->
        <div class="img_8">
            <img src="images/b4.jpg" alt="">
        </div>
    </section>
    <!-- gallery区域 -->
    <section class="gallery_section">
        <!-- gallery上半部分 -->
        <div class="gallery_upper_section">
            <h2>Gallery</h2>
            <p>分割线</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            <p>industry. Lorem Ipsum has been the industry's standard dummy</p>
            <p>text ever since the 1500s.</p>
        </div>
        <!-- gallery下半部分 -->
        <div class="gallery_lower_section">
            <dl>
                <dt>
                    <img src="images/03-01.jpg" alt="">
                </dt>
                <dd>Science Lab</dd>
                <dt>
                    <img src="images/03-02.jpg" alt="">
                </dt>
                <dd>Indoor Stadium</dd>
                <dt>
                    <img src="images/03-03.jpg" alt="">
                </dt>
                <dd>Transportation</dd>
                <dt>
                    <img src="images/03-04.jpg" alt="">
                </dt>
                <dd>Kids Room</dd>
                <dt>
                    <img src="images/03-05.jpg" alt="">
                </dt>
                <dd>Meditation Classes</dd>
                <dt>
                    <img src="images/03-06.jpg" alt="">
                </dt>
                <dd>Kids Play Ground</dd>
            </dl>
        </div>
    </section>
    <!-- 页脚 -->
    <footer>
        <p>&copy;&nbsp;2016&nbsp;imooc.com&nbsp;京ICP备13046642号</p>
    </footer>
</body>
</html>


CSS

/* 以这个css为准 */
*{
    padding: 0;
    margin: 0;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
header{
    width: 100%;
    height: 80px;
    background-color: #07cbc9;
}
header .logo_nav{
    width: 1200px;
    margin: 0 auto;
}
header .logo_nav .logo{
    float: left;
    width: 260px;
    height: 48px;
    padding: 16px 0;
}
header .logo_nav .nav{
    float: right;
    width: 720px;
    height: 80px;
    margin-left: 160px;
    margin-right: 40px;
}
header .logo_nav .nav ul{

}
header .logo_nav .nav ul li{
    float: left;
    width: 100px;
    height: 80px;
    margin-right: 20px;
}
header .logo_nav .nav ul li a{
    display: block;
    width: 100px;
    height: 80px;
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 80px;
}
header .logo_nav .nav ul li a:hover{
    background-color: gold;
}
.banner{
    width: 100%;
    height: 600px;
    position: relative;
}
.banner .banner_images img{
    width: 100%;
    height: 600px;
}
.banner .banner_cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.5);
}
.banner .banner_form form{
    position: absolute;
    width: 506px;
    left: 50%;
    margin-left: -252px;
    top: 100px;
}
.banner .banner_form form .enter_content input,textarea{
    display: block;
    width: 504px;
    border: 1px solid #808080;
    background: none;
}
.banner .banner_form form .enter_content input{
    height: 40px;
    margin-bottom: 20px;
}
.banner .banner_form form .enter_content textarea{
    height: 110px;
}
.banner .banner_form form .send_message input{
    display: block;
    width: 200px;
    height: 40px;
    border: 1px solid #808080;
    background: none;
    margin: 20px auto;
    color: #808080;
}


测试效果截图：

https://img1.sycdn.imooc.com//climg/637f032709640b2119150854.jpg


麻烦老师看看是否还有可以优化的地方，谢谢~
桐子酱Virginia 2022-11-24
源自：浮动与定位   4-6 自由编程
12
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕星星 回答被采纳获得+3积分 2022-11-24 13:46:39

同学你好，代码实现效果可以。优化如下 ：

1、标点符号问题：

https://img1.sycdn.imooc.com//climg/637f04c9090095ae11840375.jpg

https://img1.sycdn.imooc.com//climg/637f04de09d2299009760111.jpg

2、表单按钮中的文本没有水平居中显示

https://img1.sycdn.imooc.com//climg/637f04b309dc432004180114.jpg

可以加上样式，参考：

https://img1.sycdn.imooc.com//climg/637f053909f8863511810443.jpg

祝学习愉快！

0
收起回答
  • 桐子酱Virginia 提问者 #1

    非常感谢指正！第1点已修改，不过关于第2点，在我的浏览器（Chrome）上原本显示的就是水平居中（如下图），不知道为什么在老师那边没有居中呢？是浏览器的解析问题吗？


    https://img1.sycdn.imooc.com//climg/637f2469096686d503570106.jpg


    这样的话，我还需要再额外添加text-align: center;这行代码吗？


    期待回复，谢谢~


    2022-11-24 16:01:24
  • 好帮手慕星星 回复 提问者 桐子酱Virginia #2

    可能是老师这边格式化代码后再删除多余引号，导致type值中多了空格，不是默认居中了

    https://img1.sycdn.imooc.com//climg/637f3e9b093ecb0710300184.jpg

    这边将空格删掉就没问题。同学不用加水平居中样式了。

    2022-11-24 17:52:45
  • 桐子酱Virginia 提问者 回复 好帮手慕星星 #3

    好的，谢谢老师解答！

    2022-11-24 21:00:35
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师可以帮我看看这道题吗？谢谢老师
53 1 10
作业能否得到帮助？
112 0 5
老师帮忙看一下代码,谢谢!
11 0 3
帮忙修改下，谢谢
30 0 5
是要作业通过才开通下一章节吗？
33 0 7

登录后可查看更多问答，登录/注册

前端工程师
  • 参与学习           人
  • 提交作业       15717    份
  • 解答问题       17883    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师