[成都|内门弟子]JS-韦骁|2022年09月26日的日报-技能树.IT修真院

发表于： 2022-09-26 21:35:46

0 452

遗留的问题：z-index和叠加上下文

对于z-index和叠加上下文：简单来说就是一块显示玻璃中z-index的级别越高越优先的显示，来覆盖住级别低的z-index。

例如：

此处技能树的优先级别就比背景的级别高，所以覆盖住背景。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

这将在 Bootstrap CSS 部分详细讲解。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

这将在 Bootstrap 插件部分详细讲解。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

今天开始任务八的示图：

css代码：


* {
    margin: 0;
    padding: 0;
}

.box {
    height: 100vh;
    background-color: #fafafa;
    margin: 0 auto;
}

ul {
    list-style-type: none;
    width: 200px;
    background-color: #29b078;
    float: right;
    margin-right: 20%;
}

li {
    width: auto;
    display: inline-block;
    margin-top: 40%;
    margin-right: 3%;
    font-size: 16px;
    color: #ffffff;

}

.head {
    height: 39px;
    width: auto;
}

.head p {
    font-size: 14px;
    color: #29b078;
    margin: 1% 0 0 15%;
}

.chart {
    width: auto;
    margin-right: 15%;
}

.icon {
    float: right;
    margin-top: -1%;
    margin-left: 1%;
}

.navigation {
    background-color: #29b078;
    height: 100px;
}

.content {
    width: 100%;
    height: 100%;
    position: relative;

}

.image {
    margin-top: -12px;
    width: 100%;
    height: auto;
}

.word1 {
    font-size: 40px;
    color: #ffffff;
    position: absolute;
    top: 4%;
    left: 25%;
}

.word2 {
    font-size: 100px;
    color: #ffffff;
    position: absolute;
    top: 8%;
    left: 12%;
}

.word3 {
    font-size: 60px;
    color: #ffffff;
    position: absolute;
    top: 8%;
    left: 35%;
}

.ellipse1 {
    position: absolute;
    top: 26%;
    left: 45%;

}

.ellipse2{
    position: absolute;
    top: 26%;
    left: 47%;

}

.ellipse3 {
    position: absolute;
    top: 26%;
    left: 49%;

}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=720,initial-scale=1">
    <link rel="stylesheet" href="homepage.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div class="head">
        <p>客服热线:010-594-78634</p>
        <div class="chart">
            <img class="icon" src="tupian/图层%201.png">
            <img class="icon" src="tupian/图层%202.png">
            <img class="icon" src="tupian/图层%203.png">
        </div>
    </div>
    <div class="navigation">
        <ul>
            <li>首页</li>
            <li>职业</li>
            <li>推荐</li>
            <li>关于</li>
        </ul>
    </div>
    <div class="content">
        <img class="image" src="tupian/Image.png">
        <p class="word1">作为你一个初级菜鸟，你是否想要了解</p>
        <p class="word2">50万</p>
        <p class="word3">年薪的程序员，都会那些技能呢？</p>
        <img class="ellipse1" src="tupian/椭圆%207%20拷贝.png">
        <img class="ellipse2" src="tupian/椭圆%207%20拷贝.png">
        <img class="ellipse3" src="tupian/椭圆%207%20拷贝.png">
    </div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>