老师帮我检查下 ，还有其中遇到的几个问题（网页布局基础2-12）

老师帮我检查下 ，还有其中遇到的几个问题（网页布局基础2-12）

<!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>css网页布局2-12编程练习</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            color: #fff;

            

        }

        .nav{

            background: #333;

            width: 100%;

            height: 100px;

            line-height: 100px;

        }

        .logo img{

            display: block;

            

        }

        .logo{

            float: left;

        }

        .nav ul{

            float: right;

            margin-right: 40px;

        }

        .nav ul li{

            float: left;

           margin-left: 40px;

           

        }

        li{

            list-style-type: none;

        }

        a{

            text-decoration: none;

            font-size: 24px;

        }

        


        /* 以上为导航样式 */


        .main{

            width: 100%;

            height: 800px;

            float: left;

            background: #add8e6;

            overflow: hidden;

            *zoom:1;

           

            

        }

        

        .main-left{

            width: 30%;

            height: 800px;

            background: lightgrey;

            padding-top: 100px;

            float: left;

            padding-left: 100px;

            box-sizing: border-box;

            

        }

        

        h2{

            color: #333;

            margin-left: 10px;


        }

        .main h2,

        .main ul li {margin-bottom: 20px;


        }

        .main-left-bg{

            background: pink;

            color: #333;

        }

        .main-left ul li span{

            margin-left: 10px;

            color: #333;

        }

        /* 以上为最左侧内容 */


        .main-middle{

            width: 30%;

            height: 800px;

            background: slategray;

            float: left;

            padding-top: 100px;

            padding-left: 100px;

            box-sizing: border-box;

            

        }  

       

        .main ul li span {

            margin-right:10px;

            color:#333

        }


        .main-middle h2{

            margin-left: -10px;

        }

        

        /* 以上为中间内容 */

        .main-right{

            width: 40%;

            height: 800px;

            background: lightcyan;

            float: right;

            border-left: 5px solid orange; 

            box-sizing: border-box;

        }

        h1{

            color: #333;

            padding-top: 50px;

        }


        .input01,.input02,.submit{

            margin-top: 20px;

            margin-left: 200px;

        }

        input{

            border:0;


        }

        

        /* 以上为右侧内容 */


        /* 以上为主体内容 */


        .footer{

            background: #333;

            width: 100%;

            height: 100px;

            line-height: 100px;

            text-align: center;

            bottom: 0;

            padding-bottom: 800px;

            /* 老师我这里又不太理解了 如果我不写padding-bottom与主体内容等同的高度 页脚这边就会遮住看不到 这是为啥 */

        }

        .footer li {

            

            display: inline-block;

            margin: 0 20px;

        }

        /* 这里显示有点问题 在页脚最底下有缝隙 可是已经设置了 inline-block */


    </style>

</head>

<body>

    <div class="nav"> 

        <a href="#" class="logo">

            <img src=" http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" >

        </a>

        <!-- logo -->

        <ul class="sub-nav">

            <li><a href="#">课程路径</a></li>

            <li><a href="#">职业路径</a></li>

            <li><a href="#">实战</a></li>

            <li><a href="#">猿问</a></li>

            <li><a href="#">手记</a></li>

        </ul>

    </div>

    <!-- 导航内容 -->

    <div class="main">

        <div class="main-left">

            <h2>课程推荐</h2>

            <ul>

                <li><span class="main-left-bg">职业路径</span><span>html5与css3实现动态网页</span></li>

                <li><span class="main-left-bg">职业路径</span><span>零基础入门Android语法与界面</span></li>

                <li><span class="main-left-bg">职业路径</span><span>ios基础语法与常见控件</span></li>

                <li><span class="main-left-bg">职业路径</span><span>php入门开发</span></li>

                <li><span class="main-left-bg">职业路径</span><span>Java入门开发</span></li>

            </ul>

        </div>

        <!-- 主体左侧内容 -->


        <div class="main-middle">

                <h2>相关课程</h2>

                <ul>

                    <li><span>html</span><span>css</span><span>javascript</span></li>

                    <li><span>html</span><span>css</span><span>jquery</span></li>

                    <li><span>移动端基础班</span><span>移动端app开发</span></li>

                </ul>

        </div>

        <!-- 主体右侧内容 -->


        <div class="main-right">

            <h1 align="center">登录</h1>

            <form action="one.php" method="GET">   

               

                <div class="input01">

               <input type="text" name="username" placeholder="请输入登录邮箱手机号" style="font-size: 15px;

                width: 240px; height: 80px; font-weight: bold;"></div>

                

                <div class="input02">

                <input type="password" name="pwd" style="width: 240px; height: 80px; font-weight: bold；

                 " placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16" size="6"></div>

                 <!-- 老师 这里要写font-size会报错 -->

                    <div class="submit">

                 <input type="submit" name="submit" value="登录" style="width:240px ;

                 height: 80px; background: red; font-size: 24px;" /></div>

            </form>

        </div>


    </div>

    <!-- 以上为主体内容 -->

    

    

    

    <div class="footer">

        <ul>

            <li><a href="#">网站首页</a></li>

            <li><a href="#">企业合作</a></li>

            <li><a href="#">人才招聘</a></li>

            <li><a href="#">联系我们</a></li>

            <li><a href="#">常见问题</a></li>

            <li><a href="#">友情链接</a></li>

        </ul>

    </div>

    <!-- 以上为页脚内容 -->

