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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

如何使空间不足导致文字隐藏时会出现小点

7

5

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

time {
  width: 3rem;
  height: .2rem;
  padding-left: .3rem;
  line-height: .2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: .1rem; }

该问题已被官方收录

小的竖线如何实现从中间到两边渐变

2

3

盒模型自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    border-image: linear-gradient(white,#999999,white)4;

 border-image:linear-gradient(to right, rgba(255,0,0,0),rgba(153,153,153,0.8),rgba(153,153,153,1),rgba(153,153,153,0.8),rgba(255,0,0,0))

该问题已被官方收录

下拉框有效区域问题

4

3

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <ul>
                    <li class="dropdown dropdown-menu-left text-center">
                        <a href="#" class="dropdown-toggle  text-center" data-toggle="dropdown">
                            所在地
                            <b class="caret btn-large triangle"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">北京</a></li>
                            <li><a href="#">上海</a></li>
                            <li><a href="#">广州</a></li>
                            <li><a href="#">福州</a></li>
                            <li><a href="#">厦门</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

该问题已被官方收录

select和option文字无法居中

2

2

表单元素居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.slect-box1 {
  margin-bottom: 0;
  border: 1px solid #e8e8e8;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 10px 0 10px 40px;
  background: #f3f3f3 url(../.././favicon.ico/task10/box.png) no-repeat 10px
    12px;
  color: #1d7ad9;
text-align:center;
}

该问题已被官方收录

所在地下拉菜单使用了bootstrap下拉菜单样式，点击时无法实现下拉？

2

2

bootstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="dropdown-line ">
    <div class="dropdown-1">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="true">
        所在地
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li>
          <a href="#">Action</a>
        </li>
        <li>
          <a href="#">Another action</a>
        </li>
        <li>
          <a href="#">Something else here</a>
        </li>
        <li role="separator" class="divider"></li>
        <li>
          <a href="#">Separated link</a>
        </li>
      </ul>
    </div>

该问题已被官方收录

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;

该问题已被官方收录

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

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>

该问题已被官方收录

子元素为行内元素不在父元素内

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>
    <link rel="stylesheet" type="text/css" href="task6.css">
</head>

<body>
    <header>
        <button class="btn">找雇主</button>
        <button class="btn">招护工</button>
    </header>
</body>

</html>

html{
    font-size: 625%; 
}
body{
    margin: 0;
    
}
header{
    position: fixed;
    top: 0;
    text-align: center;
    height: .64rem;
    width: 100%;
    background-color: #5fc0cd;   
}
.btn{
    font-size: 16px;
    color: #ffffff;
    background-color: #55a8b3;
    border-radius: 7px;  
    padding: .1rem .2rem .1rem .13rem;  
    border: none;
    outline:none
}

去第页

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