IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

亚马逊运营

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

固定定位与下面盒子margin重叠问题

1

1

定位

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header {
    position: fixed;
    height: 2.75rem;
    background-color: #5fc0cd;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

该问题已被官方收录

3个头部菜单栏宽度平均分布在一行

2

1

布局

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin:0;
}

ul li {
    flex:1 1 ;
    padding: .2rem 0;
    color: #999;
    white-space: nowrap;

}

.menuleft {
    display: inline-block;
    margin: 0 .4rem;
}

.menumid{
    padding-left: .5rem;
}

该问题已被官方收录

vscode studio中的ds.store文件

0

1

页面显示

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

设置了宽高的小盒子，在加入“首页”文字之后，原有的高度就塌陷了

1

1

浮动

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Title</title>
   <style>
       * {
                      margin: 0;
           padding: 0;
       }
       .foot{
                      position:fixed;
           bottom:0;
           width:100%;
           height:4rem;
           background-color:#fff;
           box-sizing:border-box;;
           padding:0.3rem;
           text-align:center;
       }
       .house,
       .write,
       .man {
                      display:inline-block;
           background-image: url("形状4.png");
           background-repeat:no-repeat;
       }
       .house,
       .man {
                      width:2rem;
           height:3rem;
           background-size:8rem;
       }
       .house {
                      background-position:left top;
       }
       .write {
                      width:4rem;
           height:3.5rem;
           background-size:7rem;
           background-position:4px bottom;
       }
       .man {
                      background-position:-50px top;
       }
       .house div {
                      display: inline-block;
           font-size:1rem;
       }
   </style>
</head>
<body>
<div "foot">
   <div "house">
       <div>首页</div>
   </div>
   <div "write">
   </div>
   <div "man">
   </div>
</div>
</body>
</html>

该问题已被官方收录

如何让滚动条只在中间主题部分，不让滚动条出现在页眉和页脚部分？

1

1

布局

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header {
    position: fixed;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 14rem;
    background-color: #f8fafb;
}

 <div style="height:14rem;"></div>

<div class="row main-body">

该问题已被官方收录

关于 justify-content: space-between;的使用

2

1

flex

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

header{
    background:$b5f; 
    @include flex;
    justify-content: space-between;
    align-items: center;
    height: 6rem;
}

该问题已被官方收录

雪碧图和文字放在同一个元素，文字换行显示

1

1

布局雪碧图

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情</title>
    <style pyte="txet/css">
html { 
    font-size:312.5%; 
} 
body { 
    margin:0 ;
    font-size: initial;  
}
header {
    position: sticky;
    top:0;
    height: .88rem;
    background-color: #5FC0CD;
    line-height: .88rem;
    text-align: center;
    word-spacing:-.16rem;
    z-index: 1;
}
.guzhu{
    width:1.44rem;
    height: .7rem;
    border-radius:.15rem;
    border: none;
    background-color:#55A8B3;
    outline: none; 
    font-size: .34rem;
    color:#FFFFFF;
}
.hugong{
    width:1.44rem;
    height: 0.7rem;
    border-radius: .15rem;
    border: none;
    background-color:#FFFFFF;
    font-size: .34rem;
    font-size: 0.34rem;
    outline: none; 
    color:#55A8B3;
}
.top-right{
    float: right;
    width: .42rem;
    height: .42rem;
    margin: .22rem .3rem 0 -.5rem;
    background:url(task7-css6.png) no-repeat 0 0;

}
.box{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    background-color:#FFFFFF;
}

/* 下拉框 */
.dropdown {
    flex: 1;
    position: relative;
    display: inline-block;
    border-top:0.01rem solid #e1e5e7;
    border-bottom: 0.01rem solid #e1e5e7;
    line-height:0.8rem;
    text-align: center;
    font-size:0.28rem;
    color:#999999;
}
.sjx{
    float: right;
    border-width: 0.1rem;
    border-style: solid;
    border-color: #AFBAC0 transparent transparent transparent;
    margin: 0.36rem 0.12rem 0 0;
}
ul,li{
    margin: 0;
    padding:0;
    list-style: none;
}

/* 下拉菜单 */
.dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* 下拉项点击颜色 */
li.li:hover{
    background-color: #5FC0CD;
}
.main-box{
    display: flex;
    align-items: center;
    height: 1.8rem;
    border-bottom: .001rem solid #E1E5E7;
    background: #FFFFFF;
}
.content-box{
    width: 100%;
    height: 1.2rem;
    border: .01rem solid red;
    line-height: 1.2rem;
}
.date{
    height: .3rem;
    padding-left: .4rem;
    margin: 0 0 0 .3rem;
    background: url(task7-css6.png) no-repeat 0 -.6rem;
    font-size:.24rem;
    /* 字符间距 */
    letter-spacing: .03rem;
    color: #999999;
}

    </style>
</head>
<body>
    <header>
        <button type="button" class="guzhu">找雇主</button>
        <button type="button" class="hugong">找护工</button>
        <a class="top-right" href="www.xxxxx.com"></a>  
    </header>
    <main>
        <div class="box">
            <div class="dropdown">
                <span>所在地
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li class="li">北京</li>
                    <li>上海</li>
                    <li>苏州</li>
                </ul>
            </div>
            <div class="dropdown">
                <span>食宿
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li>一日一餐</li>
                    <li>一日两餐</li>
                    <li>一日三餐</li>
                </ul>
            </div>
            <div class="dropdown">
                <span>病人情况
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li>能自理</li>
                    <li>不能自理</li>
                    <li>手术后</li>
                </ul>
            </div>
        </div>
        <ul>
            <li class="main-box">
                <ul class="content-box">
                    <li class="date">服务日期</li>

                </ul>
            </li>
        </ul>
    </main>

</body>
</html>

该问题已被官方收录

多个内联元素排成一行

0

1

布局

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<span>2015-7-5至2015-7-12</span>
<span>25元/小时</span>
<a herf= "#"><img src= "back.png" /></a>

该问题已被官方收录

css画的竖分隔符渐变色到手机变宽

0

1

盒模型

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  border-image: linear-gradient(#fff, #e2e6e7, #fff) 4;
    border-left: solid 0.06rem;

该问题已被官方收录

火狐浏览器下white-space:nowrap和浮动与谷歌浏览器表现不一致

1

1

兼容性

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        button {
            width: 300px;
            height: 300px;
            white-space: nowrap
        }
        .bo1 {
            background-color: red;
        }
        .box2 {
            width: 30px;
            height: 10px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <button>
        我希望右边的蓝色快在我的右上方
        <span class="box2"></span>
        </buton>
</body>

</html>

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1