IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

不能完美实现正方形

2

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
	height: 100%;
	margin: 0;
	display: block;
	text-align: center;
}
html{
	
	height: 100%;
}
.hezi1{
	width: 30%;
	height: 30%;
	margin: 1%;
	border-radius: 15%;
	background-color: yellow;
	float: left;
}

怎么改变botstrap的自带样式

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.logo img >.navbar-brand {
    position: relative;
    left: -73vh;
    width: 90px;
    height: 40px;
}

css任务八第一个页面底部的链接

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <div class="container-fluid"style="padding: 0 10vw 0 10vw">
        <div class="row">
            <div class="col-xl main-five">
                <span></span>
                <a href="">手机软件</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">教师招聘</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">找工作</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">教师招聘</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">找工作</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">教师招聘</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">找工作</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">教师招聘</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">找工作</a>
            </div>
            <div class="col-xl main-five">
                <span></span>
                <a href="">教师招聘</a>
            </div>
        </div>
    </div>

select 旁边小图标点击无效，不能使用lable解决

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <div class="Selectionlr"   >
     <form  action="">
      <i class="icon8 "></i>
        <select>
        <option selected>所在地</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
             </select>
             
     </form>  
    </div>

怎么实现侧边栏的不用js实现点击隐藏跟显示？

0

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无

flash插入缓冲动画

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flash</title>
</head>
<style>
    embed{
        background-image: url("../image/onload.gif");
        background-repeat: no-repeat;
        background-position: center center;
    }
</style>
<body>
<div id="showPcFlash" class="dn" style="width: 100%; height: 400px; display: block; " width="100%" height="400">
    <embed id="gameFlash" class="flash" src="game1-zhangxaioqian.swf" style="LEFT: 0px; POSITION: absolute; TOP:0px"  quality="high" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="400">
</div>
</body>
</html>

间距，自适应

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修真院(jnshu.com)</title>
<style>
div.ex
{
width: 80px;
height: 80px;
background-color: orange;
margin:5px;
float:left
}
div.fx
{
width: 80px;
height: 80px;
background-color: orange;
margin:5px;
float:left
}
.text_line
{
    clear:both;
    margin-bottom:0px;
}

</style>
</head>
<body>

<div class="ex"></div>
<div class="ex"></div>
<div class="ex"></div>
<h3 class="text_line"></h3>
<div class="fx" ></div>
<div class="fx" ></div>
<div class="fx" ></div>
<h3 class="text_line"></h3>
<div class="fx" ></div>
<div class="fx" ></div>
<div class="fx" ></div>
</body>
</html>

怎样不使用Bootstrap来做一个响应式折叠导航栏，这东西怎么修改里面的属性啊

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

如何上下对齐

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.partner{
    padding-top: 20px;
    /*box-shadow: 1px 1px 1px lightgrey;*/
    width: 1200px;
    margin: 0 auto;
}
.partner1{
    text-align: center;
    padding-bottom: 20px;
}

.logo1 {
    display: inline-block;
    width: 18%;
}
.logo1 img{
    /*margin: auto 20px;*/
    width: 100%;
    height: 150px;
}
ul{
    padding:0;
}

旋转子元素div超出父元素

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 special">
              <div class="maintable">
                  <div class="top">
                      <img src="../img/student.png" alt="">
                      <div>
                          <div class="web">
                          <p class="title2"><b>Web前端工程师</b></p>
                          <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开 发。</p>
                      </div>
                      </div>
                  </div>
                  <div class="bottom">
                      <table border="1" class="hard">
                          <tr>
                              <td class="td1">
                                  <span class="detial">门槛</span><img src="../img/redstar.png" alt=""></td>
                              <td class="td1">
                                  <span class="detial">难易程度</span><img src="../img/redstar.png" alt=""> <img
                                      src="../img/redstar.png" alt=""></td>
                          </tr>
                          <tr>
                              <td class="td1"><span class="detial">成长周期</span><span class="detial1">1-3年</span></td>
                              <td class="td1"><span class="detial">稀缺程度</span> <span class="detial1">345</span>家公司需求</td>
                          </tr>
                          <tr>
                              <td rowspan="3" class="td2"><span class="detial">薪资待遇</span></td>
                              <td><span class="detial2">0-1年</span><span class="vage">5k-10k/月</span></td>
                          </tr>
                          <tr>
                              <td><span class="detial2">0-1年</span><span class="vage">5k-10k/月</span></td>
                          </tr>
                          <tr>
                              <td><span class="detial2">0-1年</span><span class="vage">5k-10k/月</span></td>
                          </tr>
                          <tr>
                              <td colspan="3" class="td1"><b>有</b><span class="detial1"><b>286</b></span><b>人正在学</b></td>
                          </tr>
                          <tr>
                              <td colspan="3" class="td1 "><span class="detial">提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</span></td>
                          </tr>
                      </table>
                  </div>
              <div class="transform">
                  <p>IOS工程师</p>
                  <p>OS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
                      于类Unix的商业操作系统。国内iOS开
                      发起步相对较晚，人才培养机制更是远
                      远跟不上市场发展速度。有限的iOS开
                      发人才成了国内企业必争的资源。国内 iOS开发起步相对较晚，人才培养机制
                      更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p>
              </div>
          </div>
          </div>


.maintable{
    position: relative;
}
.transform {
    color: white;
    text-align: center;
    padding: 40px 25px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.7;
    transition:width 2s, height 2s;
    -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
    -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
    display: none;
}
  .transform:hover
     {
      /*width:200px;*/
      /*height:200px;*/
      transform:rotate(360deg);
      -moz-transform:rotate(360deg); /* Firefox 4 */
      -webkit-transform:rotate(360deg); /* Safari and Chrome */
      -o-transform:rotate(360deg); /* Opera */
}

.special:hover .transform{
    display: block;
}