Página de la ruta de aprendizaje de Vue

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

1. Introducción

La página de la ruta de aprendizaje de vue está realizada, el backend no se ha escrito por el momento y se actualizará más adelante.

2. Entorno de software

2.1 Código de Visual Studio 1.75.0

navegador chrome 2.2

2.3 nodo v18.14.0

3. Proceso principal

3.1 Construir estructura html

3.2 Agregar estilo css

código 3.3 js

3.4 Visualización de página

3.5 Código completo del componente vue

4. Pasos específicos

4.1 Construir estructura 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 Agregar estilo 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;
}

código 4.3js

Aún no he escrito, aún no me he conectado al backend, se actualizará más tarde

4.4 Visualización de página

inserte la descripción de la imagen aquí

4.5 Código completo del componente 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. Preguntas

Supongo que te gusta

Origin blog.csdn.net/qq_45179361/article/details/129780271
Recomendado
Clasificación
Diario
Más
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)

Code World

© 2018 codetd.com