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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

option如何居中

1

2

下拉菜单表单元素居中

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里：nth-of-type()的问题

0

2

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

先上代码

html

<div class="first">
<div class="star">☆</div>
<p class="text">住家</p>
<div class="star">☆</div>
<p class="text">不含餐</p>
</div>
<div class="second">
<p class="job">从业年限</p>
<p class="years">0~3年</p>
</div>
<div class="second">
<p class="job">工作时间</p>
<p class="years">全天</p>
</div>
<div class="second">
<p class="job">服务价格</p>
<p class="years">25元/小时</p>
</div>
<div class="second">
<p class="job">自我介绍</p>
<p class="years"> 可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富。
</p>
</div>
scss

.second {
@extend %text;
margin-left: .6rem;
.job {
@extend %margin;
padding-right: .26rem;
color: nth($list: $color, $n: 3);
border-right: solid .01rem nth($list: $color, $n: 3);
}
.years {
@extend %margin;
padding-left: .1rem;
&:nth-of-type(3) {
color: #e26163;
}
}
}

该问题已被官方收录

为什么没有给两个按钮设置任何属性它们之间会有间隙

3

2

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<button class="button-1">找雇主</button>
        <button class="button-2">找护工</button>

该问题已被官方收录

使用ul模拟下拉列表的时候，下拉列表背景出现透明

0

1

