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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

下拉框有效区域问题

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>

该问题已被官方收录

用记事本保存的代码，用浏览器打开后，怎么乱码了

3

3

文档类型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="style3.css">
  <title>魔镜介绍页</title>
</head>
<body>
  <div id="fanghui">
    <a href="xxx"><img width="50" height="50" src="img/返回.png" alt=""></a>
  </div>

该问题已被官方收录

html,body{height:100%}为什么还要设html的高度？

1

2

自适应

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>
    html,body{height:100%}
    .parentElement{
        position:relative;
        background-color:aqua;
        width:200px;
        height:50%; 
    }

 .childElement{
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     background-color:blueviolet;
        width:50%; 
        height: 25%;
        margin-left:25%;
 }
    </style>

</head>
<body>
    <div class="parentElement">
    <div class="childElement"></div>
    </div>
    
</body>
</html>

该问题已被官方收录

底下的自我介绍那一行，没有办法做到和设计图一样，上下两行，不知道是哪里出了问题

2

2

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="task5.css">
</head>

<body>
    <header class="return">
        <a class="arrow"></a>
        <span class="introductio">个人主页</span>
    </header>
    <div class="bg">
        <!-- 背景图片 -->
        <div class="portrait"></div>
        <div>
            <div>
                <span class="name">高素雅</span>
                <span class="age">51岁</span>
            </div>
            <div class="box1">
                <div class="shape"></div>
                <span class="address">北京.通州.果园</span>
            </div>
        </div>
    </div>
    <div class="box3">
        <div class="skill">
            <p>专业技能</p>
        </div>
       <div class="require">
            <div class="box4">
                <div class="pentagram1"></div>
                <span class="require1">住家</span>
            </div>
            <div class="box5">
                <div class="pentagram2"></div>
                <span class="require2">不含餐</span>
            </div>
        </div>
        <div class="menu">
            <span class="submenu">工作年限</span>
            <span class="submenu1">0~3年</span>
        </div>
        <div class="menu">
            <span class="submenu">工作时间</span>
            <span class="submenu1">全天</span>
        </div>
        <div class="menu">
            <span class="submenu">服务价格</span>
            <span class="submenu2">25元/小时</span>
        </div>
        <div class="introduction">
            <span class="submenu">自我介绍</span>
            <div>
                <span class="introduction2">可以洗衣、做饭、照顾老人。在护
                    工方面有5年的经验，经验丰富。</span>
            </div>
        </div>
    </div>
    <footer>
        <button class="leaveword">留言</button>
        <button class="phone">联系方式</button>
    </footer>        
</body>

</html>
html{
    font-size: 62.5%
}
body{
    margin: 0;
    font-size: 1.6rem;
}
header{
    height:4.4rem;
    background-color: #5FC0CD;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
}
/*.return{*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*border-top: 1px solid white;*/
    /*border-right: 1px solid white;*/
    /*transform:rotate(45deg);*/
/*}*/
.arrow{
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-top: 3px solid white;
    border-left: 3px solid white;
    transform:rotate(-45deg);
    display: inline-block;
    margin-left: 3.5rem;
    margin-top: 1.2rem;
    float: left;
}
.introductio{
    color: white;
    text-align: center;
    line-height: 4rem;
}
.bg{
    background: url(./doctor.png) no-repeat;
    height: 16.3rem;
    background-size: cover;
    display: flex;
    align-items: center;
    margin-top: 4rem;
}
.portrait{
    background: url(./head\ portrait.png) no-repeat;
    height: 8.45rem;
    width: 8.45rem;
    background-size: cover;
    margin-left: 1.5rem;
}
.name{
    color: white;
    margin-left: 2rem;
}
.age{
    color: white;
    margin-left: 1.5rem;
}
.shape{
    background: url(./Shape\ 4.png) no-repeat;
    width: .9rem;
    height: 1.15rem; 
    align-items: center;
    background-size: cover;
    display:inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
}
.address{
    color: white;
    font-size: .24rem;
}
.box3{
    height: 41.65rem;
}
.skill{
    height: 5rem;
    border: 1px solid  #E1E5E7;
}
p{
    border-left:4px solid #5FC0CD;
    display: inline-block;
    line-height: 2rem;
    margin-left: 2rem;
    padding-left: 1rem;
}
.require{
    border-bottom: .5px solid #E1E5E7;
    margin-left: 1.65rem;
    line-height: 5rem;
    height: 5rem;
    font-size: 1.8rem;
}
.box4{
    display: inline-block;
    padding-left: 1rem;
    border-right:1px solid #E1E5E7;
    line-height: 2rem;
    padding-right: 1rem;
}
.pentagram1{
    background: url(./pentagram1.png) no-repeat;
    display: inline-block;
    width: 1.1rem;
    height: 1.2rem;
    background-size: contain;
    margin-left: 3rem;
}
.box5{
    display: inline-block;
}
.pentagram2{
    display: inline-block;
    background: url(./pentagram2.png) no-repeat;
    width: 1.1rem;
    height: 1.2rem;
    background-size: contain;
}
.menu{
    border-bottom:1px solid #EFF0F4;
    height: 5rem;
    line-height: 5rem;
    margin-left: 1.65rem;
}
.submenu{
    margin-left: 3.4rem;
    border-right: 1px solid #E1E5E7;
    padding-right: 1rem;
}
.submenu1{
    margin-left: 1.35rem;
}
.submenu2{
    margin-left: 1.35rem;
    color:  #E26163;
}
.introduction{
    border-bottom:1px solid #EFF0F4;
    height: 5rem;
    display: flex;
    margin-left: 1.65rem;
    align-items: center;
}
.introduction2{
    font-size: 1.4rem;
    width: 40rem;
    padding-left: 2rem;
}
footer{
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: white;
}
.leaveword{
    width: 40%;
    height: 4.4rem;
    background-color: white;
    border: 1px solid #5FC0CD;
    color: #5FC0CD;
    font-size: 100%;
    border-radius: 5px;
    margin: auto;
}
.phone{
    width: 40%;
    height: 4.4rem;
    background-color: #5FC0CD;
    border: 1px solid #5FC0CD;
    color: white;
    font-size: 100%;
    border-radius: 5px;
    margin: auto;
}

