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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

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

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%;
  }
}

该问题已被官方收录

gulp4打包出现问题，

0

2

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/combined-98d825ae5e.css">
   
    <script src="scripts/combined-ddab469f1a.js"></script>

该问题已被官方收录

所在地下拉菜单使用了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>

该问题已被官方收录

有没有更方便的轮播图实现方案？

1

2

轮播

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

下面那2行字不知道为什么垒起来了

2

2

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
    margin: 0;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #5fc0cd;
    height: 40px;
    font-size: 15px;
    color: white;
}

.head {
    width: 12px;
    padding-left: 10px;
}

.head1 {
    color: #5fc0cd;
}

.picture {
    display: flex;
    align-items: center;
    background: url(1.png);
    background-size: 100%;
    height: 145px;

}

.picture1 {}

.box1 {
    margin: 0 0 0 20px;
}

.fei {
    margin: 0 0 0 20px;
    width: 70px;
    height: 70px;
}
.zi {
    padding:0 0 10px 0 ;
    font-size: 14px;
    color: white;
}
.box {
    width: 11px;
    height: 11px;
    margin: 0 5px 0 0;
}
.font {
    font-size: 12px;
    color: white;
}
.Icolor{
    font-size:14px ; 
    color: #5fc0cd;
    margin:0 0 0 10px ;
}
.colour1{
    background-color:#ffffff;
}
.wire1{
    border-bottom: 1px solid #e1e5e7 ;
    height: 50px;
    display:flex;
    align-items:center;
}
.wire2{
    margin:0 0 0 15px ;
    font-size: 15px;
}
.wire3{
    border-bottom: 1px solid #e1e5e7 ;
    height: 50px;
    display:flex;
    align-items:center;
    margin: 0 0 0 18px;
}
.little{
    width:12px ;
    margin:0 12px 0 10px ;
}
.colour{
    font-size:14px ;
    color:#e1e5e7;
    margin: 0 0 0 12px;
}
.font1{
    margin:0 0 0 12px ;
    color:#e1e5e7;
    font-size:15px ; 
}
.colour2{
    font-size:14px ;
    color:#e1e5e7;
    margin: 0 12px 0 12px;
}
.font3{
   font-size: 10px;
}

<!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" href="four.css">
</head>
<body>
    <header class="header">
        <img class="head" src="5.png" >
        <div>个人主页</div>
        <div class="head1">></div>
    </header>
    <div class="picture">
    <div class="picture1">
    <img class="fei" src="01.png">
    </div>
    <div class="box1" > 
    <div class="zi">徐士林 55岁</div>
    <div class="font">
    <img class="box" src="2.png" > 
    <a>京城·四方·报纸林</a>
</div>
    </div class="">
    </div>
    <div></div>
    <div class="wire1">
      <a class="Icolor">|</a>  <a class="wire2">专业技能</a>
    </div>
    <div class="wire3">
     <img class="little" src="4 -4.png" >
     <div>住家</div>
     <div class="colour">|</div>
     <img class="little" src="4 -4.png" >
     <div>不含早餐</div>
    </div>
    <div class="wire3">
        <div class="font1">从业年限</div>
       <div class="colour2">|</div>
       <div >0~3年</div>
    </div>
    <div class="wire3">
        <div class="font1">工作时间</div>
        <div class="colour2">|</div>
        <div class="font3">全天</div>
    </div>
    <div class="wire3">
        <div class="font1">服务价格</div>
        <div class="colour2">|</div>
        <div class="font3" style= "color:red">25小时</div>
    </div>
    <div class="wire3">
        <div class="font1">自我介绍</div>
        <div class="colour2">|</div>
        <div class="font3">可以洗衣、做饭、照顾老人。在护工方面有5的年经验，经验丰富。
        </div>
    </div>
</div>
</body>
</html>

轮播图的最后一张图切换到第一张图

0

2

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

annimation

页面不能拉倒底？在宽屏下没有这个问题。

2

2

flex

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

https://github.com/bradmatt213/learngit/blob/master/task13-1.html
https://github.com/bradmatt213/learngit/blob/master/css/task13-2.css

flex布局后文字会自动换行

1

2

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="whole">


<!-- 从业盒子第一行 -->
<div class="year">
<span>从业年限</span>
<i>0-3年</i>
</div>


<!-- 工作时间第二行 -->
<div class="worktime">
<span>工作时间</span>
<i>全天</i>
</div>


<!-- 服务价格第三行 -->
<div class="service">
<span>服务价格</span>
<a>25元/小时</a>
</div>



<!-- 自我介绍第四行 -->
<div class="my">
<span>自我介绍</span>
<i>可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富</i>
</div>

除了用bootstrap外有些什么方法做出这种下拉栏

2

2

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

。。。。

margin： auto为什么只能水平居中，不能垂直居中

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>
        .div {
            margin: auto;
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

去第页

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