圣杯布局编程练习案例

慕课网前端零基础-CSS网页布局基础3-3 编程练习

小伙伴们，我们学习了网页布局中的圣杯布局，接下来，根据效果图展示，写出页面，要求如下：

（1）页面在浏览器上全屏显示

（2）设置最小宽度，当页面宽度缩小到该值时，页面不再发生变化

（3）符合圣杯布局的特征是：左右两边宽度固定，中间响应式

效果图如下：

图片地址：

http://climg.mukewang.com/590037e00001fab706000400.jpg

http://climg.mukewang.com/590037f600016ce303000100.png

任务

扫描二维码关注公众号，回复： 5937099 查看本文章

第一步：先搭建出页面的html结构

页面分为头部、主体和底部，主体由左侧、中间及右侧组成

Tips：圣杯布局要先渲染中间部分

第二步：设置样式，从上到下设置页面样式

（1）头部样式：当鼠标放在右侧导航项时，鼠标变小手状，导航项字体颜色变为橘色

（2）注意左侧和右侧left、right及margin-right值的设置

第三步：写出页面底部样式，底部链接居中显示

参考代码：

<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">

        <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        body{
            min-width:1070px;
            min-height:500px;
            font-family:"宋体","微软雅黑",serif;
        }
        .header,.footer{
            position:fixed;
            width:100%;
            height:75px;   
            
        }
        .header{
            left:0;
            top:0;
            background:black;
            z-index:9999;
            
        }
        .header .logo{
            position:absolute;
            height:100%;

        }
        .logo img{
            height:100%;
        }

        .header .navigation{
            float:right;
            width:40%;
            line-height:75px;
            
        }
        .navigation ul li{
            float:left;
            color:white;  
            margin-left:8%;
        }
        .navigation ul li:hover{
            color:orange;
            cursor:pointer;
        }


        .footer{
            left:0;
            bottom:0;
            background:black;
            color:white;
            display:table;
        }
        .footer>span{
            display:table-cell;
            text-align:center;
            line-height:75px;
        }
        .footer>span span{
            display:inline-block;
            margin-left:2em;
        }

        .container{ 
            margin:75px  270px  75px  400px;
            width:auto;  
            height:700px;
            
        }
        /* 问题：采用这种方式，通过背景发现，主体内容较多时，会在鼠标滑块下移时，遮挡头部导航块，如何处理?通过z-index设置层叠顺序 */
        .container:after{
            content:".";
            display:block;
            visibility:hidden;
            font-size:0;
            clear:both;
        }
        .container{zoom:1;}
        

        .middle,.left,.right{
            float:left;
            position:relative;
            height:100%;
            padding-top:95px;;
            
        }
        .middle{
            width:100%;
            background-color:rgb(255,192,203);
            text-align:center;
        }
        .left{

            
            width:400px;
            margin-left:-100%;
            left:-400px;  
            background-color:rgb(255,239,219);
            
        }
        .left h3,.left li{
            margin-bottom:6%;
            padding-left:5%;
        }
        .left ul li span:nth-child(1){
            background-color:rgb(255,153,153);
            display:inline-block;
            margin-right:4%;
            
        }

        .right{   
            width:270px;
            margin-left:-270px;
            right:-270px;
            background-color:rgb(173,216,230);
           
        }
         .right h3,
        .right .input{

            margin-bottom:5%;
            margin-left:2%; 
            
        } 
        .right .input{
            display:float;
            width:90%;
            display:block;
            height:2em;
            line-height:2em;

        }
        input{
            border:none;
            padding:0;
            outline:none;   
        }
        .right .login{
            background-color:red;
            font-family:"微软雅黑";
        }



        </style>
    </head>
    <body>
        <div class="header">
            <div class="logo"><img src="http://climg.mukewang.com/590037f600016ce303000100.png" alt="logo"></div>
            <div class="navigation">
                <ul>
                    <li>课程</li>
                    <li>职业路径</li>
                    <li>实战</li>
                    <li>猿问</li>
                    <li>手记</li>
                </ul>
            </div>
            
        </div>
        <div class="container">
            <div class="middle">
                <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" alt="middle">
            </div>
            <div class="left">
                <h3>课程推荐</h3>
                <ul>
                    <li><span>职业路径</span><span>HTML5与CSS3实现动态网页</span></li>
                    <li><span>职业路径</span><span>零基础入门Android语法与界面</span></li>
                    <li><span>职业路径</span><span>IOS基础语法与常用控件</span></li>
                    <li><span>职业路径</span><span>PHP入门开发</span></li>
                    <li><span>职业路径</span><span>JAVA入门开发</span></li>
                </ul>
            </div>
            <div class="right">
                <h3>登录</h3>
                <input class="account  input" type="text" placeholder="请输入邮箱/手机号">
                <input class="password input" type="text" placeholder="6-16位密码，区分大小写，不能用空格">
                <input class="login input" type="button" value="登录">
            </div>
        </div>
        <div class="footer">
            <span>
                <span>网站首页</span>
                <span>企业合作</span>
                <span>人才招聘</span>
                <span>联系我们</span>
                <span>常见问题</span>
                <span>友情链接</span>
            </span>

        </div>
    </body>
</html>

圣杯布局编程练习案例

猜你喜欢