该问题已被官方收录

怎么用PS一键切图?

4

2

PhotoShop

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

我在做任务五的时候，用了背景图片的填充，可是发现了无法填充满

1

2

布局

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="task5.css">
</head>
<body>
    <header>
        <a class="return"></a>
        <a class="arrow"></a>
        <span>个人主页</span>
    </header>
    <div class="box2">
        <div class="doctor"></div>
        <div class="headportrait"></div>
        <span class="name">高素雅</span>
        <span class="age">51岁</span>
        <span class="site">北京.通州.果园</span>
    </div>
    <div class="box3">
        <div class="skill">
            <span>专业技能</span>
        </div>
        <div class="require">
            <span class="require1">住家</span>
            <span class="require2">不含餐</span>
        </div>
        <div class="experience">
            <span class="experience1">工作年限</span>
            <span class="experience2">0~3年</span>
        </div>
        <div class="time">
            <span class="time1">工作时间</span>
            <span class="time2">全天</span>
        </div>
        <div class="price">
            <span class="price1">服务价格</span>
            <span class="price2">25元/小时</span>
        </div>
        <div class="introduce">
            <span class="introduce1">自我介绍</span>
            <span class="introduce2">可以洗衣、做饭、照顾老人。在护
                工方面有5年的经验，经验丰富。</span>
        </div>
        <div class="connection">
            <a class="leave word">留言</a>
            <a class="phone">电话联系</a>
        </div>
    </div>
</body>
</html>
html{
    font-size: 62.5%;
}
body{
   margin: 0; 
}
header{
    height:4.4rem;
    background-color: #5FC0CD;
    text-align: center;
}
/*.return{*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*border-top: 1px solid white;*/
    /*border-right: 1px solid white;*/
    /*transform:rotate(45deg);*/
/*}*/
.arrow{
    width: 1.5rem;
    height: 1.5rem;
    border-top: 3px solid white;
    border-left: 3px solid white;
    transform:rotate(-45deg);
    display: inline-block;
    margin-left: 3.5rem;
    margin-top: 1.2rem;
    float: left;
}
header span{
    font-size: 3rem;
    color: white;
}
.box2{
 background: url(./doctor.png) no-repeat;
 height: 32.6rem;
 background-size: 100%
}

该问题已被官方收录

css:hover状态改变另一个元素样式的使用

4

2

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 .register{
            display: inline-block;
            text-align: center;
            line-height: 42px;
            width: 80px;
            background-color: #FFFFFF;
        }
        .entry{
            display: inline-block;
            /*!*position: relative;*!   这里的属性用于去掉右边框*/
            /*left: 4px;*/
            text-align: center;

            line-height: 42px;
            width: 40px;
            color: #FFFFFF;
            border-left: 1px solid #FFFFFF;
        }

该问题已被官方收录

如何实现在响应式过后的文件对齐

2

2

布局响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css
@gerrn:#29b078;
@fff:#fff;
@color:#fafafa;

.dfjsb{
  display:flex;
  justify-content:space-between;
  align-items:center;

}

a{
  text-decoration:none;
}

.yui{
  .dfjsb;
  padding:0 2rem;
}

.rty{
  .dfjsb
}

.dfjsa{
  display:flex;
  justify-content:space-around;
  align-items:center;
}

