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

flex布局后文字会自动换行

1

2

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="whole">


<!-- 从业盒子第一行 -->
<div class="year">
<span>从业年限</span>
<i>0-3年</i>
</div>


<!-- 工作时间第二行 -->
<div class="worktime">
<span>工作时间</span>
<i>全天</i>
</div>


<!-- 服务价格第三行 -->
<div class="service">
<span>服务价格</span>
<a>25元/小时</a>
</div>



<!-- 自我介绍第四行 -->
<div class="my">
<span>自我介绍</span>
<i>可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富</i>
</div>

页面不能拉倒底？在宽屏下没有这个问题。

2

flex

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

https://github.com/bradmatt213/learngit/blob/master/task13-1.html
https://github.com/bradmatt213/learngit/blob/master/css/task13-2.css

下面那2行字不知道为什么垒起来了

2

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
    margin: 0;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #5fc0cd;
    height: 40px;
    font-size: 15px;
    color: white;
}

.head {
    width: 12px;
    padding-left: 10px;
}

.head1 {
    color: #5fc0cd;
}

.picture {
    display: flex;
    align-items: center;
    background: url(1.png);
    background-size: 100%;
    height: 145px;

}

.picture1 {}

.box1 {
    margin: 0 0 0 20px;
}

.fei {
    margin: 0 0 0 20px;
    width: 70px;
    height: 70px;
}
.zi {
    padding:0 0 10px 0 ;
    font-size: 14px;
    color: white;
}
.box {
    width: 11px;
    height: 11px;
    margin: 0 5px 0 0;
}
.font {
    font-size: 12px;
    color: white;
}
.Icolor{
    font-size:14px ; 
    color: #5fc0cd;
    margin:0 0 0 10px ;
}
.colour1{
    background-color:#ffffff;
}
.wire1{
    border-bottom: 1px solid #e1e5e7 ;
    height: 50px;
    display:flex;
    align-items:center;
}
.wire2{
    margin:0 0 0 15px ;
    font-size: 15px;
}
.wire3{
    border-bottom: 1px solid #e1e5e7 ;
    height: 50px;
    display:flex;
    align-items:center;
    margin: 0 0 0 18px;
}
.little{
    width:12px ;
    margin:0 12px 0 10px ;
}
.colour{
    font-size:14px ;
    color:#e1e5e7;
    margin: 0 0 0 12px;
}
.font1{
    margin:0 0 0 12px ;
    color:#e1e5e7;
    font-size:15px ; 
}
.colour2{
    font-size:14px ;
    color:#e1e5e7;
    margin: 0 12px 0 12px;
}
.font3{
   font-size: 10px;
}

<!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" href="four.css">
</head>
<body>
    <header class="header">
        <img class="head" src="5.png" >
        <div>个人主页</div>
        <div class="head1">></div>
    </header>
    <div class="picture">
    <div class="picture1">
    <img class="fei" src="01.png">
    </div>
    <div class="box1" > 
    <div class="zi">徐士林 55岁</div>
    <div class="font">
    <img class="box" src="2.png" > 
    <a>京城·四方·报纸林</a>
</div>
    </div class="">
    </div>
    <div></div>
    <div class="wire1">
      <a class="Icolor">|</a>  <a class="wire2">专业技能</a>
    </div>
    <div class="wire3">
     <img class="little" src="4 -4.png" >
     <div>住家</div>
     <div class="colour">|</div>
     <img class="little" src="4 -4.png" >
     <div>不含早餐</div>
    </div>
    <div class="wire3">
        <div class="font1">从业年限</div>
       <div class="colour2">|</div>
       <div >0~3年</div>
    </div>
    <div class="wire3">
        <div class="font1">工作时间</div>
        <div class="colour2">|</div>
        <div class="font3">全天</div>
    </div>
    <div class="wire3">
        <div class="font1">服务价格</div>
        <div class="colour2">|</div>
        <div class="font3" style= "color:red">25小时</div>
    </div>
    <div class="wire3">
        <div class="font1">自我介绍</div>
        <div class="colour2">|</div>
        <div class="font3">可以洗衣、做饭、照顾老人。在护工方面有5的年经验，经验丰富。
        </div>
    </div>
