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

连续英文文字断行

0

2

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

word-break: normal|break-all|keep-all;

父元素使用伪类hover时出现了子元素出现同样效果的问题

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

           <div class="col-xs-12  col-sm-12 col-md-5 main4-box">
                <div class="main4-icobox">
                    <div class="main4-ico1 main4-clearhover"></div>
                </div>
            </div>
.main4-box :hover {
    box-shadow: 0 0 1px #9E9E9E;
}

如何上下对齐

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;
}

横向的元素在纵向排列的时候，怎么保证居中

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/rocket.png">
            </div>
            <h4>高效</h4>
            <p class="col-p">将五到七年的成长时间，缩短到一年到三年。</p>
        </div>
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/archive.png">
            </div>
            <h4>规范</h4>
            <p class="col-p">标准的实战教程，不会走弯路。</p>
        </div>
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/Shape-253.png">
            </div>
            <h4>人脉</h4>
            <p class="col-p">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
        </div>

为什么表格给予宽度10%会有100%的效果

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

height: 40px;
    width:10%;
   padding-left: 18px;

如何在任务八中实现gird布局

0

1

管理工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

关于按钮的hover和focus状态

0

1

hover

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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/clearStyle.css">
	<title>demo</title>
	<style>
		nav.navbar { 
			min-height: 59px;
			background-color: #29b078;
		}
		button.navbar-toggle {
			margin-top: 10px;
			margin-bottom: 10px;
			border: none;
			background-color: #47D096;
		}
		.navbar-default .navbar-toggle:hover { background-color: #218C60; }
		.navbar-default .navbar-toggle:focus { background-color: #47D096; }
		.navbar-collapse {
			width: 100%;
			padding: 0;
			border: none;
		}
		.navbar-collapse ul.navbar-nav { margin: 0; }
		.navbar-collapse ul.navbar-nav li a {
			height: 40px;
			width: 100%;
			display: flex;
			color: #fff;
			font-size: 16px;
			border: none;
			background-color: #29b078;
		}
	</style>
</head>
<body>
	</header>
	<div class="navigate">
		<nav class="navbar navbar-default" role="navigation"> 
		    <div class="navbar-header">
		        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
		            <span class="sr-only">展开导航</span>
		            <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/menu.png"> 
		        </button>
		        <a class="navbar-brand" href="http://www.jnshu.com/"><div class="logo"></div></a>
		    </div>
		    <div class="collapse navbar-collapse" id="menu">
		        <ul class="nav navbar-nav">
		            <li class="active"><a href="#">首页</a></li>
		            <li><a href="#">职业</a></li>
		            <li><a href="#">推荐</a></li>
		            <li><a href="#">关于</a></li>
		        </ul>
		    </div>
		</nav>
	</div>
</body>
</html>

收缩分辨率的时候改变导航栏

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <header>
        <div class="coze ">
            <div class="phone">客服热线：010-594-78634</div>
            <div class="telephony">
                <div class="chat"></div>
                <div class="chew"></div>
                <div class="the"></div>
            </div>
        </div>
        <div class="tag">
            <div class="jinengshu"> 技能树</div>
            <div class="guanyu">
                <a href="#" class="zhiye">首页</a>
                <a href="#" class="zhiye">职业</a>
                <a href="#" class="zhiye">推存</a>
                <a href="#" class="zhiye">关于</a>
            </div>
        </div>
        <div class="mark"></div>
    </header>
    <main>
        <div class="tally">
            <span>首页></span>
            <span class="business">合作企业</span>

怎样不使用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>

table布局出了问题

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <!-- 第二行 -->
                        <tr class="p-two">
                            <td colspan="2" class="p-two-one">门槛 <img src="../img/xxx.png" /></td>
                            <td colspan="2" class="p-two-one">难易程度 <img src="../img/xxx.png" /> <img src="../img/xxx.png" /></td>
                        </tr>
                        <!-- 第三行 -->
                        <tr class="p-three">
                            <td colspan="2" class="p-two-one">成长周期 <span style="color: red;">1-3</span><span style="color: black;">年</span></td>
                            <td colspan="2" class="p-two-one">稀缺程度 <span style="color: red;">345</span><span style="color: black;">家公司需要</span></td>
                        </tr>
                        <!-- 第四行 -->
                        <tr class="p-four">
                            <td rowspan="3" class="p-four-one">薪资待遇</td>
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第五行 -->
                        <tr class="p-four">
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第六行 -->
                        <tr class="p-four">
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第七行 -->
                        <tr class="p-three">
                            <td colspan="4" class="p-seven-one">有<span style="color: red;">286</span>人在学</td>
                        </tr>
                        <!-- 第八行 -->
                        <tr class="p-three">
                            <td colspan="4" class="p-two-one">提示：在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</td>
                        </tr>
                    </table>