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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

bootstrap如何引用cdn

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

这里需要下载吗，下载了都是些什么东西

该问题已被官方收录

子元素为行内元素不在父元素内

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.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任务六</title>
    <link rel="stylesheet" type="text/css" href="task6.css">
</head>

<body>
    <header>
        <button class="btn">找雇主</button>
        <button class="btn">招护工</button>
    </header>
</body>

</html>

html{
    font-size: 625%; 
}
body{
    margin: 0;
    
}
header{
    position: fixed;
    top: 0;
    text-align: center;
    height: .64rem;
    width: 100%;
    background-color: #5fc0cd;   
}
.btn{
    font-size: 16px;
    color: #ffffff;
    background-color: #55a8b3;
    border-radius: 7px;  
    padding: .1rem .2rem .1rem .13rem;  
    border: none;
    outline:none
}

该问题已被官方收录

为什么我首页的右边黄色三角用absolute定位不准确

2

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.icon3 {
    background-image: url(sanjiao.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 5rem;
    width: 3rem;
    transform: scale(0.5);
    position: absolute;
    right: 5%;
    top: 53%;
}

该问题已被官方收录

如果使用bootstrap的折叠模拟下拉菜单，如何让他在一次点击事件只显示一个？

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.second-line {
    padding-right: 30px;
}
#downlist {
    list-style: none;
}
.down-line {
    position: relative;
    display: inline-block;
    margin: 10px auto; 
}
.down-line ul {
    position: absolute;
    z-index: 1;
    width: 100%;
}
.down-line button {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    border: 2px solid #f2f2f2;
    font-size: .14rem;
    color: #999999;
}
/* 右侧下拉图标 */
.down-line button p {
    display: inline-block;
    width: 22px;
    height: 26px;
    margin-left: 25px;
    border-radius: 5.5%;
    background: #1d7ad9;
}
.down-line button p::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 6px;
    border-top: 6px solid white;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent; 

}
/* 下拉选框样式 */
#downlist {
    border: 1px solid #f2f2f2;
    border-top: none;  
}
#downlist li {
    padding-top: 5px;
    padding-bottom: 5px; 
    background: white;
}
#downlist a {
    color: #888888 !important;
    text-decoration: none;
}
#downlist li:hover {
    background: #f2f2f2;
}

<div class="row forth-line align-items-center">
                    <div class="col-sm-10">
                        <input class="circlebox" type="radio" id="material1" name="boxtype">
                        <label for="material1">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material2" name="boxtype">
                        <label for="material2">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material3" name="boxtype">
                        <label for="material3">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material4" name="boxtype">
                        <label for="material4">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material5" name="boxtype">
                        <label for="material5">三层A瓦优质</label>
                    </div>
                    <div class="col-sm-2 text-right">
                        <div class="down-line">
                            <button data-toggle="collapse" data-target="#downlist3">
                                查看详情
                                <p></p>
                            </button>
                            <ul id="downlist3" class="collapse text-center">
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

该问题已被官方收录

能不能在把hover写在一块

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
			<div class="row text-left">
				<div class="col-md-3 first">
						<div class="squ"></div>
						<div class="cir">1</div>
						<div class="text-font">1.定制纸箱</div>
				</div>

.first {
	padding: 20px 0;
}
.squ {
	background-color: #ccc;
  	height: 5px;
  	width: 100%;
  	border-radius: 2px;
}
.cir {
	text-align: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #ccc;
	position: relative;
	top: -15px;
	left: 40%;
	color: #fff;
}
.text-font {
	text-align: center;
	color: #ccc;
}
.first:hover .squ {
	background-color: #ff7f02;
}
.first:hover .cir {
	background-color: #ff7f02;
}
.first:hover .text-font {
	color: #ff7f02;
}

该问题已被官方收录

雪碧图问题

1

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="dropdown">
                <span class="role">水民</span>
                <span class="number">1号</span>
                <ul class="dropdown-content">
                    <li class="knife"></li>
                    <li class="find"></li>
                    <li class="sight"></li>
                    <li class="cure"></li>
                </ul>
            </div>

该问题已被官方收录

input标签小圆点的改变

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{margin:0;height:100%;}
ul{margin:0;}
button{border:0;outline: none;}
button:hover{outline: none;}
.fl{float: left;}
.fr{float:right;}
.clear{clear: both;}
html{font-size: 312.5%;}

