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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

head布局思路

6

4

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        body{
            background: #eff0f4;
        }

        .box1{
            font-family:"黑体";
            font-size: 16px;
            color: white;
            line-height: 45px;
            height: 45px;
            width: 20%;
            background-color: #66cccc;
            text-align: center;
            float: left;
        }
        .box2{
            font-family: "黑体";
            font-size: 16px;
            color: white;
            line-height: 45px;
            height: 45px;
            width: 60%;
            background-color: #66cccc;
            text-align: center;
            float: left;
        }
        .box3{
            font-family:"黑体";
            font-size: 16px;
            color: white;
            line-height: 45px;
            height: 45px;
            width: 20%;
            background-color: #66cccc;
            text-align: center;
            float: right;
        }
        .box4{
            height: 45px;
            width: 100%;
            margin: 8px 0 0 0;
            float: left;
            background-color: white;
        }
        .box5{
            height: 30px;
            width: 20%;
            border-right: 1px solid #66cccc;
            float: left;
            text-align: center;
            margin: 0.469em 0;
        }
        .box6{
            outline: none;
            height: 100%;
            border: white;
            width: 79%;
            float: right;
            margin: 3px 0 0 0;
        }
        .box7 {
            height: 45px;
            width: 100%;
            margin: 8px 0 0 0;
            float: left;
            background-color: white;
        }
        .box8{
            height: 30px;
            width: 20%;
            border-right: 1px solid #66cccc;
            float: left;
            text-align: center;
            margin: 0.469em 0;
        }
        .box9{
            outline: none;
            height: 100%;
            width: 79%;
            float: right;
            margin: 3px 0 0 0;
        }
        .box10{
            width: 65px;
            height: 20px;
            margin: 10px 10px;
            float: right;
        }
        input{
            width: 90%;
            height: 81%;
            font-size: 17px;
            outline: none;
            border: none;
            padding-left: 20px;
        }
        a:link{
            a{
                color: #66cccc;
            }
        }
    </style>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
<div class="box1">注册</div>
<div class="box2">登陆</div>
<div class="box3">关闭</div>
<div class="box4">
    <div class="box5"><img src="image/ipone.png" width="20px" height="30px"></div>
        <div class="box6"><input type="text" maxlength="8" style="height: 80%" placeholder="请输入手机号"></div>
</div>
<div class="box7">
    <div class="box8"><img src="image/suo.png"width="20px" height="30px"> </div>
    <div class="box9"><input type="text" maxlength="8" style="height: 80%" placeholder="请输入密码"></div>
</div>
<div class="box10"> <a href="http://htmlpreview.github.io/?https://github.com/1947324563/start-a-project/blob/9c4c050c56913cd7811e59b62eaf42e5ef73c043/%E4%B9%9D%E5%AE%AB%E6%A0%BC.html"><p><span id="#66cccc">忘记密码</span></p></a></div>
</body>
</html>

该问题已被官方收录

为什么这个不能居中，而且css中用了 text-align: center

6

3

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

http://localhost:63342/task/html/task4.html?_ijt=3om3k0addkpda7pflumjsts7hj

该问题已被官方收录

在任务四的时候，在main下面的div标签，使用外边距会造成空白

1

3

属性

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

<body>
    <!-- ------------头部分开始-------------- -->
    <header>
        <span>关闭</span>
        <span style="font-size:18px; color:white;">登陆</span>
        <span>注册</span>
    </header>
    <!-- ----------头部分结束------------- -->
    <!-- ----------------中间部分开始------ -->
    <main>
        <div>
            <!-- 第一个雪碧图部分 -->
            <div class="phone"></div>
            <input placeholder="请输入手机号" type="text" maxlength="10">
        </div>
        <div>
            <!-- 第二个雪碧图部分 -->
            <div class="lock"></div>
            <input placeholder="请输入手机号" type="text" maxlength="10">
        </div>
        <button>
            <span>登  陆</span>
        </button>
        <a href="#">忘记密码？</a>
    </main>
</body>

</html>
body {
  font-size: 1.6rem;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 44px;
  background-color: #5FC0CD;
}

span {
  display: inline-block;
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 16px;
}

main {
  height: 57.6rem;
  background-color: #EFF0F4;
}

main div {
  height: 5rem;
  margin-top: 1rem;
  background-color: white;
}

main div + div {
  height: 5rem;
  margin-top: 1rem;
  background-color: white;
}

.phone {
  display: inline-block;
  width: 27px;
  height: 41px;
  margin-left: 2.1rem;
  margin-right: 2.3rem;
  background: url(./iphone.png);
  background-size: cover;
  zoom: .6;
  vertical-align: bottom;
}

.lock {
  display: inline-block;
  width: 27px;
  height: 41px;
  margin-left: 2.1rem;
  margin-right: 2.3rem;
  background: url(./locked2.png);
  background-size: cover;
  zoom: .6;
  vertical-align: bottom;
}

input {
  height: 22px;
  padding-left: 1.65rem;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  outline: none;
}

button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 5rem;
  margin-top: 3.45rem;
  border: 0;
  background-color: #5FC0CD;
  outline: none;
}

button span {
  font-size: 18px;
}

a {
  display: inline-block;
  margin-top: 8px;
  color: #5FC0CD;
  font-size: 18px;
  float: right;
  text-decoration: none;
}

该问题已被官方收录

input栏位宽度的自适应

2

3

布局表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html代码
<div class="password">
            <img src="img4/locked.png">
            <input type="password" name="password" placeholder="请输入密码" required class="pnb"/>
        </div>
