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

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

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>

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

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

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>

连续英文文字断行

0

2

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

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>

怎么让任务9中合作企业那一栏的文字和圆点同时触发hover效果？

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="jz">
                            <span class="circle-text">
                                <div class="circle"></div>
                                阿里巴巴
                            </span>
                            <span class="circle-text">
                                <div class="circle"></div>
                                腾讯视频
                            </span>
                            <span class="circle-text">
                                <div class="circle"></div>
                                北京葡萄藤
                            </span>

bootstrap,导航栏组的颜色怎么更改?

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <!--nav-->
        <div class="container-fluid  nav-container">
            <div class="row">
                <div class="col-sm-8 offset-sm-2">
                    <nav class="navbar navbar-expand-sm navbar-dark" style="padding:0">
                        <a class="navbar-brand" href="#">
                         <img style="width:20rem" src="home-logo-hs.png" />
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#collapsiblejnshu">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="collapsiblejnshu">
                            <ul class="navbar-nav justify-content-end" style="width:100%">
                                <!--链接组(导航组)-->
                                <li class="nav-item">

                                    <a class="nav-link nav-a" href="task8-1.html">首页 </a>
                                    <div class="nav-li"></div>

                                    <!--链接-->
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link nav-a" href="../task8.1.3/task8-3.html">职业</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link nav-a" href="../task8.1.3/task8-3.html">推荐</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link nav-a" href="../task8.1.2/task8-2.html">关于</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
/*nav样式*/
.nav-container {
    background-color: rgb(41, 176, 120);
    color: white;
}

.nav-a {
    font-size: 1.7rem;
    padding: 20px 0 20px 10px;

}

.nav-item:hover .nav-li {
    visibility: visible;
}

.nav-li {
    visibility: hidden;
    border-bottom: 1px solid white;

}