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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

用ul 去实现均匀布局盒子

0

1

表单元素属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul{
    float: left;
    text-decoration: none;
    list-style-type: none;
    /*margin: 0;*/
    padding-left: 10px;
    /*border: 0;*/




}
.card> li{
    float: left;
    width: 20%;
    height: 20%;
    text-align: center;
    border: 4px solid white;
    margin: 5% 5% 8% 7%;

该问题已被官方收录

不加float，会竖向排列。加上float，会萎缩塌陷

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            background: #29bde0;
        }

        .header {
            width: 100%;
            height: 60px;
            line-height: 60px;
            position: fixed;
            z-index: 1;
            top: 0;
        }

        .headers {
            text-align: center;
            font-size: 22px;
            color: white;

        }

        .headersImage {
            position: absolute;
            bottom: -5px;
            left: 30px;
        }

        .headersImg {
            position: absolute;
            bottom: -5px;
            right: 30px;
        }

        .circle {
            height: 52px;
            width: 52px;
            border-radius: 50%;
            background: #fbb435;
            position: absolute;
            right: 100px;
            top: 9px;
        }

        .message-box {
            position: relative;
            top: 60px;
            width: 100%;
            height: 70px;
            line-height: 70px;
            background: #b9e9f5;
            /*box-shadow:1px 1px 1px #b9e9f5;*/
            /*border:1px solid #C9E9C0;*/
            /*border-radius:4px;*/
            padding-left: 50px;
            font-size: 20px;
            color: #5e5e5e;
        }

        .triangle-border {
            position: absolute;
            /*left:40px;*/
            /*overflow:hidden;*/
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            bottom: -20px;
            border-color: #b9e9f5 transparent transparent transparent;
            /*border-color:#b9e9f5 ;*/
        }

        .wordOne {
            color: white;
            font-size: 18px;
            margin-top: 75px;
            margin-left: 50px;
        }

        /*div.container div.row div {*/
        /*margin-top: 60px;*/
        /*line-height: 60px;*/
        /*height: 60px;*/
        /*background-color: white;*/
        /*border: 1px solid #696969;*/
        /*text-align: center;*/
        /*}*/

        .mains {
            /*width: 588px;*/
            /*height: 196px;*/
            text-align: center;
            float: left;

        }

        .blocksLeft {
            width: 25%;
            height: 20vw;
            background-color: #f5c97b;
            margin: 30px 30px 0 30px;
            border-width: 4px 4px 0 4px;
            border-style: solid;
            border-color: white;
            position: relative;

        }
        .blocksLe {
            width: 25%;
            height: 5vw;
            background-color: #83b09a;
            margin: 0 30px 30px 30px;
            border-width: 0 4px 4px 4px;
            border-style: solid;
            border-color: white;
            position: relative;
        }

        .blocks {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;

        }

        .blocksRight {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;
            float: right;
        }

        .blocksOne {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #5e5e5e;
            font-size: 20px;
        }

        .blocksTwo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 18px;
        }

        .threeTable {
            text-align: center;
            font-size: 21px;
            color: #9C9C9C;
            height: 58px;
            line-height: 58px;
        }

该问题已被官方收录

图片只出现在第一个方框的左上

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码



html： 



html

<div class="father">
	<div class="cont1">
		<p class="text1">水民</p>
		<p class="text2">1号</p>
	</div>
	<div class="picture">
		<img src="投票.png" alt="投票.png">
	</div>
</div>
<div class="father">
	<div class="cont1">
		<p class="text1">水民</p>
		<p class="text2">1号</p>
	</div>
	<div class="picture">
		<img src="投票.png" alt="投票.png">
	</div>
</div>

该问题已被官方收录

图片和文本没有对齐

1

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <header>
        <div class="left">
            <a href="../html/css7-home.html">
                <img src="../img/home.png" alt="">
            </a>
        </div>
        <div class="middle">
            <span>游戏结果</span>
        </div>

该问题已被官方收录

关于Buton的一个疑问

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.btn-left,
.btn-right {
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
}
.btn-right {
    float: right;
    margin-right: 1rem;
}
.btn-left {
    float: left;
    margin-left: 1rem;
}

该问题已被官方收录

audio标签定义音频时,自动播放属性无效;

0

1

audio播放器

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>demo</title>
</head>
<body>
    <h4>演示音频</h4>
    <audio src="horse.ogg" controls autoplay></audio>
</body>
</html>

css任务7的下拉框怎么做

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<select></select>

任务七的第二页是否可以使用css来画右上角的叉

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.wire {
    margin-top: 2px;
    margin-left: -4px;
    width: 13px;
    border-bottom: 2px solid #ffffff;   
}

如何将 footer 保持在底部？

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    flex: 0 0 auto;
}
.main{
    flex: 1 0 auto;
}
.footer{
    flex: 0 0 auto;
}

在header中运用absolute出现的问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.triangle {
    width: 0;
    height: 0;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent;
    margin: 10px auto;
}

去第页

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