CSS课堂交流区问题汇总_html/css_WEB-ITnose
问题一：如何实现浏览器兼容版的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种：
div {display:inline-block;*display:inline; *zoom:1;...}登录后复制
，如果先定义了 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>登录后复制
演示结果：
解答版本二：
横向两列布局：左列固定，右列自适应
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; }登录后复制
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; }登录后复制
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; }登录后复制
.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
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？
Mar 12, 2025 pm 04:05 PM
本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
