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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

用右边距做文字中间竖线，用flex布局以后没有了行高，类似padding效果的效

4

8

flex

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何保证一段文字在盒子中垂直居中，并且换行后还是垂直居中

7

3

css概念布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.intro {
	padding-top: .2rem;
}

该问题已被官方收录

背景图片，在不同的分辨率下，显示不全。

2

3

css概念布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.background {
    background-image: url(images/background.jpg);
    background-size: cover;
    position: relative;
    height: 180px;
    color: #ffffff;
}

该问题已被官方收录

页面中的描述文字无法达到自适应的效果

1

2

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="self-introduce">
     <span class="self-1" >自我介绍</span>
     <span class=>丨</span>
     <span class="selfcontent">可以洗衣、做饭、照顾老人。
        在护工方面有五年经验，经验丰富.可以洗衣、做饭、照顾老人。在护工方面有五年经验，经验丰富</span>
    </div>

该问题已被官方收录

我在做任务五的时候，用了背景图片的填充，可是发现了无法填充满

1

2

布局

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>Document</title>
    <link rel="stylesheet" type="text/css" href="task5.css">
</head>
<body>
    <header>
        <a class="return"></a>
        <a class="arrow"></a>
        <span>个人主页</span>
    </header>
    <div class="box2">
        <div class="doctor"></div>
        <div class="headportrait"></div>
        <span class="name">高素雅</span>
        <span class="age">51岁</span>
        <span class="site">北京.通州.果园</span>
    </div>
    <div class="box3">
        <div class="skill">
            <span>专业技能</span>
        </div>
        <div class="require">
            <span class="require1">住家</span>
            <span class="require2">不含餐</span>
        </div>
        <div class="experience">
            <span class="experience1">工作年限</span>
            <span class="experience2">0~3年</span>
        </div>
        <div class="time">
            <span class="time1">工作时间</span>
            <span class="time2">全天</span>
        </div>
        <div class="price">
            <span class="price1">服务价格</span>
            <span class="price2">25元/小时</span>
        </div>
        <div class="introduce">
            <span class="introduce1">自我介绍</span>
            <span class="introduce2">可以洗衣、做饭、照顾老人。在护
                工方面有5年的经验，经验丰富。</span>
        </div>
        <div class="connection">
            <a class="leave word">留言</a>
            <a class="phone">电话联系</a>
        </div>
    </div>
</body>
</html>
html{
    font-size: 62.5%;
}
body{
   margin: 0; 
}
header{
    height:4.4rem;
    background-color: #5FC0CD;
    text-align: center;
}
/*.return{*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*border-top: 1px solid white;*/
    /*border-right: 1px solid white;*/
    /*transform:rotate(45deg);*/
/*}*/
.arrow{
    width: 1.5rem;
    height: 1.5rem;
    border-top: 3px solid white;
    border-left: 3px solid white;
    transform:rotate(-45deg);
    display: inline-block;
    margin-left: 3.5rem;
    margin-top: 1.2rem;
    float: left;
}
header span{
    font-size: 3rem;
    color: white;
}
.box2{
 background: url(./doctor.png) no-repeat;
 height: 32.6rem;
 background-size: 100%
}

该问题已被官方收录

底下的自我介绍那一行，没有办法做到和设计图一样，上下两行，不知道是哪里出了问题

2

2

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>Document</title>
    <link rel="stylesheet" type="text/css" href="task5.css">
</head>

<body>
    <header class="return">
        <a class="arrow"></a>
        <span class="introductio">个人主页</span>
    </header>
    <div class="bg">
        <!-- 背景图片 -->
        <div class="portrait"></div>
        <div>
            <div>
                <span class="name">高素雅</span>
                <span class="age">51岁</span>
            </div>
            <div class="box1">
                <div class="shape"></div>
                <span class="address">北京.通州.果园</span>
            </div>
        </div>
    </div>
    <div class="box3">
        <div class="skill">
            <p>专业技能</p>
        </div>
       <div class="require">
            <div class="box4">
                <div class="pentagram1"></div>
                <span class="require1">住家</span>
            </div>
            <div class="box5">
                <div class="pentagram2"></div>
                <span class="require2">不含餐</span>
            </div>
        </div>
        <div class="menu">
            <span class="submenu">工作年限</span>
            <span class="submenu1">0~3年</span>
        </div>
        <div class="menu">
            <span class="submenu">工作时间</span>
            <span class="submenu1">全天</span>
        </div>
        <div class="menu">
            <span class="submenu">服务价格</span>
            <span class="submenu2">25元/小时</span>
        </div>
        <div class="introduction">
            <span class="submenu">自我介绍</span>
            <div>
                <span class="introduction2">可以洗衣、做饭、照顾老人。在护
                    工方面有5年的经验，经验丰富。</span>
            </div>
        </div>
    </div>
    <footer>
        <button class="leaveword">留言</button>
        <button class="phone">联系方式</button>
    </footer>        
