CSS课堂交流区问题汇总_html/css_WEB-ITnose-html教學-PHP中文網

问题一：如何实现浏览器兼容版的inline-block显示

问题二：实现一个自适应布局

问题三：实现一个Tab

问题四：请按以下效果图和要求完成一个弹窗的HTML和CSS：

首頁

web前端

html教學

CSS课堂交流区问题汇总_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:18 AM

问题一：如何实现浏览器兼容版的inline-block显示

display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，请实现兼容ie6、ie7的通用的方式。

使用display:inline-block属性:可以使行内元素或块元素能够变成行内块元素，简单直白点讲就是不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！

如果是内联元素使用了inline-block，那所有的浏览器显示都是正常的。注：使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生效的，所以也就有了同其它浏览器一致的显示效果 , 而不能说IE6/7支持 display:inline-block！

如果是块级元素使用了inline-block，那在ie6和ie7中是有问题的。ie6/ie7中块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会像火狐等其他浏览器块元素呈递为内联对象。

实际有效的方法共有2种：

方法1：直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。兼容各浏览器的代码如下：

div {display:inline-block;*display:inline; *zoom:1;...}

登入後複製

方法2：先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 样式声明中才有效果，这是 IE 的一个经典 bug
，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout
不会消失）。代码如下（…为省略的其他属性内容）：

div {display:inline-block;...}div {*display:inline;}

登入後複製

问题二：实现一个自适应布局

已知HTML结构和效果图如下：

<div class="parent">     <div class="side">侧栏</div>    <div class="main">主栏</div></body>

登入後複製

要求如效果图中标注，两栏间距为10px，请写出这个两列布局的CSS。

相关重点文章： 横向两列布局（左列固定，右列自适应）的4中实现方式

解答版本一：

    <!DOCTYPE html>    <html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">        <title>Document</title>        <style type="text/css"> /*圣杯布局*/ .parent { color: #fff; font-size: 25px; text-align: center; padding-left: 210px; overflow: hidden; margin-bottom: 20px; } .main { background-color: blue; float: left; width: 100%; height: 100px; line-height: 100px; } .side { background-color: red; float: left; width: 200px; height: 100px; line-height: 100px; margin-left: -100%; position: relative; left: -210px; } /*双飞翼布局*/ .parent1 { color: #fff; font-size: 25px; text-align: center; overflow: hidden; margin-bottom: 20px; } .box { margin-left: 210px; } .main1 { background-color: blue; float: left; width: 100%; height: 100px; line-height: 100px; } .side1 { background-color: red; float: left; width: 200px; height: 100px; line-height: 100px; margin-left: -100%; } /*flex布局*/ .parent2 { color: #fff; font-size: 25px; text-align: center; display: -webkit-flex; display: flex; } .side2 { background-color: red; width: 200px; height: 100px; line-height: 100px; margin-right: 10px; } .main2 { background-color: blue; height: 100px; line-height: 100px; -webkit-flex: 1; flex: 1; } </style>    </head>     <body>        <!-- 圣杯布局 -->        <div class="parent">            <!-- 主栏是页面的主内容，需要优先加载html -->            <div class="main">主栏</div>            <div class="side">侧栏</div>        </div>        <!-- 双飞翼布局 -->        <div class="parent1">            <!-- 主栏是页面的主内容，需要优先加载html -->            <div class="box">                <div class="main1">主栏</div>            </div>            <div class="side1">侧栏</div>        </div>        <!-- flex布局 -->        <div class="parent2">            <div class="side2">侧栏</div>            <div class="main2">主栏</div>        </div>    </body>    </body>       </html>

登入後複製

演示结果：

解答版本二：

横向两列布局：左列固定，右列自适应

方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度

            body{ margin:0; padding:0; font-size:30px; font-weight:bold; }            .parent{ text-align:center; line-height:200px; }                .side{ position:absolute;left:0;top:0; width:200px; height:200px; background:red; }            .main{ margin-left:210px; background:blue; height:200px; }

登入後複製

方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）

    body{ margin:0; padding:0; font-size:30px; font-weight:bold; }        .parent{ text-align:center; line-height:200px; }        .side{ width:200px; height:200px; float:left; background:red; }        .main{ height:200px; margin-left:210px; background:blue; }

