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>

除了用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>

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

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

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

0

2

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

annimation

下面那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>

连续英文文字断行

0

2

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

除了弄个盒子加margin-left设置底边框做成这样的样式还有其他方法吗。

0

1

背景图片属性边距定位属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.home {
    width: calc(100% - 1.65rem);
    height: 5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 1.65rem;
    border-bottom: 1px solid #e1e5e7;
}

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

input按钮选中问题‘

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <div class="gaizibox duik">
                                        <input type="radio" id="rd1" name="sex" />
                                        <label for="rd1">对口箱子</label>
                                    </div>


                                    <div class="gaizibox">
                                        <input type="radio" id="rd2" name="sex" />
                                        <label for="rd2">飞机盒</label>
                                    </div>


                                    <div class="gaizibox">
                                        <input type="radio" id="rd3" name="sex" />
                                        <label for="rd3">天地盖</label>
                                    </div>