布局下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* CSS 代码 */
       .header {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 80px; }

        .header .select {
            width: 100%;
            height: 35px;
            background-color: #fff;
            border-bottom: 1px solid #eee; }

        .select:after {
            content: '';
            display: block;
            clear: both; }

        .select .adress,
        .select .eat,
        .select .condition {
            position: relative;
            float: left;
            width: 33.3%;
            font-size: 14px;
            line-height: 35px;
            margin: 0 auto;
            text-align: center; }

        .select .arrow {
            position: absolute;
            top: 15px;
            right: 5px;
            width: 10px;
            height: 8px;
            background: url(./img/task6.png) no-repeat -130px 0;
            -webkit-background-size: 250px;
            background-size: 250px; }

        .select .adlist,
        .select .eatlist,
        .select .conlist {
            height: 0;
            overflow: hidden;
            transition: all 0.5s ease; }

        .select .adlist li,
        .select .eatlist li,
        .select .conlist li {
            width: 100%;
            background-color: #fafafa;
            text-align: center; }

        .select .split {
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 35px;
            background: url(./img/task6.png) no-repeat -370px 50%;
            -webkit-background-size: 400px 35px;
            background-size: 400px 35px; }

        .select .adress:hover .adlist,
        .select .eat:hover .eatlist,
        .select .condition:hover .conlist {
            height: 180px; }

        .main {
            width: 100%;}

        .wrapper {
            width: 100%;
            position: absolute;
            top: 35px; }

        .list {
            width: 100%; }

        .list .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            font-size: 14px;
            border-bottom: 1px solid #ccc; }

        .item .info {
            width: 100%; }

        .item .info .date,
        .item .info .time,
        .item .info .local {
            position: relative;
            margin-top: 10px;
            margin-bottom: 10px;
            padding-left: 35px;
            width: 70%;
            color: #999;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden; }

        .item .info .time {
            font-size: 12px;
            color: #000; }

        .item .price {
            position: relative;
            color: #e63b0e;
            margin-right: 25px;
            white-space: nowrap; }

        .item .date:before {
            position: absolute;
            top: 3px;
            left: 15px;
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(./img/task6.png) no-repeat;
            -webkit-background-size: 230px;
            background-size: 230px; }

        .item .local:before {
            position: absolute;
            top: 3px;
            left: 15px;
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(./img/task6.png) no-repeat -62px 0;
            -webkit-background-size: 230px;
            background-size: 230px; }

        .item .price:after {
            position: absolute;
            top: 3px;
            right: -15px;
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border: 2px solid #5fc0cd;
            border-left: 2px solid rgba(95, 192, 205, 0);
            border-bottom: 2px solid rgba(95, 192, 205, 0);
            transform: rotateZ(45deg); }

<!-- html 代码 -->
 <header class="header">
        <div class="select">
            <ul>
                <li class="adress">
                    <p>所在地</p>
                    <div class="arrow"></div>
                    <ul class="adlist">
                        <li>定位</li>
                        <li>龙华区</li>
                        <li>龙岗区</li>
                        <li>宝安区</li>
                        <li>福田区</li>
                    </ul>
                    <div class="split"></div>
                </li>
                <li class="eat">
                    <p>食宿</p>
                    <div class="arrow"></div>
                    <ul class="eatlist">
                        <li>需要</li>
                        <li>不需要</li>
                    </ul>
                    <div class="split"></div>
                </li>
                <li class="condition">
                    <p>病人情况</p>
                    <div class="arrow"></div>
                    <ul class="conlist">
                        <li>健康</li>
                        <li>良好</li>
                        <li>一般</li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
    <main class="main">
        <div class="wrapper">
            <ul class="list">
                <li class="item">
                    <div class="info">
                        <p class="date">服务日期</p>
                        <p class="time">2015-7-5 至 2015-7-12</p>
                        <p class="local">北京·通州·果园</p>
                    </div>
                    <div class="price"><p>25元/小时</p></div>
                </li>
                <li class="item">
                    <div class="info">
                        <p class="date">服务日期</p>
                        <p class="time">2015-7-5 至 2015-7-12</p>
                        <p class="local">北京·通州·果园</p>
                    </div>
                    <div class="price"><p>25元/小时</p></div>
                </li>
            </ul>
        </div>
    </main>

该问题已被官方收录

select下拉菜单样式修改

1

1

表单元素下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<select class="list-ads" name="list-ads">
                <option value="a1" style="font-size: 13px;">所在地</option>
                <option value="a2" style="font-size: 13px;">上海</option>
                <option value="a3" style="font-size: 13px;">广州</option>
                <option value="a4" style="font-size: 13px;">深圳</option>
            </select>

该问题已被官方收录

如何用固定定位fixed来实现任务十二选项框，fixer和absolute的区别

2

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.footer{
     position: fixed;
     left: 0;
     bottom: 0;
     right: 0;
     .tele{
       width:43vw;
       height:12vw;
       border-radius:0.6vw;
       border:none;
       outline: none;
       font-size:4.17vw;
       margin-bottom:3vw;
       margin-left:4.5vw;
     }
     .tele1{
       background:white;
       border: solid #5fc0cd 0.2vw;;
       color:#5fc0cd;
     }
     .tele2{
       background:#5fc0cd;
       color: #FFFFFF;
     }

该问题已被官方收录

给小箭头设置旋转后，小箭头浮动在上面的fixed定位的上面

1

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 .arrows {
  width: .2rem;
  height: .2rem;
  border-top: 2px solid #5fc0cd;
  border-right: 2px solid #5fc0cd;
  transform: rotate(45deg);
}

该问题已被官方收录

怎样使边框颜色渐变

3

1

渐变

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="head-of-form">
    <div>
        <div class="nav-head">
            <span>所在地</span>
            <div class="icon"></div>
        </div>
        <div class="drop-down-content">广州</div>
        <div class="drop-down-content">深圳</div>
        <div class="drop-down-content">珠海</div>
    </div>
    <div>
        <div class="nav-head">
            <span>食宿</span>
            <div class="icon"></div>
        </div>
        <div class="drop-down-content">最便宜</div>
        <div class="drop-down-content">一般般</div>
        <div class="drop-down-content">最昂贵</div>
    </div>
    <div>
        <div class="nav-head">
            <span>病人情况</span>
            <div class="icon"></div>
        </div>
        <div class="drop-down-content">最帅</div>
        <div class="drop-down-content">最美</div>
        <div class="drop-down-content">最可爱</div>
    </div>
</div>

该问题已被官方收录

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

1

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

该问题已被官方收录

在做任务十二header部分的返回小图标一直都是用的图片，如何用纯css实现呢？

3

1

CSS图标

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>护工个人主页</title>
	<link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="task12-1.css">
</head>
<body>
    <header>
        <a href="task12-2.html"><</a>
        <span>个人主页</span> 
    </header>
    <main>
        <div class="background">
            <div><img src="../task5/images/head.png"></div>
            <p>高素雅 51岁<br>
            <img src="../task5/images/icon-1.png" class="dingwei">
            <span>北京·通州·报纸林</span>
            </p>
        </div>
        <p>专业技能</p><hr>
        <div class="list">
            <p><span class="red">☆</span><span class="left-text-first">住家</span><span class="red">☆</span><span>不含餐</span></p><hr>
            <p><span class="left-text">从业年限</span>0~3</p><hr>
            <p><span class="left-text">工作时间</span>全天</p><hr>
            <p><span class="left-text">服务价格</span><span class="red">25元/小时</span></p><hr>
            <div class="last">
                <div class="myself">
                    <span>自我介绍</span>
                </div>
                <div class="oneself">
                    <span>可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富</span>
                </div>
            </div><hr>
        </div>
    </main>
    <footer>
        <button class="btn-left">留言</button>
        <button class="btn-right">电话联系</button>
    </footer>
</body>
</html>
a {
    color: #ffffff;
    text-decoration: none; }
  
  html {
    font-size: 625%; }
  
  body {
    margin: 0.4rem 0 0.5rem;
    padding: 0;
    font-size: .18rem; }
  
  header {
    position: fixed;
    top: 0;
    text-align: center;
    line-height: .40rem;
    width: 100%;
    color: #ffffff;
    background: #5fc0cd; }
    header a {
      position: absolute;
      left: 0;
      padding: 0 .15rem; }
  
  main {
    margin: .40rem 0 .50rem 0; }
    main .background {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 2rem;
      background: url(../task5/images/bg.png) no-repeat;
      background-size: cover; }
      main .background div {
        width: .80rem;
        height: .80rem;
        padding: 0 .30rem; }
      main .background .dingwei {
        position: relative;
        top: .08rem;
        transform: scale(0.6); }
      main .background span {
        font-size: .12rem; }
      main .background img {
        max-width: 100%;
        max-height: 100%; }
    main > p {
      margin-left: .18rem;
      padding-left: .18rem;
      border-left: 2px solid #5fc0cd; }
    main .list {
      padding: 0 .18rem; }
      main .list .red {
        color: #e26163;
        font-weight: 500; }
      main .list .left-text-first {
        color: black;
        padding-right: .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid; }
      main .list .left-text {
        color: #999999;
        width: 1.12rem;
        padding: 0 .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid;
        white-space: nowrap; }
      main .list .last {
        display: flex;
        align-items: center; }
        main .list .last .myself {
          color: #999999;
          position: absolute;
          width: 1.12rem;
          border-right: 1px #999999 solid;
          text-align: center;
          white-space: nowrap; }
        main .list .last .oneself {
          margin-left: 1.35rem; }
  
  footer {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: .50rem;
    width: 100%;
    background: #ffffff; }
    footer .btn-left {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #5fc0cd;
      background: #ffffff; }
    footer .btn-right {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #ffffff;
      background: #5fc0cd; }

去第页

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