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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

导航栏没有居右，下拉菜单也没居中。

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="navbar navbar-expand-md bg-green navbar-dark">
      <a class="navbar-brand" href="#">修真院</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav float-right">
          <li class="nav-item active ">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">职业</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link " href="#"> 推荐 </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">关于</a>
          </li>
        </ul>
      </div>
    </nav>

该问题已被官方收录

创建合并分支时，add文件出现错误

1

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

在九宫格里面些写字，但是无法让字体变大，如果变大的话，就没有办法来维持九宫格了

4

1

九宫格

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>Document</title>
</head>
<link rel = "stylesheet" type = "text/css" href = "b.css"></link>

<body>
    <div class="one">佟</div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
  
</body>
</html>

.one{
    width:31.3%;
    float: left;
    background-color:orange;
    padding-top:31.3%;
    margin: 1%;   
}

该问题已被官方收录

如何只使用CSS来写一个侧边导航栏

1

1

侧边栏

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 user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task7-2.css">
</head>
<body>
<header>
    
</header>
</body>
</html>

该问题已被官方收录

如何自适应，如何让九宫格在分辨率变小时不换行

2

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

九宫格

该问题已被官方收录

版本选择页面右边的小三角是相对于整个白框存在,使用绝对定位发现无法垂直居中

1

1

定位居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="div2-2">
        <img  class="img-1-2" src="../img/css7/css7-1-2.png">
        <button class="button1">简化版</button>
        <span class="span2">有1133个用户正在玩此款游戏</span>
        <button class="button1">猜词版</button>
        <span class="span2">有1133个用户正在玩此款游戏</span>
        <button class="button1">白痴版</button>
        <span class="span2">有1133个用户正在玩此款游戏</span>
    </div>

.img-1-2 {
    transform: scale(.5);
    position: absolute;

    right: 0;
    margin-right: 1%;


.div2-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 100%;

该问题已被官方收录

session保留在不同的web服务器下，结果不一样

0

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

对某一元素同时设置了 hover 和a 有时会出现两条下滑线有时只出现一条

1

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<a href="task8-2.html" ><div>合作企业</div></a>
<a href="task8-1.html"><div class="titlle1">首页</div></a>

该问题已被官方收录

0

1

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-md-6 col-lg-4 main-box">
                <div class="main-box-tow">
                    <div class="hide-box">
                        <span class="hide-title">iOS工程师</span>
                        <p class="hind-font">iOS是由苹果公司开发的移动操作系统， iOS和苹果的Mac OS X操作系统一样， 也是以Darwin为基础的， 因此同样属于类Unix的商业操作系统。 国内的iOS开发起步相对较晚， 人才培养机制更是远远跟不上市场发展速度，
                            有限的iOS开发人才成了国内企业必争的资源。 国内的iOS开发起步相对较晚， 人才培养机制更是远远跟不上市场发展速度， 有限的iOS开发人才成了国内企业必争的资源。
                        </p>



.hide-box {
    position: absolute;
    padding: 5rem 12% 2rem 12%;
    text-align: center;
    line-height: 2rem;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all 2s;
    transform: rotate(0deg);
}

.hide-title {
    display: none;
    text-align: center;
    line-height: 8rem;
}

.hind-font {
    display: none;
    text-align: left;
}

.main-box-tow:hover .hide-box {
    /* display: block;  */
    transform: rotate(360deg);
    color: #fff;
    background: rgba(16, 16, 16, 0.8);
}

.main-box-tow:hover .hide-title {
    display: inline-block;
}

.main-box-tow:hover .hind-font {
    display: inline-block;
}

该问题已被官方收录

能不能利用纯css自动轮播和点击轮换效果同时出现

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<section class="slider-contaner">
    <div class="banner-arrow">
        <a href="#a01" class="banner-left"></a>
        <a href="#" class="banner-right"></a>
    </div>
    <ul class="slider">
        <li id="a01" class="slider-item slider-item1"></li>
        <li class="slider-item slider-item2"></li>
        <li class="slider-item slider-item3"></li>
        <li class="slider-item slider-item4"></li>
        <li class="slider-item slider-item5"></li>
    </ul>
    <div class="focus-container">
        <ul class="floatfix">
            <li><div class="focus-item focus-item1"></div></li>
            <li><div class="focus-item focus-item2"></div></li>
            <li><div class="focus-item focus-item3"></div></li>
            <li><div class="focus-item focus-item4"></div></li>
            <li><div class="focus-item focus-item5"></div></li>
        </ul>
    </div>
</section>

/*css reset end*/

/*github展示统一样式start*/
a {
    text-decoration: none;
    color: #fff;
}
/*css public start*/
.floatfix {
    *zoom: 1;
}
.floatfix:after {
    content: "";
    display: table;
    clear: both;
}

/*css public end*/

/*slider start*/
.slider-contaner {
    width: 100%;
    position: relative;
}
.slider-item + .slider-item {
    opacity: 0;
}
.slider-item {
    width: 100%;
    position: absolute;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
    background-size: 100%;
}
.focus-container {
    position: absolute;
    z-index: 7;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.focus-container li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    background: #fff;
}
.focus-item {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
}
.focus-item2, .focus-item3, .focus-item4, .focus-item5 {
    opacity: 0;
}
.focus-container ul {
    margin-left: 46%;
}

/*设置轮播焦点的位置*/
.focus-container {
    bottom: 2%;
}

/*设置当前图片焦点的颜色*/
.focus-item {
    background: #51B1D9;
}

/*设置动画，请根据实际需要修改秒数*/
.slider-item, .focus-item {
    animation-duration: 20s;
}
.slider-item1, .focus-item1 {
    animation-delay: -1s;
}
.slider-item2, .focus-item2 {
    animation-delay: 3s;
}
.slider-item3, .focus-item3 {
    animation-delay: 7s;
}
.slider-item4, .focus-item4 {
    animation-delay: 11s;
}
.slider-item5, .focus-item5 {
    animation-delay: 15s;
}
@keyframes fade {
    0% {
        opacity: 0;
        z-index: 2;
    }
    5% {
        opacity: 1;
        z-index: 1;
    }
    20% {
        opacity: 1;
        z-index: 1;
    }
    25% {
        opacity: 0;
        z-index: 0;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

/*设置背景，响应式请利用媒体查询根据断点修改路径*/
.slider-item1 {
    background-image: url(backimage1.png);
}
.slider-item2 {
    background-image: url(backimage2.png);
}
.slider-item3 {
    background-image: url(backimage1.png);
}
.slider-item4 {
    background-image: url(backimage2.png);
}
.slider-item5 {
    background-image: url(backimage1.png);
}

/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
.slider, .slider-item {
    padding-bottom: 30%;
}

去第页

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