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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

Compass Scss在Webstorm中的配置问题

0

1

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

mybatis中使用大于号或小于号报错

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

tee.F_EndDay <= dateadd(DAY,0,CONVERT (VARCHAR(100), GETDATE(), 23))

该问题已被官方收录

任务七雪碧图调好位置之后无法调节大小

2

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.k{
    background: url(../img/task7-2.11.png) no-repeat;
    background-size: 20vw 5vw;
    display: inline-block;

}
.k1{
    height: 5vw;
    width: 5vw;
    background-position: 0 0;
}
.k2{
    height: 5vw;
    width: 5vw;
    background-position: -5vw 0;
}
.k3{
    height: 5vw;
    width: 5vw;
    background-position: -10vw 0;
}
.k4{
    height: 5vw;
    width: 5vw;
    background-position: -15vw 0;
}

该问题已被官方收录

我在做CSS任务十四的时候发现如果在SASS的SCSS编译的时候路径出现了问题

0

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 顶部左边电话样式 */
.call {
    width: 150px;
    margin: auto;
    margin-left: 0;
    font-size: 7px;
    color: green;
}

/* 顶部盒子遍栅格布局样式 */
.box-left {
    line-height: 2rem;
}
/* 顶部栅格布局右边部分 */
.box-right {
    text-align: right;
}
/* 头部栅格布局右边雪碧图1设置 */
.WX {
    width: 25px;
    height: 24px;
    border: 0;
    background: url(../img/css_sprites.png) no-repeat 15.385% 84.375%;
    zoom: .7;
    outline: none !important;
}
/* 头部栅格布局右边雪碧图2设置 */
.QQ { 
    width: 25px;
    height: 24px;
    border: 0;
    margin-left: 9.5px;
    margin-right: 9.5px;
    background: url(../img/css_sprites.png) no-repeat 15.385% 15.625%;
    zoom: .7;
    outline: none !important;
}
/* 头部栅格布局右边雪碧图3设置 */
.WB {
    width: 25px;
    height: 24px;
    border: 0;
    background: url(../img/css_sprites.png) no-repeat 84.615% 15.625%;
    zoom: .7;
    outline: none !important;
}
@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}

@-ms-viewport {
  width: device-width;
}

body {
  margin: 0;
  font-size: 1.6rem;
  background-color: #fafafa;
  margin: 0;
  text-align: left;
}

p {
  padding: 0;
  margin: 0;
}

ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0;
  margin: 0;
}

ul li {
  list-style-type: none;
}

button {
  padding: 0;
  border: none;
  outline-style: none;
  outline: none;
  background: transparent;
}

a {
  text-decoration: none;
}

input {
  display: none;
}

table, th, td {
  border: 1px solid #999999;
}

