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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

为什么我首页的右边黄色三角用absolute定位不准确

2

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.icon3 {
    background-image: url(sanjiao.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 5rem;
    width: 3rem;
    transform: scale(0.5);
    position: absolute;
    right: 5%;
    top: 53%;
}

该问题已被官方收录

如何只使用CSS来写一个侧边导航栏

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 user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task7-2.css">
</head>
<body>
<header>
    
</header>
</body>
</html>

该问题已被官方收录

能不能控制栅格的容量高度

3

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="row box7">
            <div class="col-xs-12 col-sm-6 col-md-3">
                
          <p>12</p>

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
 
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                
            </div>
        </div>

该问题已被官方收录

form表单里button自动刷新页面

2

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<form  class="all">
    <div class="center">
        <img src="../img/login-turnip.png" alt="" class="turnip">
        <div class="form-group">
              <img src="../img/login-person.png" alt="" class="person">
              <input type="text" class="name"  placeholder="请输入用户名">
        </div>
        <div class="form-group ">
             <img src="../img/login-lock.png" alt="" class="password">
             <input type="password" class="word"  placeholder="请输入密码">
        </div>
        <div class="error" id="error"></div>
        <button class="btn btn-default " id="entry" onClick="return false">登录</button>
    </div>

该问题已被官方收录

bootststrap、js、jq插件的问题

1

1

bootstrap

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

3个头部菜单栏宽度平均分布在一行

2

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin:0;
}

ul li {
    flex:1 1 ;
    padding: .2rem 0;
    color: #999;
    white-space: nowrap;

}

.menuleft {
    display: inline-block;
    margin: 0 .4rem;
}

.menumid{
    padding-left: .5rem;
}

该问题已被官方收录

对某一元素同时设置了 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>

该问题已被官方收录

怎么用sass方便的编译栅格布局

0

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$grid: ( xm:0px, sm :768px, md:992px, lg:1200px);
@mixin reactive($para, $list) {
    @each $e, $px in $grid {
        @media screen and (min-width: $px) {
            #{$para}:map-get($map:$list, $key: $e)
        }
    }
}

该问题已被官方收录

bootstrap轮播图，如何让图片铺满轮播框架

1

1

bottstrap 轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/background-pic.png" class="carousel-img" alt="第一张"/>
            </div>
            <div class="item">
                <img src="images/background-pic.png" class="carousel-img" alt="第二张"/>
            </div>
            <div class="item">
                <img src="images/background-pic.png" class="carousel-img" alt="第三张"/>
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"> </span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"> </span>
        </a>
    </div>

该问题已被官方收录

左右切换按钮点击切换图片

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="rotation-chart">
            <div class="images">
                <img src="../img/h.png" height="360px">
                <img src="../img/m.png" height="360px">
                <img src="../img/z.png" height="360px">
            </div>
            <a class="left" href="#"></a>
            <a class="right" href="#"></a>
            <ul class="indicators">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

.rotation-chart{
    position: relative;
    width: 100%;
    overflow: hidden;
    //轮播图片
    .images{
        width: 300vw;
        white-space: nowrap;
        animation: Naruto 10s linear infinite; //线性  重复循环
        img{
            margin-right: -.1rem;
            width: 100vw;
        }
    }
    @keyframes Naruto {
        0%    {transform: translate(0,0);}
        11.11%  {transform: translate(0,0);}
       22.22%  {transform: translate(-33.3%,0);}
       33.33%  {transform: translate(-33.3%,0);}
       44.44% {transform: translate(-66.6%,0);}
       55.55%  {transform: translate(-66.6%,0);}
       66.66% {transform: translate(-33.3%,0);}
       77.77% {transform: translate(-33.3%,0);}
       88.88% {transform: translate(0,0);}
       100% {transform: translate(0,0);}
    }
    //左切换
    .left{
        position: absolute;
        top: 50%;
        margin-top: -.2rem;
        left: 15%;
       @include w-h(.4rem,.4rem);
        border-top: .1rem solid $bg;
        border-left: .1rem solid $bg;
        transform: rotate(-45deg);
    }
    //右切换
    .right{
        position: absolute;
        top: 50%;
        margin-top: -.2rem;
        right: 15%;
       @include w-h(.4rem,.4rem);
        border-top: .1rem solid $bg;
        border-right: .1rem solid $bg;
        transform: rotate(45deg);
    }
    //指示符
    .indicators{
        position: absolute;
        bottom: 15%;
        left: 50%;
        margin-left: -.5rem;
        @include flex(space-between);
        @include w-h(1rem,.2rem);
        li{
            @include w-h(.16rem,.16rem);
            border-radius: 50%;
            border: .01rem solid $bg;
        }
    }
    
}

去第页

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