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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

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>

该问题已被官方收录

上传到GitHub的文件夹异常，完全打不开。

0

1

管理工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

form表单里button自动刷新页面

2

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<form  class="all">
    <div class="center">
        <img src="../img/login-turnip.png" alt="" class="turnip">
        <div class="form-group">
              <img src="../img/login-person.png" alt="" class="person">
              <input type="text" class="name"  placeholder="请输入用户名">
        </div>
        <div class="form-group ">
             <img src="../img/login-lock.png" alt="" class="password">
             <input type="password" class="word"  placeholder="请输入密码">
        </div>
        <div class="error" id="error"></div>
        <button class="btn btn-default " id="entry" onClick="return false">登录</button>
    </div>

该问题已被官方收录

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

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
}

该问题已被官方收录

怎样使边框颜色渐变

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>

该问题已被官方收录

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

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

该问题已被官方收录

使用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>

该问题已被官方收录

使用perspective-origin 3D旋转没有反应怎么回事？

0

1

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="veil">
                <p class="veil-1">iOS工程师</p>
                <p> iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属 于类Unix的商业操作系统。国内iOS开 发起步相对较晚，人才培养机制更是远 远跟不上市场发展速度。有限的iOS开 发人才成了国内企业必争的资源。国内 iOS开发起步相对较晚，人才培养机制 更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p>
            </div>

.veil {
        width: 36.5rem;
        height: 44.3rem;
        background: #120e0b;
        opacity: 0;
        position: absolute;
        padding: 8.5rem 4.3rem;
        color: #FFFFFF;
        font-size: 1.4rem;
        transition:all 2s;
        transform-origin: 50% 0;
        .veil-1 {
          text-align: center;
          margin-bottom: 3.5rem;
        }
      }

该问题已被官方收录

目前流行的组件库有哪些？css，js各有哪些流行的库？

0

1

框架

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.

该问题已被官方收录

如何不用框架做响应式导航栏

0

1

响应式导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

去第页

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