table {
  border-collapse: collapse;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 顶部左边电话样式 */
.call {
  width: 150px;
  margin: auto;
  margin-left: 0;
  font-size: 7px;
  color: green;
}

/* 顶部盒子遍栅格布局样式 */
.box-left {
  line-height: 2rem;
}

/* 顶部栅格布局右边部分 */
.box-right {
  text-align: right;
}

/* 头部栅格布局右边雪碧图1设置 */
.WX {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprites.png) no-repeat 15.385% 84.375%;
  zoom: .7;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图2设置 */
.QQ {
  width: 25px;
  height: 24px;
  border: 0;
  margin-left: 9.5px;
  margin-right: 9.5px;
  background: url(../img/css_sprites.png) no-repeat 15.385% 15.625%;
  zoom: .7;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图3设置 */
.WB {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprites.png) no-repeat 84.615% 15.625%;
  zoom: .7;
  outline: none !important;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-1 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-2 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-3 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-4 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-5 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-6 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-8 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-9 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-10 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-11 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-1 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-2 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-3 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-4 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-5 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-6 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-7 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-8 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-9 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-10 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-11 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.bg-green {
  background-color: #1DB176;
}

.tdd {
  background-color: RGBA(29, 177, 118, 1);
}

.olm {
  padding-right: 0px;
}

.xiuzhenyuan {
  display: inline-block;
  width: 605px;
  height: 114px;
  background: url(./img/css_sprit00000es.png) no-repeat 12.048% 1.98%;
  zoom: .3;
}

.nbox {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.nav-link {
  height: 65px;
  padding: 20px 25px 20px 0px !important;
  color: white !important;
  margin-left: 25px;
  border-bottom-width: 5px;
  text-align: center;
}

.nav-link:hover {
  border-bottom: 3px solid white;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50% !important;
}

.navv {
  padding-bottom: 0px;
  padding-left: 0px;
}

.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.navbar-collapse {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}
/*# sourceMappingURL=task14.css.map */

该问题已被官方收录

用hover实现折叠菜单

0

1

hover

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>Document</title>

<style>
    /* nav */
ul,li{
    list-style: none;
}
.xiuzhenyuan{
    display: inline-block;
}    
.nav {
    position: relative;
    margin: 20px 0;
}
.menu{
    display: inline-block;
    position: absolute;
    right: 0px;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}
.nav a:hover {
    color: #000;
}

button div{
    width: 15px;
    height: 2px;
    background: gray;
    margin-bottom: 1px;

}
button{
    display: none;
}
.collapsed-menu{
        display: none;
    }


/* <!-- 媒体查询 --> */
@media screen and (max-width: 768px) {
    
    button{
        display: block;
        display: inline-block;
        position: absolute;
        right: 0;
    }

    button:hover.collapsed-menu{
        display: block;
    }

    .menu{
        display: none;
    }
    
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
} 

.collapsed-menu li{
    color: gray;
    padding: 5px 0;
}

.collapsed-menu{
    width: 100px;
    height: 150px;
    border: 1px solid #dedede;
    border-radius: 10px;
    position: absolute;
    right: 0;
}


</style>



</head>
<body>
    
<nav class="nav">
<div class="xiuzhenyuan">修真院|技能树</div>

<button>
    <div></div>
    <div></div>
    <div></div>
</button>

<ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">职业</a></li>
    <li><a href="#">推荐</a></li>
    <li><a href="#">关于</a></li>
</ul>
</nav>

<ul class="collapsed-menu">
    <li>首页</li>
    <li>职业</li>
    <li>推荐</li>
    <li>关于</li>
</ul>



</body>
</html>

该问题已被官方收录

在做css任务十的时候怎么实现进度条和它的触碰效果？

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 625%;
}

body {
    font-size: .18rem;
    color: #999999;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/*页眉*/

header {
    background: #1d7ad9;
    color: #ffffff;
    font-size: .14rem;
}

.header {
}

.header span {
    float: left;
    line-height: .40rem;
    white-space: nowrap;
}

.btn-right {
    float: right;
    border-left: 1px #ffffff solid;
}

.btn-right a {
    display: inline-block;
    height: .40rem;
    width: .60rem;
    color: #ffffff;
    text-align: center;
    line-height: .40rem;
}

.btn-right a:hover {width: 1rem; color: #000000; background: #ffffff; text-decoration: none;}

/*导航栏*/

nav {
    background: #f9f9f9;
}

.btn-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 1rem;
}

.btn-group button {
    margin-left: .60rem;
    padding: .15rem;
    border: 0;
    border-radius: .05rem;
    color: #000000;
    background: #ffffff;
    box-shadow:0 0 3px #999999; 
}

/*下拉菜单*/

ul {
    margin: 0rem;
    padding: 0;
    list-style-type: none;/*去除无序列表默认圆点*/
    display: none;
}

li {
    text-align: center;
    line-height: .40rem;
    border-top: 1px #ccc solid;
}

nav label, #hanbao-menu, ul {
    display: none;
}

input[type=checkbox]:checked ~ ul {display: block}


li:hover {background: #1d7ad9; color: #ffffff;}
.btn-group button:hover {background: #1d7ad9; color: #ffffff;}
.btn-group button:hover a {color: #ffffff;}

/*流程图*/

.step {
    display: flex;
    justify-content: flex-end;
    margin: .30rem 0;
}

.step-unit {
    display: inline-block;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .20rem;
}

.step .left,.step .right{
    display: inline-block;
    width: .60rem;
    height: .05rem;
    background: #ccc;
}

.step .center {
    display: inline-block;
    width: .24rem;
    height: .24rem;
    border-radius: .12rem;
    text-align: center;
    color: #ffffff;
    font-size: .16rem;
    background: #ccc;
}

.step-unit:hover .left{background: #ff7f02;}
.step-unit:hover .center{background: #ff7f02;}
.step-unit:hover .right{background: #ff7f02;}
.step-unit:hover span{color: #ff7f02;}

/*主体表单*/

h4 {
    display: inline-block;
    padding-left: .10rem;
    border-left: 3px #1d7ad9 solid;
    color: #000000;
}

.thumbnail {
    padding: 0;
}

.thead {
    padding: .10rem;
    color: #1d7ad9;
    background: #f3f3f3;
}

.box-type, .box-size {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #fbfcff;
    border-bottom: 1px #f3f3f3 solid
}


label {
    margin: .20rem .30rem .20rem 0;
    font-weight: normal;
}

label div {
    display: inline-block;
    position: relative;
    top: .03rem;
    width: .18rem; 
    height: .18rem;
    background: url(images/circle-before.png);
} 

.radio-mod {
    opacity: 0;
} 

input[type="radio"]:checked + div { background: url(images/circle-after.png); }

select {
    margin: .20rem;
    width: 1.3rem;
    height: .40rem;
    border: 1px #f3f3f3 solid;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(images/drop-down.png) no-repeat 95% center #ffffff;
}

.caliber {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.caliber>span {
    margin-right: .50rem;
}

.next {
    margin: 1.4rem 0 1rem 0;
    display: inline-block;
    padding: .10rem;
    border: none;
    border-radius: .05rem;
    width: 1.8rem;
    color: #ffffff;
    background: #e15053;
}

.btn-next {
    text-align: center;
}

.next:hover {background: #1d7ad9;}

@media screen and (max-width: 768px) {

    nav {
        text-align: right;
        border-bottom: 1px #ccc solid;

    }

    .btn-group {
        display: none;
    }

    ul {
        margin: 0 -.30rem;
    }

    nav label {
        display: inline-block;
    }

    .step {
        display: flex;
        justify-content: center;
    }

    .step-unit {
        width: 25%;
    }

    .icon {
        width: 100%;
    }

    .icon .left, .icon .right {
        width: 45%;
        height: .05rem;
    }

    .caliber {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box-size {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .caliber>span {
        margin: .10rem .25rem;
    }

    .next {
        margin: .50rem 0;
    }

}


aside {
    margin-top: .50rem;
    padding: .60rem 0;
    font-size: .14rem;
    background: #f9f9f9;
}

.aside-left {
    padding-left: .30rem;
    padding-bottom: .20rem;
}

.aside-center div {
    margin-bottom: .20rem;
}

.aside-center a {
    color: #999999;
}

.aside-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

aside img {
    height: .92rem;
}

.adress {
    width: 1.5rem;
}

.aside-center a:hover {color: #1d7ad9;}

/*页脚*/

footer {
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    padding: .12rem 0;
    background: #1d7ad9;
}

/*媒体查询*/

@media screen and (max-width: 992px) {

    aside {
    margin-top: .20rem;
    padding: .20rem 0;
    }   

    .aside-right {
        display: flex;
        justify-content: flex-start;
    }

    .aside-right img {
        position: absolute;
        left: .30rem;
    }

    .adress {
        position: relative;
        left: 1.2rem;
    }

}

该问题已被官方收录

任务六里左边的文字进行缩放后发现无法出现省略号

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

<body>
    <header>
        <div class="box">
            <!-- 菜单盒子 -->
            <button class="menu" onclick="location.href='6.html'">找雇主</button>
            <button class="submenu">找护工</button>
            <button class="icon"></button>
            <!-- 导航盒子 -->
        </div>
        <div class="box1">
            <!-- 下拉框外部盒子 -->
            <div class="ddb">
                <!-- drop-down-box的缩写 -->
                <div class="box2">
                    <!-- 第一个下拉框外部盒子 -->
                    <span class="site">所在地</span>
                    <div class="dropdown-content">
                        <!-- 下拉框 -->
                        <p class="ddb1">1</p>
                        <p class="ddb1">2</p>
                        <p class="ddb1">3</p>
                    </div>
                    <span class="triangle"></span>
                    <!-- 倒三角形 -->
                </div>
            </div>
            <div class="ddb">
                <!-- drop-down-box的缩写 -->
                <div class="box3">
                    <!-- 第二个下拉框选项盒子 -->
                    <span class="rad">食宿</span>
                    <!-- room and board缩写 -->
                    <div class="dropdown-content">
                        <!-- 下拉框 -->
                        <p class="ddb1">1</p>
                        <p class="ddb1">2</p>
                        <p class="ddb1">3</p>
                    </div>
                    <span class="triangle1"></span>
                </div>
            </div>
            <div class="ddb">
                <!-- drop-down-box的缩写 -->
                <div class="box4">
                    <!-- 第二个下拉框选项盒子 -->
                    <span class="cdt">病人情况</span>
                    <!-- condition的缩写 -->
                    <div class="dropdown-content">
                        <!-- 下拉框 -->
                        <p class="ddb1">1</p>
                        <p class="ddb1">2</p>
                        <p class="ddb1">3</p>
                    </div>
                    <span class="triangle2"></span>
                    <!-- 倒三角形 -->
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="menu-bar">
            <!-- 菜单选项1 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">25元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar">
            <!-- 菜单选项2 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">35元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar">
            <!-- 菜单选项3 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">45元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar">
            <!-- 菜单选项4 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">45元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar5">
            <!-- 菜单选项5 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">45元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
    </main>
    <footer>
        <div class="bottom-menu">
            <!-- 底部菜单栏 -->
            <span class="icon4"></span>
            <!-- 首页雪碧图 -->
            <button class="home-page">首页</button>
            <!-- 首页 -->
        </div>
        <div class="bottom-conten">
            <!-- 中心圆 -->
            <button class="icon5"></button>
            <!-- 中心的雪碧图 -->
        </div>
        <div class="right-option">
            <!-- 右边选项 -->
            <span class="icon6"></span>
            <!-- 右边的雪碧图 -->
            <button class="my">我的</button>
        </div>
    </footer>
</body>

</html>
html {
    font-size: 62.5%
}

body {
    font-size: 1.6rem;
    margin: 0;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
}

.box {
    height: 4.4rem;
    background-color: #5FC0CD;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu {
    margin-right: -5px;
    font-size: 1.7rem;
    width: 7.2rem;
    height: 3.5rem;
    color: white;
    background-color: #55A8B3;
    border: 1px solid #55A8B3;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.submenu {
    font-size: 1.7rem;
    width: 7.2rem;
    height: 3.5rem;
    color: #5FC0CD;
    background-color: white;
    border: 1px solid white;
    border-radius: .5rem;
    z-index: 1;
}

.icon {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    width: 2.1rem;
    height: 2.2rem;
    background-position: -10px -10px;
    zoom: 0.5;
    position: absolute;
    border: 0;
    top: 1.1rem;
    right: 1.5rem;
}

.box1 {
    display: flex;
    height: 4rem;
    border-bottom: 1px solid #E1E5E7;
    text-align: center;
    background: white;
}

.ddb {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100px;
}

.box2 {
    height: 4rem;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.site {
    color: #999999;
    font-size: 1.4rem;
    line-height: 4rem;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #AFBAC0;
    position: absolute;
    top: 1.8rem;
    right: 6.6px;
}

.ddb1 {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    display: block;
}

.dropdown-content {
    display: none;
    text-align: center;
    background-color: #5FC0CD;
    min-width: 1.2rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    top: 3.65rem;

}

.ddb1:hover {
    background: #AFBAC0;
}

.ddb:hover .dropdown-content {
    display: block;
}

.box3 {
    height: 4rem;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-grow: 1;
    text-align: center;
    border-left: 1px solid #E1E5E7;
    border-right: 1px solid #E1E5E7;
}

.rad {
    line-height: 4rem;
    color: #999999;
    font-size: 1.4rem;
    flex-grow: 1;
}

.triangle1 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #AFBAC0;
    position: absolute;
    top: 1.8rem;
    right: 7.4px;
}

.box4 {
    height: 4rem;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-flow: 1;
    border-left: 0;
    border-right: 0;

}

.cdt {
    color: #999999;
    font-size: 1.4rem;
    line-height: 4rem;
}

.triangle2 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #AFBAC0;
    position: absolute;
    top: 1.8rem;
    right: 3.7px;
}

main {
    margin-top: 93px;
    margin-bottom: 69px;
}

.menu-bar {
    height: 9rem;
    border-bottom: 1px solid #E1E5E7;
    position: relative;
    line-height: 2.4rem;
}

.menu-bar1 {
    display: inline-block;
}

.icon1 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -72px -74px;
    width: 2.2rem;
    height: 2.2rem;
    zoom: 0.5;
    position: absolute;
    top: 1.45rem;
    left: 1.5rem;
    display: inline-block;
}

.Sd {
    color: #5D5D5D;
    margin-left: 3.45rem;
    vertical-align: super;
    display: inline-block;
    margin-top: 1rem;
}
.menu-bar2{
   
}
p {
    margin: 0;
    padding: 0;
    margin-left: 3.4rem;
    font-size: 1.4rem;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.box5 {
    display: inline-block;
    margin-right: 1.6rem;
}

.price {
    font-size: 1.5rem;
    color: #E63B0E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}

.ra {
    display: inline-block;
    border-right: 3px solid;
    border-bottom: 3px solid;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    color: #5FC0CD;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.icon2 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -138px -10px;
    width: .85rem;
    height: 1.15rem;
    display: inline-block;
    top: 6.25rem;
    margin-left: 1.6rem;
    zoom: 0.5;
}

.location {
    color: #999999;
}

.option {
    height: 3.45rem;
    position: relative;
}

.icon3 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -72px -74px;
    width: 2.2rem;
    height: 2.2rem;
    zoom: 0.5;
    top: 1.65rem;
    left: 1.6rem;
    position: absolute;
}

.Sd2 {
    color: #5D5D5D;
    margin-left: 3.45rem;
    vertical-align: super;
    display: inline-block;
    margin-top: 1.2rem;
}

footer {
    height: 4.95rem;
    border-top: 1px solid #E1E5E7;
    background-color: #F8FAFB;
    display: flex;
    justify-content: space-around;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.icon4 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -72px -10px;
    width: 2.3rem;
    height: 2rem;
    display: block;
    zoom: .5;
    margin: auto;
    margin-top: .6rem;
}

.home-page {
    font-size: 10px;
    color: #5FC0CD;
    border: 0;
    background-color: #F8FAFB;
}

.bottom-conten {
    width: 4.7rem;
    height: 4.7rem;
    background-color: #5FC0CD;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.icon5 {
    background: url(./css_sprites.png) no-repeat;
    background-position: -72px -74px;
    width: 2rem;
    height: 2rem;
    zoom: .5;
    display: block;
    margin-top: 1.35rem;
    margin-left: 1.5rem;
    border: 0;
}

.icon6 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -10px -74px;
    width: 2.1rem;
    height: 2.1rem;
    display: block;
    zoom: .5;
    margin: auto;
    margin-top: .45rem;
}

.my {
    font-size: 10px;
    color: #999999;
    border: 0;
    background-color: #F8FAFB;
}

.menu-right {
    margin: 0 0 0 -5px;
}
.date{
    margin: 0;
    padding: 0;
    margin-left: 3.4rem;
    font-size: 1.4rem;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

该问题已被官方收录

背景图片为何引用失败

0

1

属性背景图片

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.login{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-image: url(\img\login\login-backimg.jpg);
    background-repeat: round;
  }

该问题已被官方收录

select下拉框的默认样式

0

1

下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <select>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

该问题已被官方收录

GitHub提交不了

0

1

管理工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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