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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

关于github 和SVN

0

4

代码管理 git

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

流程图里如何hover两个元素？

2

3

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html部分：

<div class="container">
    <div class="row flowchart">
        
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
        
        <div class="col-xs-3 col-md-1 section section-1 ">

                <div class="line">1</div>    
                <div class="menu">1.选择箱型</div>

        </div>
        <div class="col-xs-3 col-md-1  section section-2">

                <div class="line">2</div>    
                <div class="menu">2.选择箱型</div>

        </div>
        <div class=" col-xs-3 col-md-1 section section-3">

                <div class="line">3</div>    
                <div class="menu">3.选择箱型</div>

        </div>
        <div class="col-xs-3 col-md-1 section section-4"> 

                <div class="line">4</div>    
            <div class="menu">4.选择箱型</div>
            
        </div>
    </div>
</div>


css部分：
.section{
    float: left;
}

.line{
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #dedede;
    position: relative;
    margin:30px 0;
    color: white;
    line-height: 10px;
    text-align: center;
    

}
.line::before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 50%;
    border-radius: 100%;
    background: #dedede;
    text-align: center;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-15px, -15px);
    z-index: -1;
}

.section{
    padding: 0;
}

.section-1 .line{
    background: pink;
}
.section-1 .line::before{
    background: pink;
}

/* 流程图 */

该问题已被官方收录

如何保证一段文字在盒子中垂直居中，并且换行后还是垂直居中

7

3

css概念布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.intro {
	padding-top: .2rem;
}

该问题已被官方收录

背景图片，在不同的分辨率下，显示不全。

2

3

css概念布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.background {
    background-image: url(images/background.jpg);
    background-size: cover;
    position: relative;
    height: 180px;
    color: #ffffff;
}

该问题已被官方收录

小的竖线如何实现从中间到两边渐变

2

3

自适应盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    border-image: linear-gradient(white,#999999,white)4;

 border-image:linear-gradient(to right, rgba(255,0,0,0),rgba(153,153,153,0.8),rgba(153,153,153,1),rgba(153,153,153,0.8),rgba(255,0,0,0))

该问题已被官方收录

为什么这个不能居中，而且css中用了 text-align: center

6

3

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

http://localhost:63342/task/html/task4.html?_ijt=3om3k0addkpda7pflumjsts7hj

该问题已被官方收录

在一个父元素的大盒子里放一个子元素小盒子，大盒子的左边边框丢了，这是什么情况？？

1

3

盒模型

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;minimum-scale=1.0; 
    maximum-scale=1.0; user-scalable=no;">
    <title>捉鬼游戏</title>
    <style pyte="txet/css">
    html{
        font-size:312.5%;
    }
    body{
        margin: 0;
        font-size:initial;
    }
    p,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* header眉页 */

    header{
        height:.9rem;
        background: #29BDE0;
    }
    .left-box{
        width: 1rem;
        border:none;
        background: #29BDE0;
        margin: .3rem 0 0 .22rem;
        outline:none;
        
    }
    .left{
        width:.34rem;
        margin: .08rem;
        border: .02rem solid #FFFFFF;
    }

    /* main主体 */
    .main-box{
        height: 1.16rem;
        margin: .27rem .36rem;
        border: solid .01rem #C9C9C9;
        background: #FFFFFF;
        line-height: 1.16rem;
        text-align:center;
        font-size: .35rem;
        color: #9A9A9A
    }
    .arrows::after{
        display: inline-block;
        float: right;
        content: "";
        width: .24rem;
        height:.24rem;
        margin: .42rem .2rem 0 0;
        border-top:.05rem solid #E7E7E7;
        border-right: .05rem solid #E7E7E7;
        transform: rotate(45deg);
    }

    /* footer尾页 */
    .footer-box{
       height:7.76rem;
       margin: 0 .35rem .62rem .35rem;
       border: solid .01rem #C9C9C9;
       background: #FFFFFF;
    }
    .top-box{
        height: .9rem;
        border-bottom: .01rem solid #FBB435;
        background: #FFFFFF;
    }
    </style>
</head>
<body>
    <header>
        <button class="left-box" type="button">
            <p class="left"></p>
            <p class="left"></p>
            <p class="left"></p>
        </button>
    </header>
    <main>
        <div class="main-box">
            <p class="arrows">上次游戏：捉鬼猜词版</p>
        </div>
    </main>
    <footer>
        <ul class="footer-box">
            <li class="top-box"></li>
        </ul>
    </footer>
</body>
</html>

该问题已被官方收录

九宫格不会跟着屏幕大小变化

3

3

九宫格自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.swag{
  width:200px;
  height: 200px;
  margin:1%;
  border-radius: 20%;
  background: orange;
  float:left;
}

该问题已被官方收录

input栏位宽度的自适应

2

3

表单元素布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html代码
<div class="password">
            <img src="img4/locked.png">
            <input type="password" name="password" placeholder="请输入密码" required class="pnb"/>
        </div>
css代码
.pnb{
    border-width:0;
    font-size: 0.32rem;
    outline: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.55rem;
    border: none;
    height: 1rem;
    width: 70%;    
}

该问题已被官方收录

在任务四的时候，在main下面的div标签，使用外边距会造成空白

1

3

属性

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

<body>
    <!-- ------------头部分开始-------------- -->
    <header>
        <span>关闭</span>
        <span style="font-size:18px; color:white;">登陆</span>
        <span>注册</span>
    </header>
    <!-- ----------头部分结束------------- -->
    <!-- ----------------中间部分开始------ -->
    <main>
        <div>
            <!-- 第一个雪碧图部分 -->
            <div class="phone"></div>
            <input placeholder="请输入手机号" type="text" maxlength="10">
        </div>
        <div>
            <!-- 第二个雪碧图部分 -->
            <div class="lock"></div>
            <input placeholder="请输入手机号" type="text" maxlength="10">
        </div>
        <button>
            <span>登  陆</span>
        </button>
        <a href="#">忘记密码？</a>
    </main>
</body>

</html>
body {
  font-size: 1.6rem;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 44px;
  background-color: #5FC0CD;
}

span {
  display: inline-block;
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 16px;
}

main {
  height: 57.6rem;
  background-color: #EFF0F4;
}

main div {
  height: 5rem;
  margin-top: 1rem;
  background-color: white;
}

main div + div {
  height: 5rem;
  margin-top: 1rem;
  background-color: white;
}

.phone {
  display: inline-block;
  width: 27px;
  height: 41px;
  margin-left: 2.1rem;
  margin-right: 2.3rem;
  background: url(./iphone.png);
  background-size: cover;
  zoom: .6;
  vertical-align: bottom;
}

.lock {
  display: inline-block;
  width: 27px;
  height: 41px;
  margin-left: 2.1rem;
  margin-right: 2.3rem;
  background: url(./locked2.png);
  background-size: cover;
  zoom: .6;
  vertical-align: bottom;
}

input {
  height: 22px;
  padding-left: 1.65rem;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  outline: none;
}

button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 5rem;
  margin-top: 3.45rem;
  border: 0;
  background-color: #5FC0CD;
  outline: none;
}

button span {
  font-size: 18px;
}

a {
  display: inline-block;
  margin-top: 8px;
  color: #5FC0CD;
  font-size: 18px;
  float: right;
  text-decoration: none;
}

去第页

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