@media screen and (max-width:767px) {
    .nav_ul{float: none!important;}
    .nav_ul li{padding-right:.3rem;}
    main{width: 100% !important;}
    .center{width:90%!important;}
    .xz_box {display: flex;
         flex-direction: column;
    }
    .subnav{margin: auto!important; }
    .ft-right{float: none !important;}
    .xz_box label{display:flex;}
}
@media screen and (min-width:768px){
    .flex-end{
        display: flex;
        justify-content: flex-end;
    }
    .xz_box {    display: flex;
        align-items: center;
        justify-content: flex-start;
        height:.4rem;
   }
  
}
@media screen and (min-width:1024px){ .ft-right{
    float: right;
}}

header{
    width:100%;
    background-color: #1d7ad9;
    height:.4rem;
}
header p{color:white;}
.center{width:62.5%;margin: 0 auto;}
.sign{
    display:inline-block;
    width:.8rem;
    height: 0.38rem;
    font-size: .16rem;
    background-color: #1d7ad9;
    border-left:0.2rem white soild;
    text-align: center;
    vertical-align:middle;
    color:white;
}
.sign:hover{
    width:1.6rem;
    color:#1d7ad9;
    background-color: white;
    border-left: 1px solid white;
    text-align: center;
    vertical-align: center;
}
.navbar-nav{margin:0;}
.nav button{
    width: 100%;
    font-size:.16rem;
    padding:.1rem;
    line-height: 15px;
    vertical-align: center;
    background-color: white;
    border:1px solid #e1e5e7;
    border-radius:5px;
}
.nav_ul button:hover{
    background-color:#1d7ad9;
}
.nav_ul {
    float:right;
    padding-right: none;
}
.nav_ul li{
   padding-left:.3rem;
}
.navbar-collapse{
    padding:0;
    line-height:1rem;
    vertical-align: middle;
}
.yuan{
    position:absolute;
    top:-.15rem;
    left:50%;
    display: block;
    border-radius: 50%;
    width:.3rem;
    line-height:.3rem;
    text-align: center;
    transform:translate(-50%,0);
    background-color: #d4d4d4;
    color: white;
}
.subnav{
    position: relative;
    border-top:.06rem solid #d4d4d4;
    width:1.4rem;
    height:1rem;
    font-size: .18rem;
    color:#CCC;
}