</body>

</html>
html{
    font-size: 62.5%
}
body{
    margin: 0;
    font-size: 1.6rem;
}
header{
    height:4.4rem;
    background-color: #5FC0CD;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
}
/*.return{*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*border-top: 1px solid white;*/
    /*border-right: 1px solid white;*/
    /*transform:rotate(45deg);*/
/*}*/
.arrow{
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-top: 3px solid white;
    border-left: 3px solid white;
    transform:rotate(-45deg);
    display: inline-block;
    margin-left: 3.5rem;
    margin-top: 1.2rem;
    float: left;
}
.introductio{
    color: white;
    text-align: center;
    line-height: 4rem;
}
.bg{
    background: url(./doctor.png) no-repeat;
    height: 16.3rem;
    background-size: cover;
    display: flex;
    align-items: center;
    margin-top: 4rem;
}
.portrait{
    background: url(./head\ portrait.png) no-repeat;
    height: 8.45rem;
    width: 8.45rem;
    background-size: cover;
    margin-left: 1.5rem;
}
.name{
    color: white;
    margin-left: 2rem;
}
.age{
    color: white;
    margin-left: 1.5rem;
}
.shape{
    background: url(./Shape\ 4.png) no-repeat;
    width: .9rem;
    height: 1.15rem; 
    align-items: center;
    background-size: cover;
    display:inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
}
.address{
    color: white;
    font-size: .24rem;
}
.box3{
    height: 41.65rem;
}
.skill{
    height: 5rem;
    border: 1px solid  #E1E5E7;
}
p{
    border-left:4px solid #5FC0CD;
    display: inline-block;
    line-height: 2rem;
    margin-left: 2rem;
    padding-left: 1rem;
}
.require{
    border-bottom: .5px solid #E1E5E7;
    margin-left: 1.65rem;
    line-height: 5rem;
    height: 5rem;
    font-size: 1.8rem;
}
.box4{
    display: inline-block;
    padding-left: 1rem;
    border-right:1px solid #E1E5E7;
    line-height: 2rem;
    padding-right: 1rem;
}
.pentagram1{
    background: url(./pentagram1.png) no-repeat;
    display: inline-block;
    width: 1.1rem;
    height: 1.2rem;
    background-size: contain;
    margin-left: 3rem;
}
.box5{
    display: inline-block;
}
.pentagram2{
    display: inline-block;
    background: url(./pentagram2.png) no-repeat;
    width: 1.1rem;
    height: 1.2rem;
    background-size: contain;
}
.menu{
    border-bottom:1px solid #EFF0F4;
    height: 5rem;
    line-height: 5rem;
    margin-left: 1.65rem;
}
.submenu{
    margin-left: 3.4rem;
    border-right: 1px solid #E1E5E7;
    padding-right: 1rem;
}
.submenu1{
    margin-left: 1.35rem;
}
.submenu2{
    margin-left: 1.35rem;
    color:  #E26163;
}
.introduction{
    border-bottom:1px solid #EFF0F4;
    height: 5rem;
    display: flex;
    margin-left: 1.65rem;
    align-items: center;
}
.introduction2{
    font-size: 1.4rem;
    width: 40rem;
    padding-left: 2rem;
}
footer{
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: white;
}
.leaveword{
    width: 40%;
    height: 4.4rem;
    background-color: white;
    border: 1px solid #5FC0CD;
    color: #5FC0CD;
    font-size: 100%;
    border-radius: 5px;
    margin: auto;
}
.phone{
    width: 40%;
    height: 4.4rem;
    background-color: #5FC0CD;
    border: 1px solid #5FC0CD;
    color: white;
    font-size: 100%;
    border-radius: 5px;
    margin: auto;
}

该问题已被官方收录

上面用了定位但是会压在头目上，下边用了负值，有什么影响吗？

1

1

定位边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

上面用了定位但是会压在头目上，下边用了负值，有什么影响吗？

该问题已被官方收录

页面背景鼠标点击后左右摇摆。

2

1

背景图片属性布局通用属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
    margin: 0;
}
header{
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 64px;
    color: #F8F8F8;
    text-align: center;
    background-color: #5FC0CD;
}
.arrow{
    position: absolute;
    top: 50%;
    margin-top:-9px;
    left: 17px;
    height: 13px;
    width: 13px;
    border-left: 3px solid #F8F8F8;
    border-bottom: 3px solid #F8F8F8;
    transform: rotate(45deg);
}
main{
    position: absolute;
    top: 64px;
    margin: 0;
    width: 100%;
}
.background{
    position: absolute;
    height: 163px;
    width: 100%;
    background-image: url('../img/bj.png');
    background-size: 100% 101%;
    background-repeat: no-repeat;
}
.photo{
    position: absolute;
    top: 39px;
    left: 15px;
    height: 84px;
    width: 84px;
}
.data{
    position: absolute;
    top: 58px;
    left: 120px;
    width: 96px;
    height: 44px;
    color: #FFFFFF;
}
.name{
    position: absolute;
    top: 0;
    left: 0;
}
.age{
    position: absolute;
    right: 0;
    bottom: 26px;
    font-size: 12px;
}
.landmark{
    position: absolute;
    bottom: 0;
    left: 0;
}
.address{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 10px;
}
ul{
    position: absolute;
    top: 163px;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
.skill{
    position: absolute;
    width: 100%;
    height: 49px;
    border-bottom: 1px solid #E1E5E7;
    line-height: 49px;
    color: #333333;
}
.line{
    position: absolute;
    top: 18px;
    left: 15px;
    width: 2px;
    height: 13px;
    background-color: #5FC0CD;
}
.major{
    position: absolute;
    left: 29px;
}
.condition{
    position: absolute;
    top: 50px;
    margin-left: 5%;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #E1E5E7;
    line-height: 50px;
}
.star{
    position: absolute;
    top :19px;
    left: 31px;
}
.live{
    position: absolute;
    left: 47px;
    color: #333333;
}
.lline{
    position: absolute;
    top: 18px;
    left: 88px;
    width: 1px;
    height: 13px;
    background-color: #E1E5E7;
}
.stars{
    position: absolute;
    top: 19px;
    left: 97px;
}
.meal{
    position: absolute;
    left: 113px;
    color: #333333;
}

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="../CSS/taskthree.css">
</head>
<body>
    <header>
        <a class="arrow" href="https://1239937890.github.io/mywork/task1/html/task1.html"></a>
        <h3>个人主页</h3>
    </header>
    <main>
        <div class="background">
            <img class="photo" src="../img/tx.png">
            <div class="data">
                 <span class="name">高素雅</span>
                 <span class="age">51岁</span>
                 <a class="landmark" href="https://1239937890.github.io/mywork/task1/html/task1.html">
                     <img src="../img/dh.png"></a>
                 <span class="address">北京.通州.果园</span>
            </div>
        </div>
        <ul>
             <li class="skill">
                 <span class="line"></span>
                  <span class="major">专业技能</span>
             </li>
             <li class="condition">
                 <img class="star" src="../img/xx.png">
                 <span class="live">住家</span>
                 <span class="lline"></span>
                 <img class="stars" src="../img/xx.png">
                 <span class="meal">不含餐</span>
             </li>
             <li class="time">
                  <span class="employment"></span>
                  <span class="llline"></span>
                  <span class="three"></span>
             </li>
             <li class="work">
                 <span class="work-time"></span>
                 <span class="linee"></span>
                 <span class="day"></span>
             </li>
             <li class="service">
                 <span class="price"></span>
                  <span class="lineee"></span>
                  <strong class="element"></strong>
             </li>
             <li class="self">
                 <span class="introduce"></span>
                 <span class="lineeee"></span>
                 <span class="laundry"></span></span>
             </li>
        </ul>
     </main>
     <footer>

     </footer>
</body>
</html>

该问题已被官方收录

在行高设定auto时,文字无法保持一行

2

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css代码
.explain{
    color: #595959;
    padding-left: 0.2rem;
}
.specialli{
    display: flex;
    align-items: center;
    margin-left: 3%;
    height: auto;
    width: 94%;
    border-bottom: 1px solid #e1e5e7;
    padding: 0.36rem 0;
}
.specialdetail{
    color: #999999;
    border-right: 1px solid #999999;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
html代码
            <li class="specialli"><span class="specialdetail">自我介绍</span><span class="explain">可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人</span></li>

该问题已被官方收录

session保留在不同的web服务器下，结果不一样

0

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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