Page du parcours d'apprentissage de Vue

News 2023-08-02 01:23:06 views: null

1. Introduction

La page vue learning route est réalisée, le backend n'a pas été écrit pour le moment, et sera mis à jour ultérieurement.

2. Environnement logiciel

2.1 Code Visual Studio 1.75.0

navigateur chrome 2.2

2.3 nœud v18.14.0

3. Processus principal

3.1 Construire une structure HTML

3.2 Ajouter un style CSS

code 3.3 js

3.4 Affichage des pages

3.5 Code complet du composant vue

4. Étapes spécifiques

4.1 Créer une structure HTML

<div class="all">
    <!-- <div class="banner"><img src="@/static/img/learning_banner1.png" alt=""></div> -->

    <div class="content_one">
        <div class="left">
            <ul>
                <li>各科学习路线</li>
                <li>Java</li>
                <li>web前端</li>
                <li>大数据</li>
                <li>python</li>
                <li>物联网</li>
                <li>软件测试</li>
                <li>网络安全</li>
                <li>影视剪辑</li>
                <li>UI设计</li>
            </ul>
        </div>
        <div class="right">
            <div class="right-item">
                <div class="item-tittle item-tittle-one">
                    <div>第一阶段</div>
                    <div>Java基础</div>
                </div>
                <div class="item-content">
                    <div class="item">
                        <div class="model-2">Java语言核心基础</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">JavaSE</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Java集合框架</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Java多线程</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">JDK8新特性</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">J方法与数组</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">集合</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">多线程与并发</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">泛型</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">文件与IO</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">反射与内省</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">网络编程</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-2">Eclipse与异常处理</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">面向对象</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">常用类库API</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="right-item">
                <div class="item-tittle">
                    <div>第二阶段</div>
                    <div>Java进阶</div>
                </div>
                <div class="item-content">
                    <div class="item">
                        <div class="model-2">Mysql优化和原理</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-2">Ioc-Aop-整合MyBatis</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Mysql核心技术</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>

                    </div>
                    <div class="item">
                        <div class="model-1">JDBC</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Servlet</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">JSP</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">JavaScript</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">AJAX前后端交互</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">jQuery</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">bootstrap</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">HTML5</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">CSS3</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Nginx</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-2">bootstrap/layui</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Sentinel</div>
                    </div>
                </div>

            </div>
            <div class="right-item">
                <div class="item-tittle">
                    <div>第三阶段</div>
                    <div>Java高级</div>
                </div>
                <div class="item-content">
                    <div class="item">
                        <div class="model-1">Maven</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Git</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Mybatis</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">SpringMVC</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Log</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">Quartz</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">LayUI</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">SSM</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">UNIX</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Docker</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">MyBatis-Plus</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">PageHelper</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Shiro</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-2">Spring Security</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">Redis</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-2">iToken反向代理负载</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Zookeeper</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">CDN</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="right-item">
                <div class="item-tittle">
                    <div>第四阶段</div>
                    <div>Java实战</div>
                </div>
                <div class="item-content">
                    <div class="item">
                        <div class="model-1">锋迷商城案例</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">VUE实战案例</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-2">项目实战-MyShop</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">高级框架</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-2">微服务架构</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-2">Springboot框架</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Zookeeper</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-2">B/S 架构后台管理系统</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">Kafka集群实战</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-2">《卖淘乐》后台管理系统</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                    <div class="item">
                        <div class="model-1">微服务电商Java培训课程Java培训课程Java培训课程JVMJava培训课程信息管理系统</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">开放平台</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">阿里框架</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">JVM</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        <div class="model-1">信息管理系统</div>
                        <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <div class="content_two">



    </div>
</div>

4.2 Ajouter un style CSS

/* 初始配置 */
* {
    
    
margin: 0;
padding: 0;
}
ul,ol {
    
    
list-style: none;
}
img {
    
    
display: block;
}
a {
    
    
text-decoration: none;
}
h1,h2,h3 {
    
    
font-size: 16px;
}
body {
    
    
font-family: Arial, Helvetica, sans-serif;
}

/* 浮动 */
.l {
    
    
float: left;
}
.r {
    
    
float: right;
}
.clear::after {
    
    
content:"";
display: block;
clear: both;
}

/* 版心 */
.container {
    
    
width: 1080px;
margin: 0 auto;
position: relative;
}
/* 通栏 */
.container-fluid {
    
    
width: 100%;
}


