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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

如何使空间不足导致文字隐藏时会出现小点

7

5

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

time {
  width: 3rem;
  height: .2rem;
  padding-left: .3rem;
  line-height: .2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: .1rem; }

该问题已被官方收录

如何不使用JS实现侧边导航栏隐藏与显示

3

5

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header></header>
<input id="menu" type="checkbox" name="">
<label class="menu" for="menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
</label>
<nav></nav><!--导航栏-->
<main></main>

https://ZZsuper.github.io/JS/TASK2/JS-TASK4-nav.css

该问题已被官方收录

webstorm连接github，怎么上传本地文件到github已经存在的远程仓

0

5

代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

不明白怎样才能不管一个字还是十几个字都能让文字处于绝对居中。

8

5

居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

*{margin: 0;padding: 0;}

html{height: 100%;}

body{
	color: white;
	font-size:125%;
}
.header{
	display: flex;
	align-items:center;
	background-color:#68cdd5; 
	padding: 2.5em 50%;
	width: 2%;
}
.header p{
	display: block;
	position:absolute;
}
.header p h2;{
	display: block;
}

该问题已被官方收录

使用inline-block会换行

2

4

九宫格

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">
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            width: 100%;
            padding-bottom: 100%;
        }
        
        .a {
            display: inline-block;
            width: 31%;
            padding-bottom: 31%;
            background-color: orange;
            margin: 1%;
            border-radius: 10%;
        }
    </style>
</head>

<body>
    <div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
    </div>
</body>

</html>

该问题已被官方收录

栅格系统分为12列,怎么分成5列?

5

4

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">  
  <div class="row">  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
  </div>

该问题已被官方收录

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>

该问题已被官方收录

为什么高度和宽度设置成一样的百分比，总是出不来应该有的效果？

5

4

布局盒子模型概念内外边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.swag{
  padding-left:31%;
  padding-bottom: 31%;
  margin:1%;
  border-radius: 20%;
  background: orange;
  float:left;
}

该问题已被官方收录

4

4

photoshop

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何触发鼠标点击事件

3

4

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="fathelement{
    display:none; //元素默认是隐藏的
}

//当鼠标经过兄弟元素brother-showing时，也就是经过父级father的时候。父级获得hover状态，在父级hover的基础上写element的样式：
.father:hover .element{
    display:block ;

去第页

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