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"> 代码

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

css任务7的下拉框怎么做

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<select></select>

如何将 footer 保持在底部？

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

移动端与PC端适配

0

1

媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important;
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important;
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important;
    }
}

@media only screen and (min-width: 768px){
    html {
        font-size: 48px !important;
    }
}

@media only screen and (min-width: 1024px){
    html {
        font-size: 64px !important;
    }
}
@media only screen and (min-width: 1440px){
    html {
        font-size: 90px !important;
    }
}

底部边框要设置为透明色能看得到主体的内容，而且不影响子元素布局，如何设置。

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <footer class="footer-box">

        <a href="task7.html" class="one-more-game">
            <p>再来一局</p>
        </a>
        <a></a>
        <a href="task7.html" class="share-it">
            <p>上传分享</p>
        </a>

    </footer>

插入图片怎么填满父元素宽度且自适应?

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 .dropdown_ioc {
      background-image: url("2.png");
      background-color: rgb(41, 189, 224);
      display: none;
      position: absolute;
      bottom: -56px;
      width: 100%;
      height: 100%;
      background-size: cover;
      
  }

页面适配中单位的使用

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

:root {
    font-size: 20px;
}

一个块元素内放块元素设置margin，margin为什么会跑到框外？

1

盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.two {
    width: 100%;
    height: 312px;
    font-size: 0;
    background: #29BDE0;
}
.victory {
    margin: 12px auto 0;
    width: 176px;
    height: 103px;
    background: url(../image/victory1.png) 66.5px 13px/43px 42px no-repeat; 
}
.victory2 {
    padding-top: 66px;
    width: 176px;
    height: 103px;
    font-size: 23px;
    color: #FFFFFF;
    text-align: center;
    background: url(../image/victory2.png) 0 0/176px 103px;
    box-sizing: border-box;
}

自适应布局中，字体大小应该怎么处理？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  @media only screen and (max-width: 600px){
    .text-line {
      height: auto;
    }
  }