登入後複製

方法三：使用Flex布局

        body{ margin:0; padding:0; font-size:30px; font-weight:bold; }            .parent{ text-align:center; line-height:200px; display:flex; }             .side{ width:200px; height:200px; background:red; margin-right:10px; }            .main{ background:blue; height:200px; flex:1; }

登入後複製

方法四：利用BFC不与浮动元素重叠的特性

    .side2 { width: 200px; height: 100px; float: left; background: red; margin-right: 10px; }    .main2 { /* 创建BFC */ overflow: hidden; background: blue; height: 100px; }

登入後複製

关于BFC特性

问题三：实现一个Tab

请按以下效果图和图中标注完成HTML和CSS：

默认第一个Tab为选中状态。

解答：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style> *{margin: 0;padding: 0;} #parent{width:574px;height:200px;border: solid 1px #999;text-align: center;box-sizing: border-box;z-index:1;} .item{position: absolute;display: none;background: #ffffff;top:60px;left: 10px;} ul{width: 100%;display: flex;} ul li{height:40px;background: #f1f1f1;flex-grow: 1;border-bottom: 1px solid #cecece;border-right:1px solid #cecece;list-style: none;} ul li a{ text-decoration: none;color: black;font: 14px "微软雅黑";line-height: 40px;} li:hover{border-bottom: none;background:none;} li:hover div{display: block;} li:first-child div{display: block}; </style></head><body><div id="parent">    <ul>        <li><a href="#item1">课程内容</a><div class="item item1" id="item1">课程内容</div></li>        <li><a href="#item2">学习计划</a><div class="item item2" id="item2">学习计划</div></li>        <li><a href="#item3">技能图谱</a><div class="item item3" id="item3">技能图谱</div>        </li>    </ul></div></body></html>

登入後複製

问题四：请按以下效果图和要求完成一个弹窗的HTML和CSS：

总体：弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。标题栏：左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单行文字且超出隐藏并显示“...”，背景色为#eeeeee。内容区：由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，字体均为12px的宋体。段落：行高1.5倍。按钮：水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。关闭：宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“../x.png”

登入後複製