</body>

</html>
豆包侠 2021-08-25
源自：CSS网页布局基础   2-12 编程练习
13
收起

正在回答 回答被采纳积分+1

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

1回答
好帮手慕然然 2021-08-25 18:18:55

同学你好，代码优化及问题解答如下：

1、导航项之间使用左右padding撑开比较好，如图所示

http://img1.sycdn.imooc.com//climg/612603be0919332214630647.jpg

2、mian盒子是页面主体部分，按照从上往下的顺序排列即可，不需要设置浮动，否则会脱离文档流，影响后面footer盒子的布局（就会出现同学所说的问题：不写padding-bottom与主体内容等同的高度 页脚这边就会遮住看不到）

http://img1.sycdn.imooc.com//climg/6126057d09832dea07730430.jpg

http://img1.sycdn.imooc.com//climg/6126060f098ec97712110529.jpg

3、nav导航盒子与main盒子之间有缝隙、footer页脚底部有缝隙，由于nav盒子和footer盒子中的ul高度超出了父盒子，如图

http://img1.sycdn.imooc.com//climg/612608b509aabc9a19140658.jpg

建议：给nav盒子和footer盒子设置超出隐藏即可，代码如下

http://img1.sycdn.imooc.com//climg/6126190809c056ff05100197.jpg

4、右侧登录部分的样式建议按照效果图设置，如图

http://img1.sycdn.imooc.com//climg/61260b9409aae57213200448.jpg

另外，css样式代码，不建议写在开始标签的style属性中，如图

http://img1.sycdn.imooc.com//climg/61260d1709f3743c16320538.jpg

登录部分的实现代码参考如下：

http://img1.sycdn.imooc.com//climg/612611b509b8c11c14640637.jpg

http://img1.sycdn.imooc.com//climg/612611ba09616f7208400577.jpg

祝学习愉快！

