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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

栅格系统分为12列,怎么分成5列?

5

4

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">  
  <div class="row">  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
  </div>

该问题已被官方收录

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

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))

该问题已被官方收录

流程图里如何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;
}

/* 流程图 */

该问题已被官方收录

在任务四的时候，在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;
}

该问题已被官方收录

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

该问题已被官方收录

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

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

该问题已被官方收录

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

7

3

布局 css概念

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

该问题已被官方收录

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

6

3

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

该问题已被官方收录

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

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

该问题已被官方收录

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

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>

去第页

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