.dfffr{
  display:flex;
  flex-flow:column;
  align-items:center;
  padding-left:1.5em;
  justify-content:center;
}

.dfrr{
  display:flex;
  flex-direction:row-reverse;
  color:@fff;
}

.tac{
  text-align:center;
}

html{
  font-size:62.5%;
  overflow-x: hidden;
}

body{
  margin:0;
  padding:0;
  background:#fafafa;
}

.hdtp{
  .dfjsb;
  padding:0 2rem;
  .hdct{
    color:@gerrn;
  }
  .hdbm{
    .dfjsb;
    padding-right:2rem;
    width:15%;
  }
}

.hdmn{
  .dfrr;
  justify-content:space-between;
  padding:0 2rem;
  background:@gerrn;
  height:7.2rem;
  font-size:1.6vw;
  .hdmnq{
    display:flex;
    flex-flow:row-reverse;
    width:70%;
    padding-right:2rem;
  }
  .hdmnc{
    text-align:center;
    height:7rem;
    line-height:7rem;
    width:8%;
    &:hover{
      border-bottom:3px solid #fff;
    }
  }
}

@media screen and(max-width:1000px){
  .hdmn .hdmnc{
    width:25%;
  }
}

.mnftr{
  margin-top:1.3em;
}

.setting{
  height:3em;
  margin:0 4em 0 24px;
  font-size:1.6em;
  border-bottom:1px solid #ccc;
  a{
    color:green;
  }
}

.text{
  margin:0 64px 0 2em;
  height:2em;
  border-bottom:1px solid #ccc;
  a{
    color:#000;
    &:hover{
      background:green;
      color:#fff;
    }
  }
}


strong{
  display:block;
  height:3em;
  border-bottom:1px solid #ccc;
  margin:0 64px 0 24px;
  font-size:16px;
  text-align:center;
}

.tab{
  width:330px;
  margin-top:1em;
  border:1px solid #ccc;
  img{
    width:90px;
    height:90px;
    margin:1em;
  }
}

.tae{
  width:330px;
  border:1px solid #ccc;
  border-top:0;
  .w200{
    width:180px;
    height:2em;
    border-right:1px solid #ccc;
  }
  b{
    color:red;
  }
  img{
    width:10px;
    height:10px;
  }
}

.boa{
  border:1px solid #ccc;
  .w145{
    text-align:center;
    width:130px;
    border-right:1px solid #ccc;
  }
  .w199{
    width:187px;
    border-bottom:1px solid #ccc;
  }
}

.dsf{
  display:flex;
  justify-content:space-between;
  margin:0 2em;
}



.ttt{
  font-size:12px;
  width:330px;
  border:1px solid #ccc;
}

.footer-top{
  background:@gerrn;
  color:@fff;
}

.footer-center{
  padding-right:.5em;
  border-right:1px solid @fff;
}

.footer-bottom{
  padding-bottom:.3em;
  height:1.3rem;
  &:hover{
    border-bottom:2px solid @fff;;
  }
}

@media screen and (max-width:1000px){
  .yui{
    display:flex;
    flex-flow:column;
  }
}
@media screen and (max-width:1000px){
  .dsf{
    display:flex;
    flex-flow:column;
    width:100%;
  }
  .text{
    margin:0;
  }
  strong{
    margin:0;
    display: block;
    height: 3em;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    text-align: center;
  }

  .hdmn{
    padding:0;
  }
.setting{
  margin:0;
}
  .center{
    margin:0 auto;
  }

  .tab{
    width:90%;
  }

  .tae{
    width:90%;
  }

  .boa{
    width:90%;
  }

  .ttt{
    width:90%;
  }
}
.summary{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 310px;
  transition: ALL 3s ease-in-out;
}
.re{
   display:block;
  position:relative;
  top:0;
 }
.summary:hover{
  display:block;
  opacity: .8;
  background:black;
  color: white;
  transform: rotate(360deg);
  padding: 0 2rem;
  margin: 1rem 2rem 0 2px;
}

@media screen and (max-width:1000px){
  .summary{
    width:83%;
  }
}
@media screen and (max-width:600px){
  .summary{
    width:73%;
  }
}

该问题已被官方收录

九宫格只能竖着排列或横向排列

6

2

九宫格块级元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.swag{
  padding-left:31%;
  padding-bottom: 31%;
  margin:1%;
  border-radius: 20%;
  background: orange;
}

该问题已被官方收录

页面中的描述文字无法达到自适应的效果

1

2

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="self-introduce">
     <span class="self-1" >自我介绍</span>
     <span class=>丨</span>
     <span class="selfcontent">可以洗衣、做饭、照顾老人。
        在护工方面有五年经验，经验丰富.可以洗衣、做饭、照顾老人。在护工方面有五年经验，经验丰富</span>
    </div>

去第页

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