</div>
</body>
</html>

除了用bootstrap外有些什么方法做出这种下拉栏

2

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

。。。。

margin： auto为什么只能水平居中，不能垂直居中

1

2

通用

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>
    <style>
        .div {
            margin: auto;
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

轮播图的最后一张图切换到第一张图

0

2

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

annimation

连续英文文字断行

0

2

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

word-break: normal|break-all|keep-all;

sass无法同步

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  display: flex;
  flex-direction: row;


  margin: 0;
  background-color: rgba(240, 240, 240, 1);

  /*左拉菜单*/
  .menu {
    flex-basis: 55%;

    display: none;

    height: 6.2rem;
    font-size: .16rem;
    color: rgba(41, 189, 224, 1);
    background-color: #fff;


    ul {
      padding: 0;
      text-indent: 8px;
      list-style: none;


      li {
        line-height: 2.2;
        border-bottom: 1px solid rgba(225, 229, 231, 1);

        img {
          height: .22rem;
          vertical-align: -.05rem;
        }

        .menu-arrow {
          float: right;
          margin-top: .12rem;
          margin-right: .3rem;
          width: .1rem;
          height: .1rem;
          border-top: .02rem solid rgba(41, 189, 224, 1);
          border-right: .02rem solid rgba(41, 189, 224, 1);
          transform: rotate(45deg)
        }
      }
    }
  }

}

article {
  position: relative;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  
header {
  z-index: 5;
  width: 100%;
  height: .5rem;
  background-color: rgba(41, 189, 224, 1);

  .head-logo {
    position: relative;

    i {
      display: block;
    }

    .logo-line-1 {
      position: absolute;
      top: 17px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }

    .logo-line-2 {
      position: absolute;
      top: 33px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
    }
  }
}


  .last-game {
    position: relative;
    margin-top: .15rem;
    width: 92%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: .17rem;
    border: .01rem solid #C9C9C9;
    color: rgba(154, 154, 154, 1);
    background-color: #ffffff;

    i {
      position: absolute;
      top: 35%;
      right: 3%;
      width: .13rem;
      height: .13rem;
      border-top: .03rem solid rgba(231, 231, 231, 1);
      border-right: .03rem solid rgba(231, 231, 231, 1);
      transform: rotate(45deg)
    }
  }



  main {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 92%;
    height: 4.5rem;
    margin-top: .5rem;
    background-color: #ffffff;
    border: .01rem solid #C9C9C9;


    h3 {
      font-size: .12rem;
      color: #787878;
    }

    .game-begin {
      display: flex;
      height: 10%;
      width: 90%;
      justify-content: center;
      border-bottom: .01rem solid #FBB435;

      .game-btn {
        width: 100%;
        border-style: none;
        font-size: .19rem;
        outline: none;
        color: #FBB435;
        background-color: #fff;
      }
    }

    .edition {
      position: relative;
      margin-top: .2rem;
      width: 80%;
      height: 15%;
      outline: none;
      border-style: none;
      color: #fff;
      background-color: #69D1E9;
    }


    .arrow {
      position: absolute;
      right: -7px;
      top: 47%;
      height: 0;
      width: 0;
      border-width: 13px;
      border-style: solid;
      border-color: transparent transparent transparent #FBB435;
    }


    .bottom-circle {
      display: flex;
      height: .3rem;
      width: .6rem;
      justify-content: center;


      .circle {
        margin-left: .03rem;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background-color: #F0F0F0;

        &:hover {
          background-color: #69D1E9;
        }

      }

    }

  }

}

sass什么时候用？需要精通吗？

0

1

sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

如何修改radio单选按钮的样式

1

radio

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body{
      max-width: 1200px;
      margin: 20px auto;
    }
    [type="radio"]{
      border: 0;
      background: white;
    }
  </style>
</head>
<body>
  <input type="radio" name="1">选项一
  <br>
  <input type="radio" name="1">选项二
</body>
</html>