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

如何用css做一个导航栏

0

1

表单元素属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

                        <button class="menu">
                            <div class="across"></div>
                            <div class="acr"></div>
                            <div class="across"></div>
                        </button>
    .menu {
        display: flex;
        flex-direction: column;
        border-style: none;
        outline: none;
        border-radius: 4px;
        margin-right: 1.8rem;
        padding: 5px;
        background-color: rgb(238, 235, 235);
    }
    .across {
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .acr {
        margin: 2px 0;
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .menu:hover .gps {
        display: block;
    }

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

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

任务13的侧边栏按钮如何做，代码更省更规范；

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   <header class="header-box">

        <input type="checkbox" id="sidemenu">

        <aside class="g-position">
            <ul class="sideul">
                <li>
                    <img src="../image/side-icon.png">公告<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">设置<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">帮助<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">关于<img src="../image/side-back.png">
                </li>
            </ul>
        </aside>
        <label for='sidemenu'></label>
        <!-- 侧滑按钮图片 -->
        <img src="../image/侧滑.png" class="cehua-botton g-position">
    </header>

如何上下对齐

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;

九宫格

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

div {
    width:30% ;
    padding-bottom:30% ;
    /* border-radius 意思是给图形加圆角 */
    border-radius:20% 
    background-color:rgb(221, 159, 43);
    float:left;
    margin:1%
     height
    
    }

不使用bootstrap的组件库自己写折叠导航栏；

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="row" id="header-second">
                <div class="header-second-one">
                    <img src="./www.jnshu.com.png" alt="">
                </div>
                <div class="header-second-twe">
                    <form>
                        <button type="button"><img src="./heengxian.png" alt=""></button>
                        <input type="radio"name="nav" value=""><a href="./task9-1.html">首页</a>
                        <input type="radio" name="nav" value=""><a href="./task9-1.html">职位</a>
                        <input type="radio"name="nav" value=""><a href="./task9-1.html">推荐</a>
                        <input type="radio" name="nav" value=""><a href="./task9-1.html">首页</a>
                    </form>
                </div>
            </div>
        </div>

用fiexd定位

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

sass使用&引用父元素无效

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 ul{
            position: absolute;
            line-height:2;
            width: 100%;
            display: none;
            list-style-type: none;
            overflow: hidden;
            text-align: center;
            box-shadow: 0px 0px 0.8px 0.8px #dedede;
            background-color: white;
            &:hover{display: block;}
                li{
                    text-align: center;
                    font-size: 14px;
                    width: 100%;
                }
            
        }