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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

webstorm管理git，push到远程仓库时出现冲突怎么解决

0

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

css有没有办法点击单选按钮使前面的某个元素变色。

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="nav">
        <input type="checkbox" id="nav-toggle" class="nav-toggle">
        <label for="nav-toggle">
            <svg xmlns="http://www.w3.org/2000/svg" width="23" height="22">
                <defs>
                    <filter id="shadow">
                        <feDropShadow dx="0" dy="0" stdDeviation="1.6">
                    </filter>
                </defs>
                <polygon points="1,1 22,10 1,20 1,1" fill="#1d7ad9" filter="url(#shadow)"></polygon>
            </svg>
        </label>
        <ul class="nav-list">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">在线定制</a>
            </li>
            <li>
                <a href="#">标准箱</a>
            </li>
            <li>
                <a href="#">品质保障</a>
            </li>
        </ul>
    </nav>
    <main class="main">
        <div class="step-box">
            <div class="step">
                <div class="circle" id="box-circle">1</div>
                <div class="line" id="box-line"></div>
                <p id="step-one">1.定制纸箱</p>
            </div>
            <div class="step">
                <div class="circle" id="size-circle">2</div>
                <div class="line" id="size-line"></div>
                <p id="step-two">2.选择数量</p>
            </div>
            <div class="step">
                <div class="circle" id="material-circle">3</div>
                <div class="line" id="material-line"></div>
                <p id="step-three">3.上传附件</p>
            </div>
            <div class="step">
                <div class="circle">4</div>
                <div class="line"></div>
                <p>4.确认下单</p>
            </div>
        </div>

