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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

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

该问题已被官方收录

截图中这个圆角框怎么实现？

1

1

盒模型边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

header {
height:50px;
}
footer {
height:50px;
}
div {
height: calc(100% - 100px);
}

该问题已被官方收录

Spring 报错：Error creating bean with name

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

package com.keymen.dao;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import com.keymen.annotation.MyBatisDAO;
import com.keymen.entity.User;

@MyBatisDAO
public interface UserDao {

    @Autowired
    User selectByPrimaryKey(Integer id);
    @Autowired
    List<User> queryAllUser();
    @Autowired
    public User findUserByUsername(String username);
    @Autowired(required=true)
    public Integer getCountOfRecord();

}

该问题已被官方收录

轮播图如何用css完美实现

1

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html部分
<!--轮播图-->
        <div class="loop-wrap">
            <div class="loop-images-container">
                <img src="./img14/cover3.png" alt="" class="loop-image">
                <img src="./img14/cover3.png" alt="" class="loop-image">
                <img src="./img14/cover3.png" alt="" class="loop-image">

            </div>
            <div class="focus-container">
                <ul class="focus-box">
                    <li>
                        <div class="focus-item focus-item1"></div>
                    </li>
                    <li>
                        <div class="focus-item focus-item2"></div>
                    </li>
                    <li>
                        <div class="focus-item focus-item3"></div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

        </div>
css部分
.loop-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.loop-wrap .loop-images-container {
  width: 300vw;
  /* 横向排列 3张图片 宽度应为主容器3倍 */
  font-size: 0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  /* 初始位置位移 */
  -webkit-animation: loop 10s linear infinite;
          animation: loop 10s linear infinite;
}

.loop-wrap .loop-images-container .loop-image {
  width: 100vw;
}

.loop-wrap .focus-container {
  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;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
}

.loop-wrap .focus-container li {
  float: left;
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  margin: 0 .05rem;
  border: 1px solid #fff;
}

@-webkit-keyframes loop {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 停留1500ms */
  35% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  /* 切换500ms 位移-20% */
  60% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  65% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  95% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 复位到第一张图片 */
}

@keyframes loop {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 停留1500ms */
  35% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  /* 切换500ms 位移-20% */
  60% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  65% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  95% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 复位到第一张图片 */
}

该问题已被官方收录

子绝父相为什么子元素会占满父元素

4

1

定宽定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
	<title>zijuefuxiang</title>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
		html {
			font-size: 625%;
		}
		body {
			background-color: gray;
		}
		
		.A {
			width: 50%;
			height: 2rem;
			background-color: orange;
			box-sizing: border-box;
			border: 1px solid #333;
			position: relative;
			margin-top: 1rem;
		}
		.B {
			background-color: blue;
			font-size: .32rem;
			color: white;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<div class="A">
		<div class="B">哈哈哈哈</div>
	</div>

</body>
</html>

该问题已被官方收录

表格的边框显示不出来

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@charset"UTF-8";
@import"_layout";
// job主体
main.job {
    .home-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        .black-font {
            font-size: .16rem;
            color: $black;
        }
        .green-font {
            font-size: .16rem;
            color: $green;
        }
    }
    .direction-box {
        padding: .23rem 0;
        border-bottom: $main-border;
        .direction {
            line-height: .14rem;
            font-size: .14rem;
            color: $text;
        }
        .option-box {
            margin: 0;
            padding: 0;
            .option {
                line-height: .14rem;
                font-size: .14rem;
                color: $black;
                &:hover {
                    background: $green;
                    color: $white;
                }
            }
        }
    }
    @media(max-width:575px) {
        .center {
            line-height: .6rem;
            text-align: center;
        }
    }
    .headline-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        font-size: .16rem;
        color: $black;
    }
    .intro-box {
        position: relative;
        margin-top: .47rem;
        perspective: 1000;
        transform-style: preserve-3d;
        .shade {
            visibility: hidden;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 2.8rem .93rem 1.76rem .82rem;
            background: rgba(8, 1, 3, 0.6);
            font-size: .16rem;
            color: $white;
            transition: 0.6s;
            transform-style: preserve-3d;
        }
        &:hover .shade {
            visibility: visible;
            transform: rotateY(360deg);
        }
        th.width1 {
            width: 40%;
        }
        th.width2 {
            width: 10%;
        }
        th.width3 {
            width: 50%;
        }
        tr.box {
            border: $main-border;

            .picture {
                margin: .2rem .08rem .16rem .11rem;
            }
            @media(max-width:375px) {
                .picture {
                    @include box(1.85rem, 1.85rem);
                    margin: .2rem .08rem .16rem .3rem;
                }
            }
            @media(min-width:376px) and (max-width:470px) {
                .picture {
                    @include box(2.1rem, 2.1rem);
                    margin: .2rem .08rem .16rem .5rem;
                }
            }
            @media(min-width:490px) and (max-width:767px) {
                .picture {
                    margin: .2rem .08rem .16rem .6rem;
                }
            }
            strong.font {
                font-size: .16rem;
                color: $black;
            }
            p.font {
                margin: .16rem .09rem 0 0;
                font-size: .14rem;
                color: $black;
            }
        }
        .standard-font{
            padding: .28rem  .1rem;
            font-size: .12rem;
            color: $text;
            border: $main-border;

            .wjx::after{
                display: inline-block;
                content:"";
                @include box(.16rem,.16rem);
                margin-left:.24rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .wjx2::before{
                display: inline-block;
                position: absolute;
                content:"";
                @include box(.16rem,.16rem);
                margin: .12rem 0 0 1.48rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .red{
                font-size: .12rem;
                color: #F01400;
            }
            .black{
                font-size: .12rem;
                color: $black;
            }
            .center{
                display:block;
                text-align: center;
            }
            .left{
                margin-left: .24rem;
            }
            .right-txet{
                float: right;
            }
        }
    }
    @media (min-width:767px) and (max-width: 991px){
        .col-sm-6 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    @media(max-width:767px){
        .col-12{
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
}

该问题已被官方收录

如何不适用bootstrap用纯css写一个轮播图

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div id="picture" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicator">
        <li data-target="#picture" data-slide-to="0" class="active"></li>
        <li data-target="#picture" data-slide-to="1" class></li>
        <li data-target="#picture" data-slide-to="3" class></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/pic1.jpg ">
        </div>
        <div class="item">
            <img src="images/pic2.jpg ">
        </div>
        <div class="item">
            <img src="images/pic3.jpg ">
        </div>
    </div>
    <a class="left carousel-control" href="#picture" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true "></span>
    </a>
    <a class="right carousel-control" href="#picture" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>
</div>

该问题已被官方收录

css的选择器概念很模糊，不理解

2

1

css概念

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.swap{}

该问题已被官方收录

bootstrap如何引用cdn

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

这里需要下载吗，下载了都是些什么东西

该问题已被官方收录

子元素为行内元素不在父元素内

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.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任务六</title>
    <link rel="stylesheet" type="text/css" href="task6.css">
</head>

<body>
    <header>
        <button class="btn">找雇主</button>
        <button class="btn">招护工</button>
    </header>
</body>

</html>

html{
    font-size: 625%; 
}
body{
    margin: 0;
    
}
header{
    position: fixed;
    top: 0;
    text-align: center;
    height: .64rem;
    width: 100%;
    background-color: #5fc0cd;   
}
.btn{
    font-size: 16px;
    color: #ffffff;
    background-color: #55a8b3;
    border-radius: 7px;  
    padding: .1rem .2rem .1rem .13rem;  
    border: none;
    outline:none
}

去第页

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