.subnav p{
    text-align: center;
    height:1rem;
    line-height: 1rem;
    vertical-align: middle;
}
.subnav:hover{
    border-top:.06rem solid #f1a750;
    color: #f1a750;
}
.subnav:hover  .yuan{
background-color: #f1a750;
}
.navfont{
    font-size: .22rem;
    color:#333;
}
.Vertical{
    margin-right:.06rem;
  height: .22rem;
  border-left:.04rem  #1D7AD9 solid;
  }

  .table_nav{
    width: 100%;
    height:.46rem;
    font-size: .18rem;
    line-height:.46rem;
    vertical-align: center;
    background-color:#E6E6E6;
    color: #1d7ad9;
    border: 1px #E8E8E8 solid;
}
.box{
    width:.18rem;
    height:.14rem;
    margin:0 .18rem;
}
.sel {
    border:.02rem solid  #E8E8E8;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("./images/xl.png") no-repeat scroll right  transparent;
    padding: .1rem .5rem .1rem .1rem;
    font-size:.14rem;
    position: absolute;
    top:50%;
    right:.2rem;
    transform:translate(0,-50%);
    color:#999;
}
.table-main{
    position: relative;
    background-color: #FBFCFF;
    padding:.36rem .2rem;
    border: 1px #E8E8E8 solid;
}
.table-input{
    margin: 0 .16rem;
    width:.7rem;
    height:.3rem;
}
form span{
    margin-left: .1rem;
    font-size: .18rem;
    color:#666;
}
.xz_box input{margin:0;}
.xz_box label{display:flex;margin:0;align-items: center;font-weight: normal;font-size: .16rem;}
.option-radio{
    opacity: 0;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.pay_list_c1 {
    width: .32rem;
    height:.32rem;
    cursor: pointer;
    background-image: url(images/nocheack.png);
    background-repeat: no-repeat;
    background-position: -24px 0;
    }
    .on {
background-position: 0 0;
        }
        .pay_list_c1:hover{ background-image: url(images/input.png);}
.main_btn{
    display:flex;
    justify-content:center;
    align-items:center;
    height:2.86rem;
    border: 1px #f1f1f1 solid;
}
.main_btn button{
    width: 1.8rem;
    height:.46rem;
    font-size:.24rem;
    background-color: #e15053;
    color:white;
    border-radius:2px;
}
footer{
    margin-top: 1.2rem;
    position: relative;;
    bottom:0;
    width: 100%;
    background-color:#e1e5e7;
    font-size: .16rem;
}
footer a{
    color:#a8a8a8;
}
.footer_box {
    margin:.6rem 0;
    line-height:.16rem;
    text-align:left;
    color:#a8a8a8;
}
.footer_bottom{
    width: 100%;
    font-size: .14rem;
    background-color: #1d7ad9;
    text-align: center;
    color: white;
}
.erweima{
    float:right;
    width:.92rem;
    height:.92rem;
}
.ft-right{
    width:3.5rem;
}

该问题已被官方收录

页面背景鼠标点击后左右摇摆。

2

1

背景图片属性布局通用属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
    margin: 0;
}
header{
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 64px;
    color: #F8F8F8;
    text-align: center;
    background-color: #5FC0CD;
}
.arrow{
    position: absolute;
    top: 50%;
    margin-top:-9px;
    left: 17px;
    height: 13px;
    width: 13px;
    border-left: 3px solid #F8F8F8;
    border-bottom: 3px solid #F8F8F8;
    transform: rotate(45deg);
}
main{
    position: absolute;
    top: 64px;
    margin: 0;
    width: 100%;
}
.background{
    position: absolute;
    height: 163px;
    width: 100%;
    background-image: url('../img/bj.png');
    background-size: 100% 101%;
    background-repeat: no-repeat;
}
.photo{
    position: absolute;
    top: 39px;
    left: 15px;
    height: 84px;
    width: 84px;
}
.data{
    position: absolute;
    top: 58px;
    left: 120px;
    width: 96px;
    height: 44px;
    color: #FFFFFF;
}
.name{
    position: absolute;
    top: 0;
    left: 0;
}
.age{
    position: absolute;
    right: 0;
    bottom: 26px;
    font-size: 12px;
}
.landmark{
    position: absolute;
    bottom: 0;
    left: 0;
}
.address{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 10px;
}
ul{
    position: absolute;
    top: 163px;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
.skill{
    position: absolute;
    width: 100%;
    height: 49px;
    border-bottom: 1px solid #E1E5E7;
    line-height: 49px;
    color: #333333;
}
.line{
    position: absolute;
    top: 18px;
    left: 15px;
    width: 2px;
    height: 13px;
    background-color: #5FC0CD;
}
.major{
    position: absolute;
    left: 29px;
}
.condition{
    position: absolute;
    top: 50px;
    margin-left: 5%;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #E1E5E7;
    line-height: 50px;
}
.star{
    position: absolute;
    top :19px;
    left: 31px;
}
.live{
    position: absolute;
    left: 47px;
    color: #333333;
}
.lline{
    position: absolute;
    top: 18px;
    left: 88px;
    width: 1px;
    height: 13px;
    background-color: #E1E5E7;
}
.stars{
    position: absolute;
    top: 19px;
    left: 97px;
}
.meal{
    position: absolute;
    left: 113px;
    color: #333333;
}

<!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>
    <link rel="stylesheet" type="text/css" href="../CSS/taskthree.css">
</head>
<body>
    <header>
        <a class="arrow" href="https://1239937890.github.io/mywork/task1/html/task1.html"></a>
        <h3>个人主页</h3>
    </header>
    <main>
        <div class="background">
            <img class="photo" src="../img/tx.png">
            <div class="data">
                 <span class="name">高素雅</span>
                 <span class="age">51岁</span>
                 <a class="landmark" href="https://1239937890.github.io/mywork/task1/html/task1.html">
                     <img src="../img/dh.png"></a>
                 <span class="address">北京.通州.果园</span>
            </div>
        </div>
        <ul>
             <li class="skill">
                 <span class="line"></span>
                  <span class="major">专业技能</span>
             </li>
             <li class="condition">
                 <img class="star" src="../img/xx.png">
                 <span class="live">住家</span>
                 <span class="lline"></span>
                 <img class="stars" src="../img/xx.png">
                 <span class="meal">不含餐</span>
             </li>
             <li class="time">
                  <span class="employment"></span>
                  <span class="llline"></span>
                  <span class="three"></span>
             </li>
             <li class="work">
                 <span class="work-time"></span>
                 <span class="linee"></span>
                 <span class="day"></span>
             </li>
             <li class="service">
                 <span class="price"></span>
                  <span class="lineee"></span>
                  <strong class="element"></strong>
             </li>
             <li class="self">
                 <span class="introduce"></span>
                 <span class="lineeee"></span>
                 <span class="laundry"></span></span>
             </li>
        </ul>
     </main>
     <footer>

     </footer>
</body>
</html>

该问题已被官方收录

请问可以用少于9个div标签实现css1的效果？

2

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</body>

该问题已被官方收录

css画的竖分隔符渐变色到手机变宽

0

1

盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  border-image: linear-gradient(#fff, #e2e6e7, #fff) 4;
    border-left: solid 0.06rem;

去第页

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