.nav{
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 15%;
    background-color: #f9f9f9;
}
.nav-list{
    float: right;
    list-style: none;
}
.nav-list li{
    display: inline-block;
    margin-left: 30px;
}
/* .nav-list li a:focus,
.nav-list li a:hover{
    color: #fff;
    background-color: #1d7ad9;
} */
.nav-list li a{
    display: inline-block;
    height: 45px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 45px;
    text-decoration: none;
    background-color: #fff;
    border-radius: 8px;
    color: #333;
    box-shadow: 0 0 5px 1px #ccc;
}
.nav input:checked~.nav-list{
    display: block;
}
.nav input:checked~label svg{
    transform: rotateZ(90deg);
    transition: width 2s;
}
.nav label{
    display: none;
}
.nav .nav-toggle{
    display: none;
}
.main{
    padding-left: 15%;
    padding-right: 15%;
}
.step-box{
    display: flex;
    justify-content: flex-end;
    text-align: center;
}
 .step:hover div{
    background-color: #ff7f02;
}
.step:hover p{
    color: #ff7f02;
}
.step-box p{
    padding-top: 20px;
}
.line{
    height: 3px;
    width: 10vw;
    border-radius: 2px;
    background-color: #cccccc;
    min-width: 71px;
}
.circle{
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background-color: #cccccc;
    text-align: center;
    z-index: 1;
    color: #fff;
    position: relative;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
}
.message{
    line-height: 40px;
    font-weight: bold;
    font-size: 1.8rem;
}
.message span::before{
    content: "";
    display: inline-block;
    vertical-align: text-top;
    margin-right: 5px;
    height: 1.9rem;
    width: 3px;
    border-radius: 2px;
    background-color: #1d7ad9;
}
.choose{
    position: relative;
    padding-left:35px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    color: #1d7ad9;
    background-color: #f3f3f3;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}
.choose .word-box::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 15px;
    height: 13px;
    background-image: url(images/box.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.choose .word-size::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 15px;
    height: 13px;
    background-image: url(images/size.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.choose .word-material::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 15px;
    height: 13px;
    background-image: url(images/scissors.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.choose-box{
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fbfcff;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    z-index: 2;
}
.box-one,.box-two,.box-three{
    display: inline-block;
    margin-left: 30px;
}
.choose-material>div:nth-child(-n+5){
    display: inline-block;
    margin-left: 30px;
}
.choose-size{
    position: relative;
    padding-top: 30px;
    background-color: #fbfcff;
    border: 1px solid #e8e8e8;
    z-index: 1;
}
.size-box{
    display: flex; 
    padding-bottom: 30px;
}
.text-box{
    margin-left: 30px;
}
.choose-material{
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fbfcff;
    border: 1px solid #e8e8e8;
    z-index: 1;
}
input[type="text"]{
    padding: 0;
    height: 18px;
    outline: none;
    border: none;
    border: 1px solid #ccc;
}
.size-one,.size-two{
    margin-left: 30px;
}
label{
    font-weight: normal;
}
input[type="radio"] + .choice::before {
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 17px;
    margin-right: 12px;
    vertical-align: text-top;
    border-radius: 50%;
    border: 1px solid #d6d6d6;
    background-color: #f8f9fb;
}
input[type="radio"]:checked + .choice::before {
    background-image: url(images/circle.png);
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
/* div+js模拟下拉框 */
.select-box{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); 
    background: #fff;
}

该问题已被官方收录

用类名控制

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

··

该问题已被官方收录

图片只出现在第一个方框的左上

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码



html： 



html

<div class="father">
	<div class="cont1">
		<p class="text1">水民</p>
		<p class="text2">1号</p>
	</div>
	<div class="picture">
		<img src="投票.png" alt="投票.png">
	</div>
</div>
<div class="father">
	<div class="cont1">
		<p class="text1">水民</p>
		<p class="text2">1号</p>
	</div>
	<div class="picture">
		<img src="投票.png" alt="投票.png">
	</div>
</div>

该问题已被官方收录

sass的default！真正作用，继承，混合，占位符如何选择

0

1

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

gulp合并文件具体的操作流程是什么样？

0

1

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

gulp.task('scss',function(){
    gulp.src('src/scss/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('lib/css'))
        .pipe(rename({suffix:".min"}))
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'))
});

该问题已被官方收录

全局只有一个元素绝对定位了，这个元素是相对谁定位？

5

1

绝对定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蚂蚁部落</title>
<style>
    div {
        position: absolute;
        top:0;
        left:0;
        width: 300px;
        height: 300px;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

该问题已被官方收录

页面背景鼠标点击后左右摇摆。

2

1

背景图片属性布局属性通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
    margin: 0;
}
header{
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 64px;
    color: #F8F8F8;
    text-align: center;
    background-color: #5FC0CD;
}
.arrow{
    position: absolute;
    top: 50%;
    margin-top:-9px;
    left: 17px;
    height: 13px;
    width: 13px;
    border-left: 3px solid #F8F8F8;
    border-bottom: 3px solid #F8F8F8;
    transform: rotate(45deg);
}
main{
    position: absolute;
    top: 64px;
    margin: 0;
    width: 100%;
}
.background{
    position: absolute;
    height: 163px;
    width: 100%;
    background-image: url('../img/bj.png');
    background-size: 100% 101%;
    background-repeat: no-repeat;
}
.photo{
    position: absolute;
    top: 39px;
    left: 15px;
    height: 84px;
    width: 84px;
}
.data{
    position: absolute;
    top: 58px;
    left: 120px;
    width: 96px;
    height: 44px;
    color: #FFFFFF;
}
.name{
    position: absolute;
    top: 0;
    left: 0;
}
.age{
    position: absolute;
    right: 0;
    bottom: 26px;
    font-size: 12px;
}
.landmark{
    position: absolute;
    bottom: 0;
    left: 0;
}
.address{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 10px;
}
ul{
    position: absolute;
    top: 163px;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
.skill{
    position: absolute;
    width: 100%;
    height: 49px;
    border-bottom: 1px solid #E1E5E7;
    line-height: 49px;
    color: #333333;
}
.line{
    position: absolute;
    top: 18px;
    left: 15px;
    width: 2px;
    height: 13px;
    background-color: #5FC0CD;
}
.major{
    position: absolute;
    left: 29px;
}
.condition{
    position: absolute;
    top: 50px;
    margin-left: 5%;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #E1E5E7;
    line-height: 50px;
}
.star{
    position: absolute;
    top :19px;
    left: 31px;
}
.live{
    position: absolute;
    left: 47px;
    color: #333333;
}
.lline{
    position: absolute;
    top: 18px;
    left: 88px;
    width: 1px;
    height: 13px;
    background-color: #E1E5E7;
}
.stars{
    position: absolute;
    top: 19px;
    left: 97px;
}
.meal{
    position: absolute;
    left: 113px;
    color: #333333;
}

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="../CSS/taskthree.css">
</head>
<body>
    <header>
        <a class="arrow" href="https://1239937890.github.io/mywork/task1/html/task1.html"></a>
        <h3>个人主页</h3>
    </header>
    <main>
        <div class="background">
            <img class="photo" src="../img/tx.png">
            <div class="data">
                 <span class="name">高素雅</span>
                 <span class="age">51岁</span>
                 <a class="landmark" href="https://1239937890.github.io/mywork/task1/html/task1.html">
                     <img src="../img/dh.png"></a>
                 <span class="address">北京.通州.果园</span>
            </div>
        </div>
        <ul>
             <li class="skill">
                 <span class="line"></span>
                  <span class="major">专业技能</span>
             </li>
             <li class="condition">
                 <img class="star" src="../img/xx.png">
                 <span class="live">住家</span>
                 <span class="lline"></span>
                 <img class="stars" src="../img/xx.png">
                 <span class="meal">不含餐</span>
             </li>
             <li class="time">
                  <span class="employment"></span>
                  <span class="llline"></span>
                  <span class="three"></span>
             </li>
             <li class="work">
                 <span class="work-time"></span>
                 <span class="linee"></span>
                 <span class="day"></span>
             </li>
             <li class="service">
                 <span class="price"></span>
                  <span class="lineee"></span>
                  <strong class="element"></strong>
             </li>
             <li class="self">
                 <span class="introduce"></span>
                 <span class="lineeee"></span>
                 <span class="laundry"></span></span>
             </li>
        </ul>
     </main>
     <footer>

     </footer>
</body>
</html>

该问题已被官方收录

如何通过rem，font-size，媒体查询实现完美的自适应移动端布局

1

1

自适应 css单位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 62.5%
}
@media only screen and (min-width: 481px) {
    html {
        font-size:109%!important
    }
}

@media only screen and (min-width: 561px) {
    html {
        font-size:130%!important
    }
}

该问题已被官方收录

使三个样式，同时出现hover效果

3

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.circular+.p-1:hover {
    background-color: #ff7f02;
    color: #ff7f02;
}

去第页

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