解答版本一：

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style> *{margin: 0;padding: 0;} .parent{width: 300px;border:1px solid #cccccc;border-radius: 5px;position:fixed;left:50%;top:50%;transform: translate(-150px,-75px);} .nav{font:14px/40px "微软雅黑";background:#eeeeee;padding:0 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .close{background: url(../x.png);position: absolute;cursor: pointer;height: 10px;width: 10px;top: 10px;right: 10px;} .content{background: white;font:12px/20px "宋体";} span{margin: 20px;} p{margin: 20px;line-height: 1.5;} .button{margin: 0 auto;width: 80px;height: 30px;background: blue;color: white;border-radius: 5px;margin-bottom: 20px;text-align: center;display: flex;align-items: center;justify-content: center;} </style>    </head>    <body>    <div class="parent">        <div class="nav">            <span>标题栏</span>            <div class="close"></div>        </div>        <div class="content">            <p>内容区段落</p>            <div class="button">确定</div>        </div>    </div>    </body>    </html>

登入後複製

解答版本二：

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>弹窗</title>        <style type="text/css"> *{ margin:0; padding:0; } html,body{ height: 1000px; } .pop{ box-sizing:border-box; width: 302px; border-radius: 5px; border: 1px solid #cccccc; position: fixed; z-index: 1; top: 50%; left: 50%; transform:translate(-50%,-50%); } .head{ width: 100%; height: 40px; font:14px "微软雅黑"; vertical-align: center; background-color: #eeeeee; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; position: relative; vertical-align: center; } .head p{ text-overflow:ellipsis; overflow: hidden; white-space: nowrap; margin:10px 20px; } .icon img{ width: 10px; height: 10px; } .icon{ position: absolute; top: 10px; right: 10px; cursor: pointer; width: 10px; height: 10px; } .body{ margin: 20px; background: #ffffff; font:12px "宋体"; text-align: center; } .body button{ margin:0 auto; border-radius: 5px; text-align: center; width: 80px; height: 30px; color: white; background: blue; } .body p{ margin: 0 auto 20px; line-height: 1.5; white-space: pre-wrap; width: 100%; } </style>    </head>    <body>        <div class="pop">            <div class="head">                <p>标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏</p>                <span class="icon">                    <img  src="/static/imghw/default1.png"  data-src="../x.png"  class="lazy" alt="CSS课堂交流区问题汇总_html/css_WEB-ITnose" >                </span>            </div>            <div class="body">                <p>内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落</p>                <button type="submit">确定</button>              </div>        </div>    </body>    </html>

登入後複製

解答版本三：

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css"> /* 只为看fixed效果 */ .body { height: 12000px; } /* 回退自身一半宽度和长度（估计值），使之位于中央 fixed定位。 只有左上和右上角需要圆角。 */ .theBox { position: fixed; top: 50%; left: 50%; /*margin-left: -151px; margin-top: -100px;*/ transform:translate(-50%,-50%); width: 300px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: solid 1px #cccccc; } /* 标题栏，用flex布局。justify-content控制元素均匀分散在两边，align-items控制元素垂直居中 文本的溢出控制，text-overflow overflow white-space搭配使用。 */ .titleBar { height: 40px; padding:0 20px; font-size: 14px; font-family: "Microsoft Yahei"; background-color: #eeeeee; text-overflow : ellipsis; overflow: hidden; white-space: nowrap; display: flex; justify-content:space-between; align-items : center; } /* cursor控制鼠标指针样式*/ .XBtn { border: 0px; background-image: url("../x.png"); height: 10px; width: 10px; cursor: pointer; } /* 内容区域 设置有关文本的一些属性。*/ .container { padding: 20px; font-size: 12px; font-family: "宋体"; } /* 子元素选择器。设置行高。*/ .container p { line-height: 1.5em; } /* 按钮属性，用属性选择器选中。*/ input[type = "button"] { display: block; margin: 20px auto 0; background-color: rgba(15, 89, 255, 0.85); color: white; width: 80px; height: 30px; text-align: center; border-radius: 5px; } </style>    </head>    <body>        <div class = "body">            <div class = "theBox">                 <div class = "titleBar">标题栏<button class = "XBtn"></button></div>            <div class = "container">                <p>内容区段落</p>                <input type = "button" value = "确定" />            </div>        </div>        </div>        </body>    </html>

登入後複製

解答版本四：

    <DOCTYPE html>    <html>    <head>    <meta charset="utf-8">    <title>弹窗</title>    <style type="text/css"> *{margin:0;padding:0;} .popup_window{ postion:fixed; width:300px; margin:25% auto 25%; border:1px solid #cccccc; border-radius:5px; } .title_bar{ display:inline-block; padding:0 20px 0; width:260px; height:40px; font:14px "微软雅黑"; background:#eeeeee; line-height:40px; } .close{ float:right; position:relative; background-image: url("../x.png"); width: 10px; height: 10px; top:-40px; right:10px; cursor: pointer; } .title_tip{ width:150px; line-height:40px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .content{ padding:20px; background:#FFF; } .content p{ font:12px/1.5 "宋体"; } .sumbit_button{ margin:20px auto 0; border-radius:5px; text-align:center; cursor: pointer; } </style>    </head>    <body>    <div class="popup_window">        <div class="title_bar">            <p class="title_tip">嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿</p>            <div class="close">                <span>X</span>                    </div>        </div>        <div class="content">            <p><strong>总体：</strong>弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），            圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。<br /><strong>标题栏：</strong>左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单            行文字且超出隐藏并显示“...”，背景色为#eeeeee。<br /><strong>内容区：</strong>由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，            字体均为12px的宋体。<br /><strong>段落：</strong>行高1.5倍。<br /><strong>按钮：</strong>水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。<br />            <strong>关闭：</strong>宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“../x.png”</p>            <div class="sumbit_button">                <input type="submit" name="button" id="button" value="确定"   style="max-width:90%"/>            </div>        </div>    </div>    </body>    </html>

登入後複製

相关重点文章：一个定位和居中问题的探讨

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn