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

css概念布局

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

在行高设定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>

该问题已被官方收录

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

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>

该问题已被官方收录

按钮是块级元素还是行内元素？

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html：
 <footer>
        <button class="leave">留言</button>
        <button class="telephone">电话联系</button>
    </footer>


css：
.leave {
    margin: 2%;
    width: 46%;
    /* 此处将宽度设置为48%是将整个按钮在整个宽度的46%  46%+2%+2%=50%刚好一半*/
    height: 40px;

    border: 1px solid rgba(95, 192, 205, 1);
    border-radius: 5px;
    font: 17px / 6px HiraginoSansGB-W3;

    font-weight: normal;
    color: rgba(95, 192, 205, 1);
    background-color: white;


}

.telephone {
    float: right;
    /* 为什么这里要设置浮动？而第一个按钮不用设置浮动？ */

    /* margin: auto; */

    margin: 2%;
    width: 46%;
    height: 40px;
    color: rgba(255, 255, 255, 1);
    background: rgba(95, 192, 205, 1);
    border: 1px solid rgba(95, 192, 205, 1);
    border-radius: 5px;
}

该问题已被官方收录

背景图片有没有办法加一个灰色的图层

5

1

css概念布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html

<div class="awm">

    <img class="pyz" src="../img/task5-9.png"/>
    <img class="xq" src="../img/task5-1.png"/>
    <p class="wz1">徐士林 55岁</p>
    <img class="xlb" src="../img/task5-2.png"/>
    <p class="wz2">京城 • 四方 • 报纸林</p>
</div>


css

.pyz{
    height: 200px;
    width: 100%;
    position: absolute;

}

该问题已被官方收录

文字中间的竖线在Chrome调试时显示在正常位置，手机端打开时竖线会向右偏移

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.intro1::before {
    content: '';
    position: relative;
    left: 1.35rem;
    padding-left: .02rem;
    padding-bottom: .01rem;
    background: #E1E5E7;
}

.line::before {
    content: '';
    position: relative;
    left: 1.87rem;
    padding-left: .02rem;
    padding-bottom: .01rem;
    background: #E1E5E7;}

该问题已被官方收录

select下拉框的默认样式

0

1

下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <select>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

该问题已被官方收录

点击提交按钮后，无法跳转到后台页面

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// jQuery方法
$(document).ready(function(){
    $(".btn").click(function(){//点击事件
        var user = $("#user").val();//获取账号框的值
        var password = $("#password").val();//获取密码框的值
        if(user === ""){//如果账号框值为0
            $("#warning").text("请输入账号");
            return;
        }
        if(password === ""){//如果密码框值为0
            $("#warning").text("请输入密码");
        }
        if(user !== "" && password !== ""){//账号框，密码框都有值时
            $.ajax({
                type: "post",//定义请求方式
                dataType: "json",//数据类型
                url: "/carrots-admin-ajax/a/login",//文件在服务器上的位置
                data: {//数据
                    name: user,//账号
                    pwd: password//密码
                },
                success: function(response){
                    if(response.message === "success"){
                        location.href = "http://dev.admin.carrots.ptteng.com/"
                    }
                    else {
                        $("#warning").text(response.message);
                    }
                    console.log(response);
                }
            })
        }
    });
});

该问题已被官方收录

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>

该问题已被官方收录

为何当设置margin-bottom负值后，会改变CSS读取的高度？

0

1

边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div style="width: 50%;height: 50px;margin-bottom: -25px;background: red">
	</div>
	<div style="width: 20%;height: 25px;background: #dddddd"></div>

去第页

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