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

该问题已被官方收录

怎么用纯CSS实现task13下面的Tab切换标签效果代码

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header .main .recent span {
  display: block;
  width: 3vw;
  height: 3vw;
  border: 0.1vw solid #aaaaaa;
  border-radius: 50%;
  float: left;
  margin-right: 0.5vw;
  margin-top: 2vw;
}
.header .main .recent span:hover {
  background: #29BDE0;
}
.header .main .recent p {
  display: block;
  width: 14vw;
  margin: auto;
}

该问题已被官方收录

如果上传到自己的githup里面，那要怎么上传到公共的？

0

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

页面打不开，在浏览器中打开页面出现找不到文件提示。

0

1

路径

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
    <title>setup</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet"  href="setup.css">
    <script src="setup.js"></script>
</head>
<body>
<header><img src="./img/9.png"><span>参考设置</span><img class="iconright" src="./img/10.png"></header>
<div class="main">
    <div class="match">
        <div class="match_left">玩家配比</div>
        <div class="match_right">
            <div></div>
            <button>点击设置</button>
        </div>
    </div>
    <div class="keyword">
        <input type="text" maxlength="8" placeholder="水民词组">
        <input type="text" maxlength="8" placeholder="卧底词组">
    </div>
    <div class="playernum">
        <div class="number">玩家人数<input id="shownum" type="number" min="4" max="18" maxlength="2">人</div>
        <div class="slide">
            <input id="subbtn" onclick="subnum()" type="button" value="—">
            <input id="range" oninput="change()" type="range" min="4" max="18" step:"1" value="4">
            <input id="addbtn" onclick="addnum()" type="button" value="+" style="font-size:1.2rem">
        </div>
        
    </div>
    <button class="deal">去发牌</button>
</div>
</body>  
</html>

$grey:#f0f0f0;
$lightgrey:#fbfbfb;
$deepgrey:#d9d9d9;
$white:#fff;
$blue:#29bde0;
$orange:#fab344;
$lightorange:#ffe6be;
@mixin mmwidth(){
    min-width: 320px;
    max-width: 768px;
}
@mixin mtb($mtop,$mbtm){
    margin-top:$mtop;
    margin-bottom:$mbtm;
}
@mixin ptb($ptop,$pbtm){
    padding-top: $ptop;
    padding-bottom:$pbtm;
}
@mixin fixedmg(){
    margin-left:.5rem;
    margin-right:.5rem;
}
@mixin fixedpd(){
    padding-left:.5rem;
    padding-right:.5rem;
}
@mixin size($width,$height){
    width:$width;
    height:$height;
}
body{
    @include mmwidth;
    margin:0 auto;   
}
header{
    @include mmwidth;
    @include ptb(.5rem,.5rem);
    @include fixedpd;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color:$white;
    background-color: $blue;
    img{
        height:1.2rem;
    }
    .iconright{
        width:1.2rem;
    }
}
.main{
    @include mmwidth;
    padding:.5rem;
    background-color: $grey;
    .match{
        display:flex;
        .match_left{
            width:1.2rem;
            padding:0 1rem;
            border-right:1px solid $deepgrey;
            font-size: 1.2rem;
            background-color: $white;
        }
        .match_right{
            background-color: $lightgrey;
        }
    }
    .keyword{
        @include mtb(.5rem,.5rem);
        padding:0.5rem 2rem 1.2rem;
        background-color: $white;
        input{
            @include ptb(.6rem,.6rem);
            display: block;
            width:100%;
            border:none;
            border-bottom:1px solid $deepgrey;
            font-size: .8rem;
            color:$lightgrey;

        }
    }
    .playernum{
        margin-bottom: .5rem;
        padding:1rem 1rem;
        background-color: $white;
        .number{
            margin-bottom: 1rem;
            input{
                @include size(1.6rem,1.3rem);
                margin:0 1rem;
                border:none;
                font-size: 1rem;
                text-align:center;
                background-color: $grey;
                outline: none;      
                &:focus{
                    outline:none;
                }
            }
        }
        .slide{
            display: flex;
            justify-content: space-between;

            input[type=button]{
                margin: 0 2rem;
                border:1px solid $deepgrey;
                font-size: 0.7rem;
                font-weight: bold;
                color:$orange;
                background-color: $white;
                outline: none;
            }
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
                background: -webkit-linear-gradient(left,$orange,$lightorange) no-repeat;
            }
            input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none;
            }    
            input[type=range]{
                flex:1;
                outline: none;
            }
            input[type=range]::-webkit-slider-runnable-track{
                -webkit-appearance:none;
                height:0.3rem;
                background-color: $lightorange;
            }
            //input[type=range]::-webkit-slider-thumb {
            //    -webkit-appearance: none;
            //    height: 25px;
            //    width: 25px;
            //    margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
            //    background: red; 
            //    border-radius: 50%; /*外观设置为圆形*/
            //    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
            //    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
            //}
            input[type=range]::-webkit-slider-thumb{
                -webkit-appearance:none;
                width:2rem;
                height:1.5rem;
               background:url("./img/11.png") no-repeat;
               background-size: 2rem 1.5rem;
               margin-top: -0.6rem;
            }
        }

    }

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance: none;
    }
    input[type=number]{
        -moz-appearance: textfield;       
    } 
    .deal{
        @include size(100%,3rem);
        font-size: 1.2rem;
        border: none;
        outline: none;
        color:$white;
        background-color: $orange;
    }
}