css代码
.pnb{
    border-width:0;
    font-size: 0.32rem;
    outline: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.55rem;
    border: none;
    height: 1rem;
    width: 70%;    
}

该问题已被官方收录

图片不显示

4

2

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
    margin:0;
}


.header{
    position: fixed;
    width:100%;
    height:3rem;
    line-height: 3rem;
    text-align: center;
    background-color: #5fc0cd;
    color:#ffffff; 
    z-index: 1;
}
.back{
    position: absolute;
    left:1.5rem;
    top:0.7rem; 
}

该问题已被官方收录

p标签和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>homework</title>
    <link rel="stylesheet" href="work1.css">
</head>
<body>
    <header>
        <div class="word1">注册</div>
        <div class="word2" >登录</div>
        <div class="word3">关闭</div>
    </header>
</body>
</html>

该问题已被官方收录

在这副图上面，我的三个词语都是这样在上面的，想要让他们都保持居中

3

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

<body>
    <header>
        <span style="float: left;">关闭</span>
        <span>登陆</span>
        <span style="float:right;">注册</span>
    </header>
</body>

</html>





body{
    padding: 0;
    margin: 0;
}
span{
    margin: 0; 
}
header {
    width: 720px;
    height: 88px;
    padding: 0px;
    margin: 0px;
    background-color: #5fc0cd;
    text-align: center;
}
span{
    color: white;
    font-size: 20px; 
    display:inline-block;
   
}

该问题已被官方收录

input输入框如何随页面缩放而缩放？

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

<body>
    <div class="header">
        <p class="close">关闭</p>
        <p class="registe">注册</p>
        <p class="login">登录</p>
    </div>
    <form>
        <div class="user">
            <img src="images\iphone.png"/>
            <input type="text" placeholder="请输入手机号" name="tel" maxlength="11"/>
        </div>
        <div class="pw">
            <img src="images\locked 2.png"/>
            <input type="password" placeholder="请输入密码" name="password" />
        </div>
        <button class="login1" type="submit">登 录</button>
    </form>
    <button class="forget" type="button">忘记密码?</button>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    background: #eff0f4;
}
img {
    transform: scale(0.5);
    position: absolute;
    left: 1rem;
    margin-top: 1.1rem;
}

.header {
    background: #5fc0cd;
    color: white;
    font-size: 1rem;
    position: relative;
    top: 0;
    height: 4rem;
    line-height: 4rem;
}

.header .close {
    float: left;
    position: relative;
    left: 1rem;
}

.header .login {
    font-size: 1.125rem;
    text-align: center;
    position: relative;
    top: -0.1rem;
}

.header .registe {
    float: right;
    position: relative;
    right: 1rem;
}
.user, .pw {
    height: 5rem;
}
.user {
    background: white;
    height: 5rem;
    width: 100%;
    margin-top: 2rem;
}
.pw {
    background: white;
    height: 5rem;
    width: 100%;
    margin-top: 2rem;
}
input {
    outline-style: none;
    border: none;
    border-left-style: solid; 
    border-color: #eff0f4;
    font-size: 1.5rem;
    height: 3rem;
    width: 11rem;
    margin-top: 0.8rem; 
    margin-left: 4rem; 
    padding-left: 2rem;
}
input::-webkit-input-placeholder{
    color: #e1e5e7;
    font-size: 1rem;
}


.login1 {
    border-style: none;
    background: #5fc0cd;
    color: white;
    font-size: 1.125rem;
    margin-top: 5rem;
    height: 4rem;
    width: 100%;
}
.forget {
    outline-style: none;
    border-style: none;
    background: #eff0f4;
    color: #5fc0cd;
    font-size: 1rem;
    position: absolute;
    right: 4%;
}

该问题已被官方收录

手机图标和后面的输入框在缩小页面的时候，会变成两行

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
body{
    background:#eff0f4;
    width: 100%;
}
.headers{
    background:#68cdd5;
    color: white;
    height: 88px;
    line-height: 88px;
    text-align: center;
    margin-bottom: 15px;
}
.header-c{
font-size: 32px;
position: absolute;
left: 20px;

}
.header-l{
    font-size: 36px;
}
.header-r{
   font-size: 32px;
   position: absolute;
   right: 20px;
   top: 0;
}
.mains{
    background: white;
height: 100px;
}
.iphone{
    width: 100%;
    height: 41px;
    margin-top: 30px;
position: absolute;
left: 20px;
border-right: solid green;
display: inline-block;
}
.inputs{
    width: 100%;
outline: none;
border:none;
margin-left: 67px;
font-size: 32px;
margin-top: 34px;

}

</style>
</head>
<body>
    <header class="headers">
        <p class="header-c">关闭</p>
        <p class="header-l">登陆</p>
        <p class="header-r">注册</p>
    </header>
    <main class="mains">
        <span class="iphone">
            <img src="img2/iphone.png">
            <input type="text" name="" placeholder="请输入手机号" class="inputs">
        </span>

        <span>

        </span>
    </main>
</body>
</html>

该问题已被官方收录

在固定定位如何将子元素垂直居中

2

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header{
    position: fixed;
    background-color: #5fc0cd;
    text-align: center;
    padding: 10px 0px 10px 0px;
}
.register{
    color: white;
   float: left;
   padding-left:16px;
   font-size: 15px;
}
.Sign-in{
    color: white;
    text-align: center;  
    font-size: 20px;
}
.close{
    color:white;
    float: right;
    padding-right:10px;
 font-size: 15px;
}

去第页

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