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

首頁

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/imghwm/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

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。