后乐

CSS课堂交流区问题汇总

问题一：如何实现浏览器兼容版的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>

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

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

解答版本一：

    
    <html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Documenttitle>
        <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">
            
            <div class="main">主栏div>
            <div class="side">侧栏div>
        div>
        
        <div class="parent1">
            
            <div class="box">
                <div class="main1">主栏div>
            div>
            <div class="side1">侧栏div>
        div>
        
        <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为选中状态。

解答：


<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”

解答版本一：

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Documenttitle>
        <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>

解答版本二：

    
    <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="../x.png">
                span>
            div>
            <div class="body">
                <p>内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落p>
                <button type="submit">确定button>  
            div>
        div>
    body>
    html>

解答版本三：

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Documenttitle>
        <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>Xspan>        
            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="width:80px;height:30px;color:white;background:blue;"/>
            div>
        div>
    div>
    body>
    html>

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

我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动李蕾1229
为促进我校教师专业发展，发挥骨干教师的引领带头作用，11月6日下午，我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动。图片发自App会议由教师发展处李蕾主任主持，首先，由范校长宣读新老教师结对名单及双方承担职责。随后，两位新调入教师陈玉萍、莫正杰分别和他们的师傅鲍元美、刘召彬老师签订了师徒结对协议书。图片发自App图片发自App师徒拥抱、握手。有了师傅就有了目标有了方向，相信两位新教师在师
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
少了生活气息我爱大草莓
最近啊，总觉得自己日更的内容缺了点什么。我仔细地想，大概是少了些生活气息。这两三个月减少了许多与别人相处的时间，独自生活，偶尔只是出去买菜，总觉得生活好像变空了许多。买菜的时候会跟档口的阿姨聊一两句话，让自己感觉在真实地生活着。幸好我也不是一宅到底，偶尔周末也会约着跟好朋友见面，面对面交流跟隔着屏幕交流，效果还是不一样的，至少有更为真实的生活感。写作不仅需要有阅读量，有文笔，生活阅历也是非常重要的
高端密码学院笔记285 柚子_b4b4
高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
2023-10-22 奥雷里亚诺第n
昨天在B站看到关于猫喜欢挠人的视频，视频教导说猫挠人的话就抓住它的后脖颈然后用手打打挠人的那个爪子。视频本身没什么，但评论区却炸开了锅（真是符合挑食者厌食心理）。令我印象最深刻的一个甚至上升到了关于我是谁这种终极问题。它说，猫就是畜生，它挠人就打它别惯着它，反正我六道轮回成了人就应该保持人的高贵，谁都别想来打破。我顿时汗颜，但看到下面全是类似的言论只不过后面的理由各有不同，本来想骂人的心都凉了一半
《在战“疫”中成长致敬生活》观后感梅子刘的刀
（作者：周晨）今天上午，我看了“我是接班人”网络大课堂《在战役中成长致敬生活》。有很多人拿出自己攒下的钱，默默地捐给了武汉，有几千块钱的、有几万块钱的，也有十几万块钱的。连小朋友也把自己的压岁钱捐给了武汉。有名环卫工人把自己五年的积蓄全部捐给了武汉。有名外卖小哥为医护人员买鞋子送吃的。还有已经治愈出院的新型肺炎病人捐了400毫升的血浆。还有位叫大树的叔叔，虽然他没有钱，但是他地里有蔬菜，捐了几大卡
【Git】常见命令(仅笔记) 好想有猫猫 Git Linux学习笔记 git 笔记 elasticsearch linux c++
文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
提高教师信息素养，提高道德与法治课教学效益长白159宋彦红
提高教师信息素养，提高道德与法治课教学效益随着经济和社会的发展，信息技术已经运用到课堂教学中，为课堂教学展示了一个崭新的天地。的确，信息技术形象、生动、直观性强，能够将课本中的一些抽想的概念直接展示在学生面前，从而调动学生的眼、耳、脑，让他们兴奋起来，变被动学习为主动学习，充分发挥教师的教育引导作用，创造一个可以使学生积极参与的场景。在制作、使用信息技术的实践过程中，本文拟就教师提升信息素养的必要
不要偷走他人的声音天天_27d6
朱会利焦点讲师班五期洛阳坚持分享第634天《来访者才是主角》2018.08.02今天的中级班课堂上，老师再一次给我们强调了咨询目标的建立过程中，作为咨询师一定要明白，我们只是在协助来访者解决他自身的问题，所以一切以来访者为主，他想解决的问题才是咨询的目标。所以如果在谈话的过程中，出现了我们感觉不是我们想要的答案的时候，我们不是再极力去引导来访者按照我们的思路走，而是觉察自己的预设并且进行调整，谨言
简单了解 JVM 记得开心一点啊 jvm
目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
11月，你好自由自在的白云
图片发自App今天是11月的第一天阳光明媚，秋日静好。给大家分享一个情绪管理的方法。也许你学习过，也许你还不曾了解，都没有关系，现在，我们一起来温习一下。就像孔老先生说的：学而时习之，温故而知新。种下对的种子，才会结出好的果实。种下情绪良好的种子，就可以收获良好的心态。“你瞧这些白云聚了又散，散了又聚，人生离合，亦复如斯。”世事如此，情绪的变化如山型曲线，一会来了，一会去了。还有那天课堂中老师讲，
178 坚守自律花儿迎风飞扬
如果错过了太阳时你流了泪，那么你也要错过群星了。如果你错过了早上而懊悔，那么你也要错过一整天了。白俊庭老师说，如果没有外部环境的咄咄逼人和自己逼自己，我们一般都不会自己走出舒适区，就像那只温水里的青蛙。百炼成钢，就是要锻造，就是锤打，给自己压力才有动力。咄咄逼人的外部环境是他律，是外力，走出舒适区是觉醒，是顿悟；而自己逼自己，是自律，是意志，是恒心，是内驱力。女儿的中学生活开始，开学整整一个月，也
2020-8-19晨间日记：看过的电影盐大虾
今天是周三起床：6点半就寝：11点天气：晴心情：正常纪念日：周三任务清单今日完成的任务，最重要的三件事：1.整理写过的文档2.电影《电灯泡》3.这就是街舞第三季第五期改进：早睡早起习惯养成：早睡早起，看书周目标·完成进度两篇文章学习·信息·阅读电影艺术发展史相关教材健康·饮食·锻炼吃了挺多零食，还喝了果粒橙，还是得少吃，多锻炼，不然会慢慢死掉的。人际·家人·朋友淡定交流，不放在心上。工作·思考专心
骑昆明到北海—119 砚山县 61清风i
从十年前第一次长途骑行青海湖开始每年一次长途骑行看风景，尝各地美食，探访异域文化，记录途中美食美景美事，已逐渐形成习惯。每年春季详细规划好线路，夏季出行，2020年因为疫情迟迟不能确定线路和行程。总算到了暑期疫情逐渐消失，规划了50多天的云南昆明—广西北海计划。本次行程从云南昆明出发到广西北海市结束，五十一天骑行二千多公里线路昆明-官渡古镇-环滇池--澄江市一抚仙湖—路居镇--江川区--通海县—龙
逻辑思维的过程与力量解晓萱
之前我对逻辑思维的了解停留在，讲话时有逻辑，辩论时条理清晰。今天看了《开讲了》里面关于大学生质疑易中天老师的视频，听到易中天老师的回答，忽然对逻辑思维有了稍微深刻的理解。图片发自App逻辑学对我们太重要了，不仅仅是学习备考，更重要的是生活和事业及交流的选择及过程。偏激的起点和性格有关，更和逻辑思维水平有关。视频里，易中天老师评价北大学生逻辑时讲到：“他的逻辑环节是没问题的，但是逻辑起点错了，所以他
常见的 JVM 调优方法有哪些？爪哇天下 jvm
常见的JVM调优方法有哪些？可以具体到调整哪个参数，调成什么值？对年轻代的EdenSurvivor的比例进行配置-XX:SurvivorRatio=8：表示设置2个Survivor区：1个Eden区的大小比值为2:8，这意味着Survivor区占整个年轻代的1/5，这个参数默认为8如果经常性的SurvivorTo放不下YGC的剩余的对象时候，可以适当的调整比例常用的CMS收集器：设置回收阈值，需要
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀 kkai人工智能 chatgpt 人工智能学习媒体 ai
最近这段时间，AI热潮因ChatGPT的火爆再次掀起。如今，网上大部分内容都在调侃AI，但很少有人探讨如何正经使用ChatGPT做事情。作为一名靠搜索引擎和GitHub自学编程的开发者，第一次和ChatGPT深度交流后，我就确信：ChatGPT能够极大提高程序员学习新技术的效率。使用ChatGPT一个月后，我越发感受到它的颠覆性。因此，我想从工作和学习的角度，分享它的优势及我的一些使用技巧，而非娱
掌握正确的方法，全面打造更有利于长期学习的“超能大脑” 微微一勺
作为家长，都希望自己的孩子在上学的时候能够拥有优异的成绩，最好能成为班上的学霸，而后考上一所不错的大学。作为孩子，学霸也是非常让大家认可的，是同学们崇拜的偶像。所以，无论是家长还是老师，无论是同学还是亲戚，都想要自己喜欢的人或者自己看好的人成为班级里的学霸。都是寒窗苦读，为什么别人可以成为高考状元、学霸，而有些孩子努力了还是成绩平平呢？为什么课堂上学霸很少开小差？为什么学霸背东西过目不忘？为什么学
2023-4-6晨间日记百里清风柏年醉
今天是什么日子起床：7:00就寝：10:30天气：阳光明媚心情：沉闷，忧心忡忡纪念日：无任务清单昨日完成的任务，最重要的三件事：看咨询工程师的书锻炼身体记75个单词改进：自己做饭习惯养成：看纸质书籍不刷抖音每天日更周目标·完成进度学习·信息·阅读健康·饮食·锻炼人际·家人·朋友保持与朋友交流，多认识、结交新的朋友工作·思考怎么做好向上管理该学习什么新的技能怎么与同事更好相处，更好地开展工作最美好的
效率神器来了：AI工具手把手教你快速提升工作效能 kkai人工智能人工智能学习媒体 ai chatgpt
随着科技的进步，AI工具已经成为提升工作效率的关键手段。本文将介绍一些实用的AI工具和方法，帮助你自动化繁琐的重复性任务、优化数据管理、促进团队协作与沟通，并提升决策质量。背景：OOPAI-免费问答学习交流-GPT自动化重复性任务Zapier：Zapier可以自动化多个应用程序之间的工作流程。例如，它能自动将Gmail中的附件保存至GoogleDrive，或在你发布新文章时，自动分享至社交媒体平台
2021.11.18 星初呀
2021.11.18＃小狗钱钱金金先生和吉亚的对话，金先生说，我总感觉你和大多数小孩很不一样。吉雅说我思考的问题不一样。很惊讶于一个小孩这样的归纳能力。我们思考问题方式是怎样的?自从跟着小狗群练习，思考问题方式也在跟着转变，关注自己做到的，写成功日记，关注微小事情，思考问题消耗我们的注意力。注意力放在哪里，哪里就会开花结果。所以我们琢磨的东西会塑造我们的大脑，建立稳固的价值观。今天听了定投课堂一节
2024微信红包封面怎么领取免费的？（红包封面序列号获取方法）帮忙赚赏金
2024微信红包封面怎么领取免费的？（红包封面序列号获取方法）在中国，微信几乎成为了人们生活中不可或缺的一部分，而微信红包更是成为了人们表达祝福和送礼的一种形式。微信红包不仅方便快捷，还能够增添节日气氛和人与人之间的情感交流。然而，有时候我们想要定制一个特殊的微信红包封面，以更好地展现自己的个性和情感，但又担心定制费用过高。那么，如何才能免费获取2024微信红包封面的序列号呢？下面将为您详细介绍一
2022-5-23《儿童纪律教育》培训手捧鲜花_54e3
张子博春蕾八幼缺乏技能导致的问题，需要老师和家长教授儿童所需要的锻炼的技能。比如教授儿童如何处理情绪、与人相处以及有效的交流技巧。未满足的情感需要，如信任、尊重、爱与权利的需要，都应该让儿童充分得到满足时，才能解决问题。家庭互动与复杂的原因，需要教师建立以家庭为中心的实践，和家庭沟通，建立和谐的关系，为孩子的健康成长共同努力。
何为为人师表！雍罡
好长一段时间，跟几个同事交往的过程中发现，有的班级学生特别有礼貌，在校园还是校外，在课堂还是课外，在孩子们身上都表现出良好的文明礼貌，但是有些班级的学生却没大没小，以自我为中心，特意研究了一下这些班级的班主任，发现平时有礼貌的班主任带的班级学生都很有礼貌，没礼貌的孩子的班主任也是没大没小没礼貌。所以班主任自己的德行是很重要的。图片发自App作为老师，所有的工作都是为了落实“立德树人”的根本任务。顾
儿童沙盘游戏为什么治疗有效？静待花开_602f
图片发自App运华日记第197篇（2018.4.15）儿童沙盘游戏为什么治疗有效？首先是孩子们喜欢。其次它做为一种“语言”表现孩子们“问题”，通过沙具可以和孩子起到交流与沟通的作用。人最怕的被迫生活学习，那么在沙盘中，一切都由孩子们自由创造，发挥孩子们自己的主观能动性。他们可以任意摆放自己喜欢的沙具，呈现着他们的情绪与心理，表达着他们所遇到问题以及应付问题的方式。而治疗师为儿童提供一个助于他们通过
遍历dom 并且存储（将每一层的DOM元素存在数组中）换个号韩国红果果 JavaScript html
数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
Android+Jquery Mobile学习系列(9)-总结和代码分享白糖_ JQuery Mobile
目录导航经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
impala参考资料 dayutianfei impala
记录一些有用的Impala资料 1. 入门资料 >>官网翻译： http://my.oschina.net/weiqingbin/blog?catalog=423691 2. 实用进阶 >>代码&架构分析： Impala/Hive现状分析与前景展望：http
JAVA 静态变量与非静态变量初始化顺序之新解周凡杨 java 静态非静态顺序
今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
跳出iframe返回外层页面 g21121 iframe
在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
JAVA多线程监听JMS、MQ队列 510888780 java多线程
背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。对于上面提到的方法2使用一个监听器开启多线
第一个SpringMvc例子布衣凌宇 spring mvc
第一步：导入需要的包；第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
通过XSD验证XML antlove xml schema xsd validation SchemaFactory
1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
文本流与字符集百合不是茶 PrintWrite()的使用字符集名字别名获取
文本数据的输入输出; 输入;数据流,缓冲流输出;介绍向文本打印格式化的输出PrintWrite(); package 文本流; import java.io.FileNotFound
ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 java jvm jdb
用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
动态页面正文部分中文乱码排障一例 ronin47
公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。因为有做过系统调整，所以第一反应就是新上
java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
从100PV到1亿级PV网站架构演变 cfyme 网站架构
一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
[宇宙时代]宇宙时代的GIS是什么？ comsci Gis
我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的宇宙是一个高维时空
详解create database命令 czmmiao database
完整命令 CREATE DATABASE mynewdb USER SYS IDENTIFIED BY sys_password USER SYSTEM IDENTIFIED BY system_password LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
几句不中听却不得不认可的话 datageek
1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
原文地址：http://www.kafka0102.com/2010/08/281.html 因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
xcode6 Auto layout and size classes dcj3sjt126com ios
官方GUI https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html iOS中使用自动布局（一） http://www.cocoachina.com/ind
通过PreparedStatement批量执行sql语句【sql语句相同，值不同】梦见x光 sql 事务批量执行
比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) { String sql = "inseret into customer(id
程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear 二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
NGINX IXHONG nginx
pcre 编译安装 nginx conf/vhost/test.conf upstream admin { server 127.0.0.1:8080; } server { listen 80; &
设计模式--工厂模式 kerryg 设计模式
工厂方式模式分为三种： 1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。 2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。 3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd java spring bean xml
1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centos vim
有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？答案是肯定的，设置下缩进格式就可以了，非常简单：在用户的根目录下直接vi ~/.vimrc文件然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
netty大并发请求问题 tianzhihehe netty
多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod

CSS课堂交流区问题汇总

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

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

问题三：实现一个Tab

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

你可能感兴趣的:(CSS课堂交流区问题汇总)