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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

对某一元素同时设置了 hover 和a 有时会出现两条下滑线有时只出现一条

1

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<a href="task8-2.html" ><div>合作企业</div></a>
<a href="task8-1.html"><div class="titlle1">首页</div></a>

该问题已被官方收录

用类名控制

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

··

该问题已被官方收录

文字中间的竖线在Chrome调试时显示在正常位置，手机端打开时竖线会向右偏移

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.intro1::before {
    content: '';
    position: relative;
    left: 1.35rem;
    padding-left: .02rem;
    padding-bottom: .01rem;
    background: #E1E5E7;
}

.line::before {
    content: '';
    position: relative;
    left: 1.87rem;
    padding-left: .02rem;
    padding-bottom: .01rem;
    background: #E1E5E7;}

该问题已被官方收录

背景图片为何引用失败

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

该问题已被官方收录

任务十的进度条如何实现，以及进度条点击时的效果

5

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

该问题已被官方收录

less.js 不能在 chrome 下运行

0

1

less

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>

该问题已被官方收录

github organizations push文件失败

0

1

git

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

为什么和vw没有兼容性？

0

1

css单位

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

用css怎么实现不用图片实现定制箱下拉框中一样的

2

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.pulldown{
	background: url(../img/dbx.png)no-repeat 97%;
	-webkit-appearance:none;
	background-color: #fff;
	border: 1px solid #E8E8E8;	
	line-height: 20px;
	padding-left: 6px;
	width: 110px;
	height: 38px;
	margin-top: 26px;
	margin-left: 68px;
}

该问题已被官方收录

label点击效果会一直存在

0

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

以下为less代码

.nav {
  position: relative;
  .max-width();
}
// 图标
.nav-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}


// 点击按钮
.menu-button {
  padding: 2rem 0;
  overflow: hidden;
}
.icon-menu {
  float: right;
  position: relative;
  width: 1rem;
  height: 1rem;
  padding: .5rem;
  margin-right: 1rem;
  border-radius: 5px;
  background-color: darken(@green,15%);
  &:hover {
    cursor: pointer;
    background-color: darken(@green,10%);
  }  
  &::before {
    content: '';
  position: absolute;
  top: .95rem;
  left: .5rem;
  width: 1rem;
  height: 2px;
  background-color: @white;
  }
  &::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 1rem;
    height: 1rem;
    border-top: 2px solid @white;
    border-bottom: 2px solid @white;
  }
}
// 导航栏
.menu-list {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: @green;
  text-align: center;  
  list-style: none;
  a {
    display: block;
    padding: 2rem ;
    color: @white;
    &:hover {
      background-color: lighten(@green, 10%);
    }
  }
}
.current {
  border-bottom: 5px solid @white;
}
/* 折叠导航栏点击效果 */
input,
.menu-list {
  display: none;
}
input:checked ~ .menu-list {
  display: block;
  position: absolute;
  z-index: @modal-z-index;
  border-top: 1px solid @white;
}
/* 水平导航栏 */
@media (min-width: 768px) {
  .menu-button {display: none;}
  .menu-list {
    display: block;
    max-width: 1024px;
    margin: 0 auto;
    text-align: right;
    font-size: 0;
    li {
      display: inline-block;
      &:hover {
        border-bottom: 5px solid @white;
      }
    }
    a {
      display: inline-block;   
      font-size: initial;   
    }
  }
}

去第页

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