0
收起回答
  • 提问者 豆包侠 #1 
    <!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>css网页布局2-12编程练习</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                color: #fff;

            }
            .nav{
                background: #333;
                width: 100%;
                height: 100px;
                line-height: 100px;
            }
            .logo img{
                display: block;

            }
            .logo{
                float: left;
            }
            .nav ul{
                float: right;
                margin-right: 40px;
            }
            .nav ul li{
                float: left;
               padding: 0 20px;

            }
            li{
                list-style-type: none;
            }
            a{
                text-decoration: none;
                font-size: 24px;
            }


            /* 以上为导航样式 */

            .main{
                width: 100%;
                height: 800px;
                background: #add8e6;
                overflow: hidden;

            }

            .main-left{
                width: 30%;
                height: 800px;
                background: lightgrey;
                padding-top: 100px;
                float: left;
                padding-left: 100px;
                box-sizing: border-box;

            }

            h2{
                color: #333;
                margin-left: 10px;

            }
            .main h2,
            .main ul li {margin-bottom: 20px;

            }
            .main-left-bg{
                background: pink;
                color: #333;
            }
            .main-left ul li span{
                margin-left: 10px;
                color: #333;
            }
            /* 以上为最左侧内容 */

            .main-middle{
                width: 30%;
                height: 800px;
                background: slategray;
                float: left;
                padding-top: 100px;
                padding-left: 100px;
                box-sizing: border-box;

            }  

            .main ul li span {
                margin-right:10px;
                color:#333
            }

            .main-middle h2{
                margin-left: -10px;
            }

            /* 以上为中间内容 */
            .main-right{
                width: 40%;
                height: 800px;
                background: lightcyan;
               float: left;
                border-left: 5px solid orange; 
                box-sizing: border-box;
            }
            .main-right h1{
                 margin-left: 200px;
                 color: #333;
                 margin-top: 100px;
            }
            .main-right input{
                border: 0;
                font-size: 12px;
                height: 40px;
                width: 240px;
                font-weight: lighter;
                text-indent: 5px;
                outline: 0;
                /* 老师这个outline是啥意思 */
                color: #000;
                margin-left: 200px;
                margin-top: 20px;
                /* 老师这边第二个框里的字要怎么写才能让它全部显示出来 */
            }
            .main-right input[type=submit]{
                background-color: red;
                font-size: 16px;
                color:#fff

            }
            /* 以上为右侧内容 */

            /* 以上为主体内容 */

           .nav,.footer{
               overflow: hidden;
           }

           /* 消除导航与页脚因ui尺寸超过父元素造成的间隙 */

            .footer{
                background: #333;
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;

            }
            .footer li {

                display: inline-block;
                margin: 0 20px;
            }
              </style>
    </head>
    <body>
        <div class="nav"> 
            <a href="#" class="logo">
                <img src=" http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" >
            </a>
            <!-- logo -->
            <ul class="sub-nav">
                <li><a href="#">课程路径</a></li>
                <li><a href="#">职业路径</a></li>
                <li><a href="#">实战</a></li>
                <li><a href="#">猿问</a></li>
                <li><a href="#">手记</a></li>
            </ul>
        </div>
        <!-- 导航内容 -->
        <div class="main">
            <div class="main-left">
                <h2>课程推荐</h2>
                <ul>
                    <li><span class="main-left-bg">职业路径</span><span>html5与css3实现动态网页</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>零基础入门Android语法与界面</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>ios基础语法与常见控件</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>php入门开发</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>Java入门开发</span></li>
                </ul>
            </div>
            <!-- 主体左侧内容 -->

            <div class="main-middle">
                    <h2>相关课程</h2>
                    <ul>
                        <li><span>html</span><span>css</span><span>javascript</span></li>
                        <li><span>html</span><span>css</span><span>jquery</span></li>
                        <li><span>移动端基础班</span><span>移动端app开发</span></li>
                    </ul>
            </div>
            <!-- 主体右侧内容 -->

            <div class="main-right">
                <h1>登录</h1>
                <form action="one.php" method="GET">
                <div class="input01">
                    <input type="text" name="username" placeholder="请输入登录手机邮箱号"
                    onmouseover="this.title=this.value">

                </div>

                <div class="input02">
                    <input type="password" name="pwd" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16" size="6"
                    onmouseover="this.title=this.value">
                </div>

                <div class="submit">
                    <input type="submit" name="submit" value="登录" >
                </form>
                </div>


            </div>

        </div>
        <!-- 以上为主体内容 -->



        <div class="footer">
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">企业合作</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
        </div>
        <!-- 以上为页脚内容 -->
    </body>
    </html>

    我百度了下 怎么样让input里的字体显示齐全   

    让我在 input里 添加 

    onmouseover="this.title=this.value" 可是写上去还是原样

    onmouseover="this.title=this.value"

    onmouseover="this.title=this.value"


    2021-08-26 11:24:21
  • 提问者 豆包侠 #2 
    <!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>css网页布局2-12编程练习</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                color: #fff;

            }
            .nav{
                background: #333;
                width: 100%;
                height: 100px;
                line-height: 100px;
            }
            .logo img{
                display: block;

            }
            .logo{
                float: left;
            }
            .nav ul{
                float: right;
                margin-right: 40px;
            }
            .nav ul li{
                float: left;
               padding: 0 20px;

            }
            li{
                list-style-type: none;
            }
            a{
                text-decoration: none;
                font-size: 24px;
            }


            /* 以上为导航样式 */

            .main{
                width: 100%;
                height: 800px;
                background: #add8e6;
                overflow: hidden;

            }

            .main-left{
                width: 30%;
                height: 800px;
                background: lightgrey;
                padding-top: 100px;
                float: left;
                padding-left: 100px;
                box-sizing: border-box;

            }

            h2{
                color: #333;
                margin-left: 10px;

            }
            .main h2,
            .main ul li {margin-bottom: 20px;

            }
            .main-left-bg{
                background: pink;
                color: #333;
            }
            .main-left ul li span{
                margin-left: 10px;
                color: #333;
            }
            /* 以上为最左侧内容 */

            .main-middle{
                width: 30%;
                height: 800px;
                background: slategray;
                float: left;
                padding-top: 100px;
                padding-left: 100px;
                box-sizing: border-box;

            }  

            .main ul li span {
                margin-right:10px;
                color:#333
            }

            .main-middle h2{
                margin-left: -10px;
            }

            /* 以上为中间内容 */
            .main-right{
                width: 40%;
                height: 800px;
                background: lightcyan;
               float: left;
                border-left: 5px solid orange; 
                box-sizing: border-box;
            }
            .main-right h1{
                 margin-left: 200px;
                 color: #333;
                 margin-top: 100px;
            }
            .main-right input{
                border: 0;
                font-size: 12px;
                height: 40px;
                width: 240px;
                font-weight: lighter;
                text-indent: 5px;
                outline: 0;
                /* 老师这个outline是啥意思 */
                color: #000;
                margin-left: 200px;
                margin-top: 20px;
                /* 老师这边第二个框里的字要怎么写才能让它全部显示出来 */
            }
            .main-right input[type=submit]{
                background-color: red;
                font-size: 16px;
                color:#fff

            }
            /* 以上为右侧内容 */

            /* 以上为主体内容 */

           .nav,.footer{
               overflow: hidden;
           }

           /* 消除导航与页脚因ui尺寸超过父元素造成的间隙 */

            .footer{
                background: #333;
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;

            }
            .footer li {

                display: inline-block;
                margin: 0 20px;
            }
              </style>
    </head>
    <body>
        <div class="nav"> 
            <a href="#" class="logo">
                <img src=" http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" >
            </a>
            <!-- logo -->
            <ul class="sub-nav">
                <li><a href="#">课程路径</a></li>
                <li><a href="#">职业路径</a></li>
                <li><a href="#">实战</a></li>
                <li><a href="#">猿问</a></li>
                <li><a href="#">手记</a></li>
            </ul>
        </div>
        <!-- 导航内容 -->
        <div class="main">
            <div class="main-left">
                <h2>课程推荐</h2>
                <ul>
                    <li><span class="main-left-bg">职业路径</span><span>html5与css3实现动态网页</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>零基础入门Android语法与界面</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>ios基础语法与常见控件</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>php入门开发</span></li>
                    <li><span class="main-left-bg">职业路径</span><span>Java入门开发</span></li>
                </ul>
            </div>
            <!-- 主体左侧内容 -->

            <div class="main-middle">
                    <h2>相关课程</h2>
                    <ul>
                        <li><span>html</span><span>css</span><span>javascript</span></li>
                        <li><span>html</span><span>css</span><span>jquery</span></li>
                        <li><span>移动端基础班</span><span>移动端app开发</span></li>
                    </ul>
            </div>
            <!-- 主体右侧内容 -->

            <div class="main-right">
                <h1>登录</h1>
                <form action="one.php" method="GET">
                <div class="input01">
                    <input type="text" name="username" placeholder="请输入登录手机邮箱号"
                    onmouseover="this.title=this.value">

                </div>

                <div class="input02">
                    <input type="password" name="pwd" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16" size="6"
                    onmouseover="this.title=this.value">
                </div>

                <div class="submit">
                    <input type="submit" name="submit" value="登录" >
                </form>
                </div>


            </div>

        </div>
        <!-- 以上为主体内容 -->



        <div class="footer">
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">企业合作</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
        </div>
        <!-- 以上为页脚内容 -->
    </body>
    </html>
    onmouseover="this.title=this.value"

    ​

    2021-08-26 11:25:52
  • 好帮手慕然然 回复 提问者 豆包侠 #3

    同学你好，解答如下：

    1、outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。像input元素会默认带有外轮廓，样式不美观，可以通过outline: 0去除，如图

    http://img1.sycdn.imooc.com//climg/612739a3090e9fcc04750317.jpg

    2、input输入框里的提示文字如果太多显示不全，可以将输入框的width宽度设大一点或者将字体大小设小一点，一般设计图给出的宽度都是能够显示完整字体的，同学不用担心这个问题。

    3、同学百度的解决方案，是给输入框标签添加title属性，当鼠标移到输入框上时，就会显示title属性中的内容，但是提示语是写在placeholder属性中的，而不是value属性中，代码需要修改一下，如图

    http://img1.sycdn.imooc.com//climg/61273ec9093d8fec14160559.jpg

    http://img1.sycdn.imooc.com//climg/61273d66098c0cca04700340.jpg

    祝学习愉快！

    2021-08-26 15:07:12
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

只学过HTML&CSS基础怎么办？
45 0 4
2-12编程练习 关于块级元素居中问题
0 0 2
老师麻烦帮我检查下 css网页布局基础2-14
15 0 3
这个基础课没有flex布局内容吗
15 0 3
老师，圣杯布局到底有什么优势呢
2 0 3

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

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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