IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

该问题已被官方收录

gulp4.0任务会报错

0

1

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1

该问题已被官方收录

图片和文本没有对齐

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <header>
        <div class="left">
            <a href="../html/css7-home.html">
                <img src="../img/home.png" alt="">
            </a>
        </div>
        <div class="middle">
            <span>游戏结果</span>
        </div>

该问题已被官方收录

表格的单元格比例问题

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

table {
    width: 100%;
    table-layout: fixed;
    font-size: 12px;
    color: #969696;
}

该问题已被官方收录

关于Buton的一个疑问

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.btn-left,
.btn-right {
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
}
.btn-right {
    float: right;
    margin-right: 1rem;
}
.btn-left {
    float: left;
    margin-left: 1rem;
}

该问题已被官方收录

webpack打包出错

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var base = require('./base.js');
var open = base.open;
import './css/base.css';
    if(open ) {
        document.body.innerHTML = `<a href="siginup.html">注册</a>`
    }

该问题已被官方收录

导航栏四个按钮“首页、推荐。。。“当屏幕小于768px时折叠显示时顺序变了

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header>
        <!-- bootstrap折叠导航框架 -->
        <nav class="navbar navbar-default" style="background:#29b078; border-radius: 0;border-color: transparent;">
            <div class="container white-oval">
                <!--去除fluid以使得该行格式和首航一致， Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" style="color: white">技能树|修真院</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">关于</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-2.html" style="color: white">职业</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-3.html" style="color: white">推荐</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">首页</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <!-- bootstrap折叠导航框架 -->

    </header>

该问题已被官方收录

盒子页面在进行到进度条时，使用了另一个办法，使用盒子的边框做底，做圆形盒子打底。

0

1

盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：


html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/*header区域开始*/
/*顶部登录页面*/
/*顶部最大容器*/
.loginbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4rem;
    background-color: #1d7ad9;
    font-size: 1.6rem;
    color: #ffffff;
}

/*顶部最大容器结束*/
.loginbar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*文字框容器*/
.loginbar-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20%;
}

/*文字框容器*/

/*文字框设置*/
.loginbar-right-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 50%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}

/*结束*/

/*顶部文字框hover*/
.loginbar-right-right:hover {
    background-color: #ffffff;
    color: #000;
}

/*导航栏*/
.bnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.bnt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    width: 100%;
    height: 5rem;
}

.bnt-center {
    width: 9%;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    background-color: #ffffff;
    border-radius: 15%;
    font-size: 1.6rem;
}

.bnt-center:hover {
    background-color: #1d7ad9;
    color: #fff;
}

/*结束*/
/*进度条*/
.sidebar {
    width: 55%;
    border-top: 5px solid yellow;
    float: right;

}

.sidebar-top {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 0;
    left: 0;
}

.sidebar-center {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color:#ff7f02;
    position: absolute;
    
}

.sidebar-bottom {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 3rem;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task10</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/task10.css">
</head>
<body>
<header>
    <div class="loginbar">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 loginbar-left">
                    <div>客服热线：1234123412342</div>
                    <div class="loginbar-right">
                        <div class="loginbar-right-right">登录</div>
                        <div class="loginbar-right-right">注册</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bnt-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 bnt">
                    <div style="width: 50%;"></div>
                    <div class="bnt-center">首页</div>
                    <div class="bnt-center">在线定制</div>
                    <div class="bnt-center">标准箱</div>
                    <div class="bnt-center">品质保证</div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div style="width: 50%;"></div>
            <div class="sidebar"></div>
        </div>
    </div>
</div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-top">
                <div style="width: 40%;"></div>
                <div class="sidebar-center">1</div>
                <div class="sidebar-center">2</div>
                <div class="sidebar-center">3</div>
                <div class="sidebar-center">4</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-bottom">
                <div style="width: 40%;"></div>
                <div>1.定制纸箱</div>
                <div>2.上传附件</div>
                <div>3.选择数量</div>
                <div>4.确认下单</div>
            </div>
        </div>
    </div>
</header>
</body>
</html>

该问题已被官方收录

给背景图片大小不管用

0

1

css概念元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
				background: url("IMG/wolf.png") no-repeat;
				width:100%;
				height:100%;
			}

该问题已被官方收录

多个内联元素排成一行

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<span>2015-7-5至2015-7-12</span>
<span>25元/小时</span>
<a herf= "#"><img src= "back.png" /></a>

该问题已被官方收录

为什么和vw没有兼容性？

0

1

css单位

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本