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

该问题已被官方收录

css如何让按钮刷新时保持颜色不变

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="top2">
            <button class="topbutton1">
                找雇主
            </button>
            <button class="topbutton2">
                找护工
            </button>
        </div>
        <div class="top3">                        
            
        </div>



header{
        position: fixed;
        top: 0;
        width: 100%;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-content: center;    
        background-color: #5fc0cd;
       
        .top1{
            
            padding: 1.5rem;
        }
        .top2{
            display: flex;
            align-content: center;
            flex-wrap: nowrap;
            padding-left: 1rem;
            max-height: 4rem1rem;
        }
        .top3{
        padding: 1.5rem;
        background-image: url(../task6/task6-1.png);
        background-repeat: no-repeat;
        background-position: 0;
        } 
        .topbutton1{
            position: relative;
            left: 0.3;
            padding-top: 0.9;
            padding-bottom: 0.9;
            width: 7.1rem;
            font-size: 1.6rem;
            font-weight: 700;
            color: #fff;
            border-right: 0px;
            border: 0.1rem solid #55a8b3;
            border-radius: 0.5rem 0 0 0.5rem;
            background-color: #55a8b3;
        }
        .topbutton2{
            position: relative;
            right: 0.3rem;
            padding-top: 0.9rem;
            padding-bottom: 0.9rem;
            width: 7.1rem;
            font-size: 1.6rem;
            font-weight: 700;
            color: #5fc0cd;
            border: 0.1rem solid #fff;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            background-color: #fff;
        }

该问题已被官方收录

设置了最大宽度，子元素设置百分比,同时设置了相对视窗定位，会超出我设定的最大宽度

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  margin: 0;
  padding: 0; }

.max-wid {
  max-width: 780px;
  min-width: 320px;
  height: 100vh;
  margin: auto; }

header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  line-height: 40px;
  font-size: 20px;
  color: #ffffff;
  background: #5fc0cd; }
  header img {
    height: 20px; }

该问题已被官方收录

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

sass什么时候用？需要精通吗？

0

1

sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

option居中

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    text-align:center;
}

sass使用&引用父元素无效

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 ul{
            position: absolute;
            line-height:2;
            width: 100%;
            display: none;
            list-style-type: none;
            overflow: hidden;
            text-align: center;
            box-shadow: 0px 0px 0.8px 0.8px #dedede;
            background-color: white;
            &:hover{display: block;}
                li{
                    text-align: center;
                    font-size: 14px;
                    width: 100%;
                }
            
        }