var num=document.getElementById("range");
 var location=document.getElementById("shownum");
function addnum(){
num.value=++num.value;
    change();
}
function subnum(){
num.value=num.value-1;
    change();
}
function change(){
 location.value=num.value;
}

该问题已被官方收录

为何当设置margin-bottom负值后，会改变CSS读取的高度？

0

1

边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div style="width: 50%;height: 50px;margin-bottom: -25px;background: red">
	</div>
	<div style="width: 20%;height: 25px;background: #dddddd"></div>

该问题已被官方收录

select下拉框的默认样式

0

1

下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <select>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

该问题已被官方收录

在移动端的弹窗上,给body设置overflow:hidden为什么页面还能滚？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$rootScope.notice = function (content) {
            var modal = $modal({
                html: true,
                show: false,
                backdrop: false,
                templateUrl: 'views/template/notice.html',
                controller: function ($scope) {
                    $scope.content = content;
                    $scope.ok = function () {
                        typeof okFn == 'function' && okFn();
                        modal.$promise.then(modal.hide);
                    };
                    window.onpopstate = function () {
                        modal.$promise.then(modal.hide);
                    };
                }
            });
            modal.$promise.then(modal.show);
        };

该问题已被官方收录

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

该问题已被官方收录

如何让滚动条只在中间主题部分，不让滚动条出现在页眉和页脚部分？

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header {
    position: fixed;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 14rem;
    background-color: #f8fafb;
}

 <div style="height:14rem;"></div>

<div class="row main-body">

该问题已被官方收录

如何让两个属性一起hover效果

1

属性属性属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="link">
                        <div class="circle"></div>
                        <span class="link_text">阿里巴巴</span>
                    </div>
.circle{
    position: relative;
    top: 1.3rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-left: 7rem;
    border: 1px solid orange;
}
.link{
    margin-bottom: 2rem;
}
.todo span{
    margin-right: 3rem;
}
.link circle:hover{
    background:#f9a372;
}
.link_text:hover {
    color: #ff650e;
}

该问题已被官方收录

配置nginx失败，404

1

nginx

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

#access_log  logs/access.log  main;

sendfile        on;
    #tcp_nopush     on;

#keepalive_timeout  0;
    keepalive_timeout  65;

#gzip  on;

server {
        listen       80;
        server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
            root   mytask/ma;
            index  index.html index.htm;
        }

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

# proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           mytask/ma;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

# deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

# another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

#    location / {
    #        root   E:\mytask\ma;
    #        index  index.html index.htm;
    #    }
    #}

# HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

#    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

#    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

#    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}