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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

文字环绕图片

1

1

浮动

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="kuaitou">
                            <div>
                                <img src="../images/zhiweitouxiang.jpg">
                            </div>
                            <div>
                                <h1>Web前端工程师</h1>
                                <p>
                                    Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。
                                </p>
                            </div>
                        </div>

该问题已被官方收录

如何用纯CSS写一个手动轮播图

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" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task14.css">
</head>
<body>
</body>
</html>

该问题已被官方收录

雪碧图和文字放在同一个元素，文字换行显示

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>
    <style pyte="txet/css">
html { 
    font-size:312.5%; 
} 
body { 
    margin:0 ;
    font-size: initial;  
}
header {
    position: sticky;
    top:0;
    height: .88rem;
    background-color: #5FC0CD;
    line-height: .88rem;
    text-align: center;
    word-spacing:-.16rem;
    z-index: 1;
}
.guzhu{
    width:1.44rem;
    height: .7rem;
    border-radius:.15rem;
    border: none;
    background-color:#55A8B3;
    outline: none; 
    font-size: .34rem;
    color:#FFFFFF;
}
.hugong{
    width:1.44rem;
    height: 0.7rem;
    border-radius: .15rem;
    border: none;
    background-color:#FFFFFF;
    font-size: .34rem;
    font-size: 0.34rem;
    outline: none; 
    color:#55A8B3;
}
.top-right{
    float: right;
    width: .42rem;
    height: .42rem;
    margin: .22rem .3rem 0 -.5rem;
    background:url(task7-css6.png) no-repeat 0 0;

}
.box{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    background-color:#FFFFFF;
}

/* 下拉框 */
.dropdown {
    flex: 1;
    position: relative;
    display: inline-block;
    border-top:0.01rem solid #e1e5e7;
    border-bottom: 0.01rem solid #e1e5e7;
    line-height:0.8rem;
    text-align: center;
    font-size:0.28rem;
    color:#999999;
}
.sjx{
    float: right;
    border-width: 0.1rem;
    border-style: solid;
    border-color: #AFBAC0 transparent transparent transparent;
    margin: 0.36rem 0.12rem 0 0;
}
ul,li{
    margin: 0;
    padding:0;
    list-style: none;
}

/* 下拉菜单 */
.dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* 下拉项点击颜色 */
li.li:hover{
    background-color: #5FC0CD;
}
.main-box{
    display: flex;
    align-items: center;
    height: 1.8rem;
    border-bottom: .001rem solid #E1E5E7;
    background: #FFFFFF;
}
.content-box{
    width: 100%;
    height: 1.2rem;
    border: .01rem solid red;
    line-height: 1.2rem;
}
.date{
    height: .3rem;
    padding-left: .4rem;
    margin: 0 0 0 .3rem;
    background: url(task7-css6.png) no-repeat 0 -.6rem;
    font-size:.24rem;
    /* 字符间距 */
    letter-spacing: .03rem;
    color: #999999;
}

    </style>
</head>
<body>
    <header>
        <button type="button" class="guzhu">找雇主</button>
        <button type="button" class="hugong">找护工</button>
        <a class="top-right" href="www.xxxxx.com"></a>  
    </header>
    <main>
        <div class="box">
            <div class="dropdown">
                <span>所在地
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li class="li">北京</li>
                    <li>上海</li>
                    <li>苏州</li>
                </ul>
            </div>
            <div class="dropdown">
                <span>食宿
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li>一日一餐</li>
                    <li>一日两餐</li>
                    <li>一日三餐</li>
                </ul>
            </div>
            <div class="dropdown">
                <span>病人情况
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li>能自理</li>
                    <li>不能自理</li>
                    <li>手术后</li>
                </ul>
            </div>
        </div>
        <ul>
            <li class="main-box">
                <ul class="content-box">
                    <li class="date">服务日期</li>

                </ul>
            </li>
        </ul>
    </main>

</body>
</html>

该问题已被官方收录

截图中这个圆角框怎么实现？

1

1

边距盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

header {
height:50px;
}
footer {
height:50px;
}
div {
height: calc(100% - 100px);
}

该问题已被官方收录

在使底部footer背景透明的时候如果使用opacity

1

1

透明度

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.65rem;
    opacity: 0.8;
    background: rgba(41, 189, 224, 0.8);
}
footer button {
    position: relative;
    width: 40vw;
    height: 0.43rem;
    font-size: 0.2rem;
    border-radius: 0.07rem;
    color: white;
    opacity: initial;
}

该问题已被官方收录

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<main>
        <div class="container">
            <div class="row row-three">


                <div class="col-5">
                    <div class="main-box-three">
                        <img class="ali" src="img/ali.png">
                        <img class="jinshan" src="img/jinshan.png">
                    </div>
                </div>


                <div class="col-2">
                    <div class="main-box-three">
                        <img class="huanxing" src="img/huanxing.png">
                    </div>
                </div>


                <div class="col-5">
                    <div class="main-box-three">
                        <img class="ronglian" src="img/ronglian.png">
                        <img class="qiniu" src="img/qiniu.png">
                    </div>
                </div>

该问题已被官方收录

固定定位与下面盒子margin重叠问题

1

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header {
    position: fixed;
    height: 2.75rem;
    background-color: #5fc0cd;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

该问题已被官方收录

框架带的复选框单选框都不符合要求，怎么在原有基础上修改。

2

1

表单元素 checkbox input

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-md-8 col-6 ">
                    <form>
                        <label class="radio-inline"><input type="radio" class="yuan">对口箱</label>
                        <label class="radio-inline"><input type="radio"  >飞机盒</label>
                        <label class="radio-inline"><input type="radio"  >天地盖</label>
                    </form>
                </div>
.plane form label {
    margin: 0;
    padding: .7rem;
}
.yuan{
    visibility: hidden;
}

该问题已被官方收录

栅格式布局5张图片使用col-lg-怎么铺满整个屏幕且不溢出

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
    <div class="row business">
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm1.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm2.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm3.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm4.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm5.png"></span>
        </div>
    </div>
</div>

该问题已被官方收录

任务七雪碧图调好位置之后无法调节大小

2

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.k{
    background: url(../img/task7-2.11.png) no-repeat;
    background-size: 20vw 5vw;
    display: inline-block;

}
.k1{
    height: 5vw;
    width: 5vw;
    background-position: 0 0;
}
.k2{
    height: 5vw;
    width: 5vw;
    background-position: -5vw 0;
}
.k3{
    height: 5vw;
    width: 5vw;
    background-position: -10vw 0;
}
.k4{
    height: 5vw;
    width: 5vw;
    background-position: -15vw 0;
}

去第页

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