.all {
    
    
width: 100%;
background-color: #F4F4F4;
padding-top: 20px;
}
.banner {
    
    
overflow: hidden;
}
.content_one {
    
    
width: 1120px;
margin: 0 auto;
margin-top: 0px;

display: flex;
overflow: hidden;
}
.left {
    
    
width: 200px;
background-color: #fff;
height: 430px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.left li:nth-child(1){
    
    
height: 47px;
background: #4c8bdc;
font-size: 20px;
color: #fff;
line-height: 47px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
padding-left: 0;
}
.left li{
    
    
overflow: hidden;
height: 40px;
font-size: 15px;
line-height: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-left: 20px;
}
.left li:nth-child(2) {
    
    
margin-top: 23px;
}


.right {
    
    
margin-left: 20px;
width: 900px;
height: 880px;
background-color: #fff;
border-radius: 15px;
margin-bottom: 20px;
}
.right-item {
    
    
width: 900px;
height: 210px;
border-bottom: 1px solid #C9CACA;;
display: flex;
}
.right-item-end {
    
    
width: 900px;
height: 210px;
display: flex;
}
.item-tittle {
    
    
width: 150px;
height: 210px;
background-color: #4c8bdc;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
overflow: hidden;
}
.item-tittle-one {
    
    
border-top-left-radius: 15px;
}
.item-tittle div:nth-child(1){
    
    
margin-top: 60px;
font-size: 15px;
color: #fff;
}
.item-tittle div:nth-child(2){
    
    
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.item-content {
    
    
padding-left: 25px;
padding-right: 25px;
}
.item {
    
    
margin-top: 10px;
height: 40px;
display: flex;
overflow: hidden;
}
.model-0 {
    
    
height: 40px;
width: 20px;
font-size: 13px;
line-height: 40px;
text-align: center;
padding-top: 10px;
background-color: #FFF;
}
.model-1 {
    
    
font-size: 13px;
height: 40px;
width: 120px;
line-height: 40px;
text-align: center;
background-color: #EDF3FB;
}
.model-2 {
    
    
font-size: 13px;
height: 40px;
width: 260px;
line-height: 40px;
text-align: center;
background-color: #EDF3FB;
}

code 4.3 js

Je n'ai pas encore écrit, je ne me suis pas encore connecté au backend, je mettrai à jour plus tard

4.4 Affichage des pages

insérez la description de l'image ici

4.5 Code complet du composant vue

<template>
    <div class="all">
        <!-- <div class="banner"><img src="@/static/img/learning_banner1.png" alt=""></div> -->

        <div class="content_one">
            <div class="left">
                <ul>
                    <li>各科学习路线</li>
                    <li>Java</li>
                    <li>web前端</li>
                    <li>大数据</li>
                    <li>python</li>
                    <li>物联网</li>
                    <li>软件测试</li>
                    <li>网络安全</li>
                    <li>影视剪辑</li>
                    <li>UI设计</li>
                </ul>
            </div>
            <div class="right">
                <div class="right-item">
                    <div class="item-tittle item-tittle-one">
                        <div>第一阶段</div>
                        <div>Java基础</div>
                    </div>
                    <div class="item-content">
                        <div class="item">
                            <div class="model-2">Java语言核心基础</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">JavaSE</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Java集合框架</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Java多线程</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">JDK8新特性</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">J方法与数组</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">集合</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">多线程与并发</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">泛型</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">文件与IO</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">反射与内省</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">网络编程</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-2">Eclipse与异常处理</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">面向对象</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">常用类库API</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="right-item">
                    <div class="item-tittle">
                        <div>第二阶段</div>
                        <div>Java进阶</div>
                    </div>
                    <div class="item-content">
                        <div class="item">
                            <div class="model-2">Mysql优化和原理</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-2">Ioc-Aop-整合MyBatis</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Mysql核心技术</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>

                        </div>
                        <div class="item">
                            <div class="model-1">JDBC</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Servlet</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">JSP</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">JavaScript</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">AJAX前后端交互</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">jQuery</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">bootstrap</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">HTML5</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">CSS3</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Nginx</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-2">bootstrap/layui</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Sentinel</div>
                        </div>
                    </div>

                </div>
                <div class="right-item">
                    <div class="item-tittle">
                        <div>第三阶段</div>
                        <div>Java高级</div>
                    </div>
                    <div class="item-content">
                        <div class="item">
                            <div class="model-1">Maven</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Git</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Mybatis</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">SpringMVC</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Log</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">Quartz</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">LayUI</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">SSM</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">UNIX</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Docker</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">MyBatis-Plus</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">PageHelper</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Shiro</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-2">Spring Security</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">Redis</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-2">iToken反向代理负载</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Zookeeper</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">CDN</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="right-item">
                    <div class="item-tittle">
                        <div>第四阶段</div>
                        <div>Java实战</div>
                    </div>
                    <div class="item-content">
                        <div class="item">
                            <div class="model-1">锋迷商城案例</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">VUE实战案例</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-2">项目实战-MyShop</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">高级框架</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-2">微服务架构</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-2">Springboot框架</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Zookeeper</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-2">B/S 架构后台管理系统</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">Kafka集群实战</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-2">《卖淘乐》后台管理系统</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                        <div class="item">
                            <div class="model-1">微服务电商Java培训课程Java培训课程Java培训课程JVMJava培训课程信息管理系统</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">开放平台</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">阿里框架</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">JVM</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                            <div class="model-1">信息管理系统</div>
                            <div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <div class="content_two">



        </div>
    </div>
</template>

<script>
    export default {
      
      
        
    }
</script>

<style scoped>
/* 初始配置 */
* {
      
      
  margin: 0;
  padding: 0; 
}
ul,ol {
      
      
  list-style: none;
}
img {
      
      
  display: block;
}
a {
      
      
  text-decoration: none;
}
h1,h2,h3 {
      
      
  font-size: 16px;
}
body {
      
      
  font-family: Arial, Helvetica, sans-serif;
}

/* 浮动 */
.l {
      
      
  float: left;
}
.r {
      
      
  float: right;
}
.clear::after {
      
      
  content:"";
  display: block;
  clear: both;
}

/* 版心 */
.container {
      
      
  width: 1080px;
  margin: 0 auto;
  position: relative;
}
/* 通栏 */
.container-fluid {
      
      
  width: 100%;
}


.all {
      
      
    width: 100%;
    background-color: #F4F4F4;
    padding-top: 20px;
}
.banner {
      
      
    overflow: hidden;
}
.content_one {
      
      
    width: 1120px;
    margin: 0 auto;
    margin-top: 0px;

    display: flex;
    overflow: hidden;
}
.left {
      
      
    width: 200px;
    background-color: #fff;
    height: 430px;
        border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.left li:nth-child(1){
      
      
    height: 47px;
    background: #4c8bdc;
    font-size: 20px;
    color: #fff;
    line-height: 47px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    text-align: center;
    padding-left: 0;
}
.left li{
      
      
    overflow: hidden;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding-left: 20px;
}
.left li:nth-child(2) {
      
      
    margin-top: 23px;
}


.right {
      
      
    margin-left: 20px;
    width: 900px;
    height: 880px;
    background-color: #fff;
    border-radius: 15px;
    margin-bottom: 20px;
}
.right-item {
      
      
    width: 900px;
    height: 210px;
    border-bottom: 1px solid #C9CACA;;
    display: flex;
}
.right-item-end {
      
      
    width: 900px;
    height: 210px;
    display: flex;
}
.item-tittle {
      
      
    width: 150px;
    height: 210px;
    background-color: #4c8bdc;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    overflow: hidden;
}
.item-tittle-one {
      
      
    border-top-left-radius: 15px;
}
.item-tittle div:nth-child(1){
      
      
    margin-top: 60px;
    font-size: 15px;
    color: #fff;
}
.item-tittle div:nth-child(2){
      
      
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.item-content {
      
      
    padding-left: 25px;
    padding-right: 25px;
}
.item {
      
      
    margin-top: 10px;
    height: 40px;
    display: flex;
    overflow: hidden;
}
.model-0 {
      
      
    height: 40px;
    width: 20px;
    font-size: 13px;
    line-height: 40px;
    text-align: center;
    padding-top: 10px;
    background-color: #FFF;
}
.model-1 {
      
      
    font-size: 13px;
    height: 40px;
    width: 120px;
    line-height: 40px;
    text-align: center;
    background-color: #EDF3FB;
}
.model-2 {
      
      
    font-size: 13px;
    height: 40px;
    width: 260px;
    line-height: 40px;
    text-align: center;
    background-color: #EDF3FB;
}
</style>

V. Questions

Je suppose que tu aimes

Origine blog.csdn.net/qq_45179361/article/details/129780271
conseillé
Classement
du quotidien
Plus
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(2)
2024-06-03(0)
2024-06-02(1)
2024-06-01(0)

Code World

© 2018 codetd.com