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

用fiexd定位

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: white;
}

下拉框内设置option的文字居中问题

0

1

居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.lie1 {
    position: fixed;
    top: 4.4rem;
    width: 100%;
}
.lie2 {
    display: flex;
}
.lie3 {
    display: flex;
    flex: auto;
    height: 4rem;
}

.lie4 {
    width: 100%;
    outline: none;
    text-align-last: center;
}
.lie5 {
    border: none;
}

 <div class="lie1">
        <div class="lie2">
            <div class="lie3">
                   
                <select class="lie4">
                    <option selected>所在地</option>
                    <option>北京</option>
                    <option>上海</option>
                    <option>深圳</option>
                </select>
            
            </div>
            <div class="lie3">
                
                <select class="lie4">
                    <option selected>食宿</option>
                    <option>米饭</option>
                    <option>面条</option>
                    <option>馒头</option>
                </select>
            
            </div>
            <div class="lie3">
                   
                <select class="lie4 lie5">
                    <option selected>病人情况</option>
                    <option>轻微</option>
                    <option>中等</option>
                    <option>重症</option>
                </select>
            
            </div>
        </div>
    </div>

关于按钮的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>

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>

swf文件在本地不能完全加载

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<embed src="game/pc1.swf" type="application/x-shockwave-flash" height="200" width="200">

hover效果导致footer上下跳动

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <h3 class="link-h">友情链接</h3>

    <section class="link-total">

        <div class="link-top">
            <ul class="link-fir">
                <li>手机软件</li>
                <li>手机软件</li>
            </ul>

            <ul class="link-sed">
                <li>教师招聘</li>
                <li>教师招聘</li>
            </ul>


            <ul class="link-thir">
                <li>找工作</li>
                <li>找工作</li>
            </ul>


            <ul class="link-for">
                <li>手机软件</li>
                <li>手机软件</li>
            </ul>


            <ul class="fif">
                <li>教师招聘</li>
                <li>教师招聘</li>
            </ul>

        </div>


        <div class="link-bottom">
            <ul class="link-fir">
                <li>手机软件</li>
                <li>手机软件</li>
            </ul>

            <ul class="link-sed">
                <li>教师招聘</li>
                <li>教师招聘</li>
            </ul>


            <ul class="link-thir">
                <li>找工作</li>
                <li>找工作</li>
            </ul>


            <ul class="link-for">
                <li>手机软件</li>
                <li>手机软件</li>
            </ul>


            <ul class="fif">
                <li>教师招聘</li>
                <li>教师招聘</li>
            </ul>


css：

.link-total {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #999999;
}


.link-top {
    display: flex;
    line-height: 2;
}

.link-bottom {
    display: flex;
    line-height: 2;
}


.link-total li:hover {
    border-bottom: 1.2px solid #29B078;
}

如何实现一列定宽，一列自适应

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="content">
    <div class="skill">专业技能</div>
    <ul class="condition">
        <li class="offer"><span>住家</span><img src="../img/white.png" alt=""><span>不含餐</span></li>
        <li class="time"><span class="year">从业年限</span><img src="../img/white.png"><span class="two">0-3年</span></li>
        <li class="time"><span class="year">工作时间</span><img src="../img/white.png"><span class="two">全天</span></li>
        <li class="time"><span class="year">服务价格</span><img src="../img/white.png"><span class="two red">25元/小时</span></li>
        <li class="time"><span class="one">自我介绍</span><img src="../img/white.png"><span class="two">可以洗衣做饭，照顾老人。在护工方面有5年经验，经验丰富</span></li>
    </ul>
</div>

如何清除下拉框的滚动条，还能滑动，使其达到更美观。

0

1

通用通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

filterBox {
    margin-top: 4.4rem;
    display: flex;
    color: #999;
    border-bottom: 1px solid #e1e5e7;
}

.one-filter,
.two-filter,
.three-filter {
    width: 33.3%;
    height: 4rem;
    line-height: 4rem;
    font-size: 1.2rem;
    text-align: center;
    border-right: 1px solid #e1e5e7;
    position: relative;
    cursor: pointer;
}

.city,
.Roomboard,
.patient-situation {
    overflow: auto;
    min-width: 100%;
    height: 20rem;
    display: none;
    position: absolute;
    background-color: #fbf7f7;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.one-filter:hover .city,
.two-filter:hover .Roomboard,
.three-filter:hover .patient-situation {
    display: block;
}

如何用CSS实现响应式导航栏

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, "Times New Roman", "Microsoft YaHei", SimSun, SimHei;
}


main {
    background-color: #fafafa;
}

   /* height: 50px;   神坑定高！下拉出不来   */
header {
}

.head-top {
    display: flex;
    justify-content: space-between;
}

/*客服热线*/
.tel {
    margin-top: 0.5%;
    margin-left: 2%;
    margin-top: 3px;
    font-size: 12px;
    color: #29B078;
}

/*微信微博qq图标*/
.head-img {
    margin-right: 2%;
}


.head-img img {
    width: 20px;
    margin-left: 8px;
}


/*加跳转链接*/
.head-text a {
    text-decoration: none;
    color: #ffffff;
}


.carousel-caption .text-4 a {
    text-decoration: none;
    color: #ffffff;
}


.navbar-nav .nav-item .nav-link {
    padding: 15px;
    border: 1px solid #26a26f;
}


.navbar-nav .nav-item .nav-link:hover {
    border-bottom: 1px solid white;
}



/*下面是轮播图的Boot4组件*/

/*这个类，组件里自带了absolute，我这里修改的是文字上移的位置*/
.carousel-caption {
    bottom: 32% !important;
}

/* Make the image fully responsive 让图片全屏展示*/
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel-inner .text {
    text-align: center;
    font-weight: bold;
    font-size: 2.5vw;
    color: #ffffff;
}

.carousel-inner .text-2 {
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 2px;
    color: #ffffff;
}

.carousel-inner .text-2 span {
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #ffffff;
}


.carousel-inner .text-3 {
    text-align: center;
    font-weight: bold;
    font-size: 6.5vw;
    font-family: MicrosoftJhengHei;
    color: #ffffff;
}


.carousel-inner .text-4 {
    text-align: center;
    font-size: 5.5vw;
    font-family: MicrosoftJhengHei;
    letter-spacing: 2px;
    color: #ffffff;
}



.container.intro {
    margin-bottom: 120px;
}


h3 {
    padding-bottom: 35px;
    text-align: center;
}

.link-h {
    padding-bottom: 5px;
    text-align: center;
}


main .row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
}


.container.intro .col-lg-3.col-md-6 {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding: 29px;
}


.container.intro .col-lg-3.col-md-6.adjust {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding-left: 80px;
    border-left: 1px solid rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6.adjust:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .pic {
    text-align: center;
}


.container.intro .pic-2 {
    /* margin-top: 25px; */
    text-align: center;
}


.container.intro .pic-3 {
    margin-top: 15px;
    text-align: center;
}


.container.intro .count-people-adjust {
    margin-top: 40px;
}


.container.intro .pic img {
    width: 40px;
}

.container.intro .pic-2 img {
    width: 40px;
}


.container.intro .pic-3 img {
    width: 40px;
}

webstrom创建sass时出现问题

0

1

sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本