html阿里云网页练习实现代码

zoukankan html css js c++ java

html阿里云网页练习实现代码

html

<body>

    

    <div class="guding">

        <p>

            <a href="#">点我提问</a>

        </p>

        <p>

            <a href="#">8</a>

        </p>

    </div>

    <header>

        

        <div>

            <div>

                <a href="#"><img src="../IMG/TBheader_logo.png" alt="logo"></a>

                <nav>

                    <a href="#">控制台</a>

                    <a href="#">备案</a>

                    <a href="#">登陆</a>

                    <a href="#">注册有礼</a>

                </nav>

            </div>

        </div>

        

        <div class="daohang">

            <a href="#"><img src="../IMG/TB1B5cJLXXXXXbVaXXXXXXXXXXX-400-168.jpg" alt="logo"></a>

            <nav>

                <input type="text" placeholder="在此输入您要的服务">

                <a href="#">搜索</a>

                <p>

                    <a href="#">PHP运行环境</a>

                    <a href="#">JAVA运行环境</a>

                    <a href="#">全能环境</a>

                    <a href="#">linux环境配置</a>

                    <a href="#">数据迁移</a>

                    <a href="#">清除木马</a>

                    <a href="#">微网站</a>

                </p>

            </nav>

            <p>

                <a href="#">发布定制需求<i></i></a>

                <a href="#">管理我的服务</a>

            </p>

        </div>

        

        <div class="daohang2">

            <p>

                <a href="#">云市场分类</a>

                <a href="#"><i></i></a>

            </p>

            <p>

                <a href="#">基础软件</a>

                <a href="#">代维&amp服务</a>

                <a href="#">网站建设</a>

                <a href="#">企业应用</a>

                <a href="#">云安全</a>

                <a href="#">数据及API</a>

            </p>

            <p>

                <a href="#">保障</a>

                <a href="#"><i></i></a>

                <a href="#">服务商入驻</a>

            </p>

        </div>

    </header>

    <article>

        

        <div>

            

            <div class="zhuti1">

                <div class="zhuti1-1">

                    <div>

                        <a href="#">精美模板</a>

                        <a href="#">企业展示</a>

                        <a href="#">电子商务</a>

                    </div>

                    <div>

                        <a href="#">网站定制</a>

                        <a href="#">企业官网</a>

                        <a href="#">电商网站</a>

                        <a href="#">手机网站</a>

                        <a href="#">移动APP</a>

                        <a href="#">社区论坛</a>

                        <a href="#">信息门户</a>

                        <a href="#">精选建站</a>

                    </div>

                    <div>

                        <a href="#">网站素材设计</a>

                        <a href="#">LOGO设计</a>

                        <a href="#">海报设计</a>

                    </div>

                    <div>

                        <a href="#">网站服务</a>

                        <a href="#">网站改版</a>

                        <a href="#">店铺代运营</a>

                    </div>

                    <div>

                        <a href="#">个性化网站定制</a>

                        <a href="#">查看攻略</a>

                        <a href="#">提交需求</a>

                    </div>

                </div>

                <div class="zhuti1-2">

                    <img src="../IMG/TB15PQ5OXXXXXb7XpXXXXXXXXXX-1200-300.jpg" alt="logo"></div>

            </div>

            

            <p>

                找商品·轻松挑

            </p>

            <div class="zhuti2">

                <dvi class="zhuti2-1">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">精美模板</a>

                    </span>

                </dvi>

                <dvi class="zhuti2-2">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">官网定制</a>

                    </span>

                </dvi>

                <dvi class="zhuti2-3">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">电商网站</a>

                    </span>

                </dvi>

                <dvi class="zhuti2-4">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">手机网站</a>

                    </span>

                </dvi>

                <dvi class="zhuti2-5">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">移动APP</a>

                    </span>

                </dvi>

                <dvi class="zhuti2-6">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">素材设计</a>

                    </span>

                </dvi>

                <dvi class="zhuti2-7">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">信息门户</a>

                    </span>

                </dvi>

                <dvi class="zhuti2-8">

                    <span>

                        <a href=""><i></i></a>

                        <a href="#">社区论坛</a>

                    </span>

                </dvi>

            </div>

            

            <div class="zhuti3">

                <span>1F企业官网定制

                    <span>提供量身定制的建站服务，设计师专人对接，服务流程全程监管</span>

                </span>

                <span>

                    <a href="#">发布叮嘱需求</a>

                    <a href="#">更多官网方案&gt</a>

                </span>

            </div>

            <div class="zhuti4">

                <div>

                    <div>

                        <img src="../IMG/TB1yvfuHVXXXXaXXXXXwu0bFXXX.png" alt="logo">

                    </div>

                    <div>

                        <a href="#">企业官网定制</a>

                    </div>

                </div>

                <div class="zhuti4-1">

                    <a href="#">云·定制企业官网</a>

                    <a href="#">【双十一销冠】【建站市场最佳选择奖】</a>

                    <div>

                        <a href="#"><i></i></a>

                        <img src="../IMG/TB1HG.uOXXXXXXmaFXXXXXXXXXX-380-266.jpg" alt="logo">

                        <a href="#"> <i></i></a>

                    </div>

                </div>

                <div class="zhuti4-2">

                    <a href="#">企业建站</a>

                    <a href="#">PC+手机+微信三站合一</a>

                    <img src="../IMG/TB1GwwiOXXXXXaVapXXXXXXXXXX-240-108.jpg" alt="logo">

                    <a href="#">企业官网自助版</a>

                    <a href="#">傻瓜式后台，可视化操作</a>

                    <img src="../IMG/TB1sGfyNVXXXXXbXVXXXXXXXXXX-213-105.png" alt="logo">

                </div>

                <div class="zhuti4-2">

                    <a href="#">企业建站</a>

                    <a href="#">PC+手机+微信三站合一</a>

                    <img src="../IMG/TB1GwwiOXXXXXaVapXXXXXXXXXX-240-108.jpg" alt="logo">

                    <a href="#">企业官网自助版</a>

                    <a href="#">傻瓜式后台，可视化操作</a>

                    <img src="../IMG/TB1sGfyNVXXXXXbXVXXXXXXXXXX-213-105.png" alt="logo">

                </div>

            </div>

            <div class="tupian">

                <img src="../IMG/TB1eriAHVXXXXc6XVXXO8z25XXX-1200-90.png" alt="logo">

            </div>

            <p>

                服务商推荐

            </p>

            <div class="zhuti5">

                <div>

                    <img src="../IMG/TB1aB3MHVXXXXbMXpXXwu0bFXXX.png" alt="logo">

                    <a href="#">北京云梦网络科技有限公司</a>

                    <a href="#">基于云计算的企业网站建设专家</a>

                </div>

                <div>

                        <img src="../IMG/TB14LSPIpXXXXXYXFXXwu0bFXXX.png" alt="logo">

                        <a href="#">杭州飞色网络科技有限公司</a>

                        <a href="#">基于云计算的企业网站建设专家</a>

                </div>

                <div>

                        <img src="../IMG/TB1EUoMHVXXXXb0XpXXSutbFXXX.jpg" alt="logo">

                        <a href="#">广州友慧网络科技有限公司</a>

                        <a href="#">基于云计算的企业网站建设专家</a>

                </div>

                <div>

                        <img src="../IMG/TB14C51IFXXXXc8XpXX0p7L0VXX-396-240.png" alt="logo">

                        <a href="#">陕西畅通网络科技有限公司</a>

                        <a href="#">基于云计算的企业网站建设专家</a>

                </div>

                <div>

                        <img src="../IMG/TB1Ei1wNVXXXXasXFXXXXXXXXXX-110-50.jpg" alt="logo">

                        <a href="#">长沙海商网络科技有限公司</a>

                        <a href="#">基于云计算的企业网站建设专家</a>

                </div>

            </div>

        </div>

    </article>

</body>

</html>

css

/* 固定浮动栏样式 */

.guding {

    38px;

    height: 81px;

    position: fixed;

    right: 0px;

    top: 304px;

}

.guding>p:first-child {

    border: 1px solid rgb(127, 211, 231);

    margin: 0px;

    padding: 0px 3px;

}

.guding>p:first-child>a {

    font-size: 14px;

    color: rgb(0, 167, 208);

    text-decoration: none;

}

.guding>p:last-child>a {

    color: rgb(255, 255, 255);

    text-decoration: none;

}

.guding>p:last-child {

    margin: 5px 0px 0px 0px;

    padding: 9px 15px;

    background-color: rgb(255, 138, 0);

}

/* 导航一样式 */

header>div:first-child {

    background-color: rgb(55, 61, 65);

}

header>div:first-child>div {

    1200px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    background-color: rgb(55, 61, 65);

}

header>div:first-child>div>a>img {

    64px;

    height: 15px;

    margin-top: 9px;

}

header>div:first-child>div>nav>a {

    font-size: 12px;

    color: rgb(248, 255, 255);

    text-decoration: none;

}

header>div:first-child>div>nav>a:last-child {

    display: inline-block;

    padding: 9px 40px;

}

header>div:first-child>div>nav>a {

    display: inline-block;

    padding: 9px 0px;

}

header>div:first-child>div>nav>a:nth-child(4):hover {

    background-color: rgb(0, 193, 222);

}

header>div:first-child>div>nav>a:not(:nth-child(4)):hover {

    color: rgb(0, 193, 222);

}

header>div:first-child>div>nav>a:not(:last-child) {

    margin-right: 26px;

    display: inline-block;

}

/* 导航二样式 */

.daohang {

    1200px;

    height: 100px;

    margin: auto;

    display: flex;

    justify-content: space-between;

}

.daohang>a>img {

    100px;

    height: 41px;

}

.daohang>a {

    display: inline-block;

    margin-top: 21px;

}

.daohang>nav>input {

    578px;

    padding: 0px 5px;

}

.daohang>nav>a {

    font-size: 12px;

    text-decoration: none;

    color: rgb(103, 103, 103);

    padding: 5px;

}

.daohang>nav>a:hover {

    background-color: rgb(0, 193, 222);

}

.daohang>nav {

    margin-left: 100px;

    margin-top: 20px;

}

.daohang>nav>p {

    margin: 7px 0px 18px 0px;

}

.daohang>nav>p>a {

    font-size: 12px;

    color: rgb(103, 103, 103);

    text-decoration: none;

    margin-left: 9px;

}

.daohang>p>a {

    font-size: 12px;

    text-decoration: none;

    color: rgb(0, 193, 222);

    border: 1px solid rgb(0, 193, 222);

    display: inline-block;

    padding: 4px 3px;

}

.daohang>p>a:hover {

    text-shadow: -1px 1px 2px rgb(199, 202, 224);

}

.daohang>p>a>i {

    display: inline-block;

    12px;

    height: 7px;

    background-image: url("../IMG/index_01.png");

    background-position: -1171px -64px;

}

/* 导航三样式 */

.daohang2 {

    1200px;

    margin: auto;

    /* border: 1px solid red; */

    display: flex;

    justify-content: space-between;

}

.daohang2>p:first-child>a {

    font-size: 18px;

    text-decoration: none;

    display: inline-block;

    color: rgb(255, 255, 255);

}

.daohang2>p:first-child>a:first-child:hover {

    background-color: rgb(0, 175, 202);

}

.daohang2>p:first-child>a:last-child>i {

    display: inline-block;

    11px;

    height: 11px;

    background-image: url("../IMG/index_01.png");

    background-position: -333px -131px;

}

.daohang2>p:first-child>a:last-child {

    display: inline-block;

    margin-left: 115px;

}

.daohang2>p:first-child {

    240px;

    height: 23px;

    margin: 0px;

    padding: 11px 9px 11px 13px;

    background-color: rgb(0, 193, 222);

}

.daohang2>p:nth-child(2)>a {

    font-size: 16px;

    color: rgb(0, 0, 0);

    text-decoration: none;

}

.daohang2>p:nth-child(2)>a:hover {

    color: rgb(15, 135, 218);

    text-shadow: -1px 1px 2px rgb(199, 202, 224);

}

.daohang2>p:nth-child(2)>a:not(:first-child) {

    margin-left: 36px;

    display: inline-block;

}

.daohang2>p:nth-child(2)>a:last-child {

    margin-right: 60px;

}

.daohang2>p:nth-child(3)>a:nth-child(2)>i {

    display: inline-block;

    21px;

    height: 21px;

    background-image: url("../IMG/index_01.png");

    background-position: -1205px -129px;

    position: relative;

    bottom: -5px;

}

.daohang2>p:nth-child(3),

.daohang2>p:nth-child(2) {

    margin-bottom: 0px;

    position: relative;

    top: -8px;

}

.daohang2>p:nth-child(2) {

    margin-top: 20px;

}

.daohang2>p:nth-child(3)>a {

    font-size: 16px;

    text-decoration: none;

    color: rgb(15, 135, 218);

}

.daohang2>p:nth-child(3)>a:hover {

    text-shadow: -1px 1px 2px rgb(199, 202, 224);

}

.daohang2>p:nth-child(3)>a:first-child {

    margin-right: 23px;

}

/* 主题样式 */

article {

    background-color: rgb(248, 248, 248);

}

article>div:first-child {

    1200px;

    /* height: 500px; */

    margin: auto;

    /* border: 1px solid red; */

}

/* 第一段样式 */

.zhuti1-1 {

    262px;

    float: left;

}

.zhuti1-2 {

    float: right;

}

.zhuti1 {

    overflow: hidden;

}

.zhuti1>div:first-child {

    background-color: rgb(0, 193, 222);

}

.zhuti1 a {

    font-size: 12px;

    color: rgb(255, 255, 255);

    text-decoration: none;

    padding: 5px 5px 4px 4px;

}

.zhuti1-1>div>a:first-child,

.zhuti1-1>div:nth-child(2)>a:nth-child(4),

.zhuti1-1>div:nth-child(2)>a:nth-child(7),

.zhuti1-1>div:nth-child(3)>a:nth-child(3),

.zhuti1-1>div:nth-child(5)>a:nth-child(3) {

    margin-left: 10px;

}

.zhuti1-1>div:first-child {

    padding: 7px 0px;

    border-top: 1px solid rgb(120, 222, 238);

    border-bottom: 1px solid rgb(120, 222, 238);

}

.zhuti1-1>div:nth-child(2),

.zhuti1-1>div:nth-child(3),

.zhuti1-1>div:nth-child(4) {

    padding: 7px 0px;

    border-bottom: 1px solid rgb(120, 222, 238);

}

.zhuti1-1>div:first-child>a {

    margin-right: 16px;

}

.zhuti1-1>div:nth-child(2)>a:first-child,

.zhuti1-1>div:nth-child(2)>a:nth-child(2) {

    margin-right: 16px;

}

.zhuti1-1>div:nth-child(2)>a:nth-child(3) {

    margin-right: 20px;

}

.zhuti1-1>div:nth-child(2)>a:nth-child(6) {

    margin-right: 55px;

}

.zhuti1-1>div:nth-child(3)>a:nth-child(2) {

    margin-right: 70px;

}

.zhuti1-1>div:nth-child(5)>a:nth-child(2) {

    margin-right: 80px;

}

.zhuti1-1>div:nth-child(5) {

    padding-top: 8px;

    padding-bottom: 44px;

}

.zhuti1 a:hover {

    background-color: rgb(0, 175, 202);

}

.zhuti1-2>img {

    938px;

    height: 300px;

}

/* 第二段样式 */

article>div>p:first-child {

    font-size: 18px;

    color: rgb(0, 0, 0);

    margin-top: 12px;

    margin-bottom: 7px;

}

.zhuti2 {

    display: flex;

    justify-content: space-around

}

.zhuti2-1>span,

.zhuti2-2>span,

.zhuti2-3>span,

.zhuti2-4>span,

.zhuti2-5>span,

.zhuti2-6>span,

.zhuti2-7>span,

.zhuti2-8>span {

    display: flex;

    flex-direction: column;

}

.zhuti2-1>span>a>i {

    display: inline-block;

    63px;

    height: 45px;

    background-image: url("../IMG/TB1oP6tHFXXXXXUapXXAAT2HVXX-63-63.png");

    background-position: 0px -10px;

}

.zhuti2-2>span>a>i {

    display: inline-block;

    60px;

    height: 44px;

    background-image: url("../IMG/TB1XNwNHpXXXXa1XVXXAAT2HVXX-63-63.png");

    background-position: -1px -10px;

}

.zhuti2-3>span>a>i {

    display: inline-block;

    63px;

    height: 44px;

    background-image: url("../IMG/TB1woESHpXXXXXSXpXXAAT2HVXX-63-63.png");

    background-position: 0px -11px;

}

.zhuti2-4>span>a>i {

    display: inline-block;

    63px;

    height: 44px;

    background-image: url("../IMG/TB11GsPHpXXXXciXFXXAAT2HVXX-63-63.png");

    background-position: 0px -9px;

}

.zhuti2-5>span>a>i {

    display: inline-block;

    63px;

    height: 44px;

    background-image: url("../IMG/TB1t.ARHpXXXXb0XpXXAAT2HVXX-63-63.png");

    background-position: 0px -8px;

}

.zhuti2-6>span>a>i {

    display: inline-block;

    63px;

    height: 44px;

    background-image: url("../IMG/TB1KGwUHpXXXXaOXXXXAAT2HVXX-63-63.png");

    background-position: 0px -11px;

}

.zhuti2-7>span>a>i {

    display: inline-block;

    63px;

    height: 44px;

    background-image: url("../IMG/TB17s7UHpXXXXa1XXXXAAT2HVXX-63-63.png");

    background-position: 0px -10px;

}

.zhuti2-8>span>a>i {

    display: inline-block;

    63px;

    height: 46px;

    background-image: url("../IMG/TB1F6wPHpXXXXboXFXXAAT2HVXX-63-63.png");

    background-position: 0px -10px;

}

.zhuti2-1 a:last-child,

.zhuti2-2 a:last-child,

.zhuti2-3 a:last-child,

.zhuti2-4 a:last-child,

.zhuti2-5 a:last-child,

.zhuti2-6 a:last-child,

.zhuti2-7 a:last-child,

.zhuti2-8 a:last-child {

    font-size: 14px;

    color: rgb(102, 102, 102);

    text-decoration: none;

    margin-top: 13px;

    margin-left: 3px;

}

.zhuti2-1 a:hover,

.zhuti2-2 a:hover,

.zhuti2-3 a:hover,

.zhuti2-4 a:hover,

.zhuti2-5 a:hover,

.zhuti2-6 a:hover,

.zhuti2-7 a:hover,

.zhuti2-8 a:hover {

    color: rgb(68, 175, 255);

}

.zhuti2-1 a>i:hover {

    background-image: url("../IMG/TB1Zm2YHFXXXXaBaXXXAAT2HVXX-63-63.png");

    background-position: 0px -10px;

}

.zhuti2-2 a>i:hover {

    background-image: url("../IMG/TB1AUURHpXXXXbUXpXXAAT2HVXX-63-63.png");

    background-position: -1px -10px;

}

.zhuti2-3 a>i:hover {

    background-image: url("../IMG/TB1l8USHpXXXXX0XpXXAAT2HVXX-63-63.png");

    background-position: 0px -11px;

}

.zhuti2-4 a>i:hover {

    background-image: url("../IMG/TB1x2UNHpXXXXaVXVXXAAT2HVXX-63-63.png");

    background-position: 0px -9px;

}

.zhuti2-5 a>i:hover {

    background-image: url("../IMG/TB1rvgQHpXXXXXWXFXXAAT2HVXX-63-63.png");

    background-position: 0px -8px;

}

.zhuti2-6 a>i:hover {

    background-image: url("../IMG/TB19aIOHpXXXXX4XVXXAAT2HVXX-63-63.png");

    background-position: 0px -11px;

}

.zhuti2-7 a>i:hover {

    background-image: url("../IMG/TB1S5ULHpXXXXbKXFXXAAT2HVXX-63-63.png");

    background-position: 0px -10px;

}

.zhuti2-8 a>i:hover {

    background-image: url("../IMG/TB1qCUMHpXXXXbRXVXXAAT2HVXX-63-63.png");

    background-position: 0px -10px;

}

.zhuti2-1,

.zhuti2-2,

.zhuti2-3,

.zhuti2-4,

.zhuti2-5,

.zhuti2-6,

.zhuti2-7 {

    150px;

    height: 120px;

    border-right: 1px solid rgb(238, 238, 238);

    background-color: rgb(255, 255, 255);

}

.zhuti2-8 {

    150px;

    height: 120px;

    background-color: rgb(255, 255, 255);

}

.zhuti2 span{

    margin-top:27px;

    margin-left:43px;

}

/* 第三段样式 */

.zhuti3{

    margin-top:20px;

    display: flex;

    justify-content: space-between;

    background-color: rgb(255, 255, 255);

}

.zhuti3>span:first-child{

    margin:20px 0px 19px 14px;

    font-size:18px;

}

.zhuti3>span:first-child>span{

    margin-left:14px;

    font-size:12px;

    color:rgb(102,102,102);

}

.zhuti3>span:last-child>a{

    text-decoration: none;

    margin-right:15px;

font-size:12px;

color:rgb(0,162,202);

}

.zhuti3>span:last-child{

    margin-top:25px;

}

.zhuti3>span:last-child>a:hover{

    text-shadow: -1px 1px 2px rgb(199, 202, 224);

}.zhuti4{

    border-top:2px solid rgb(245,199,133);

    display:flex;

}

.zhuti4>div:first-child,.zhuti4>div:nth-child(2){

    display: flex;

    flex-direction: column;

}

.zhuti4>div:nth-child(2)>div>a:nth-of-type(1)>i{

    display: inline-block;

    12px;

    height: 19px;

    background-image: url("../IMG/index.png");

    background-position: -377px -867px;

}

.zhuti4>div:nth-child(2)>div>a:nth-of-type(2)>i{

    display: inline-block;

    12px;

    height: 19px;

    background-image: url("../IMG/index.png");

    background-position: -797px -867px;

}

.zhuti4>div:first-child>div:first-child{

240px;

height: 223px;

background-color: rgb(255,235,206);

}

.zhuti4>div:first-child>div:last-child{

    240px;

height: 121px;

background-color: rgb(253,223,181);

}

.zhuti4>div:first-child>div:first-child>img{

    margin-top:60px;

    margin-left:59px;

}

.zhuti4>div:first-child>div:last-child>a{

    display: inline-block;

    text-decoration: none;

font-size:12px;

color:rgb(218,112,27);

    margin-top:38px;

    margin-left:65px;

}

.zhuti4>div:first-child>div:last-child>a:hover{

    text-shadow: -1px 1px 2px rgb(245, 114, 7);

}

.zhuti4-1>a:nth-of-type(1){

    font-size:24px;

    color:rgb(0, 0, 0);

    text-decoration: none;

    display: inline-block;

margin-top:17px;

margin-left:153px;

}

.zhuti4-1>a:nth-of-type(2){

    font-size:14px;

    color:rgb(102, 102, 102);

    text-decoration: none;

    display: inline-block;

    margin-top:11px;

    margin-left:110px;

}

.zhuti4-1>div>img{

    margin-left:40px;

}

.zhuti4-1>div>a:nth-of-type(1)>i{

    position: relative;

    top:-160px;

    right: -30px;

}

.zhuti4-1>div>a:nth-of-type(2)>i{

    position: relative;

    top:-160px;

    left: 9px;

}

.zhuti4-2{

    display: flex;

    flex-direction: column;

}

.zhuti4-2>a:nth-of-type(1),.zhuti4-2>a:nth-of-type(3){

    font-size:18px;

    color:rgb(0, 0, 0);

    text-decoration: none;

    display: inline-block;

    margin-top:20px;

    margin-bottom:7px;

}

.zhuti4-2>a:nth-of-type(2),.zhuti4-2>a:nth-of-type(4){

    font-size:12px;

    color:rgb(102, 102, 102);

    text-decoration: none;

    display: inline-block;

}

.zhuti4-2>img{

    margin-left:20px;

}

.zhuti4-2>a:nth-of-type(1){

    margin-left:112px;

}

.zhuti4-2>a:nth-of-type(2){

    margin-left:85px;

}

.zhuti4-2>a:nth-of-type(3){

    margin-left:80px;

}

.zhuti4-2>a:nth-of-type(4){

    margin-left:80px;

}

article>div>p:nth-of-type(2){

    font-size:18px;

    color:rgb(0, 0, 0);

    background-color: rgb(255, 255, 255);

    margin-bottom:0px;

    padding:20px 0px 20px 30px;

    border-bottom:1px solid rgb(238, 238, 238);

}

.zhuti5{

    display: flex;

    flex-direction: row;

}

.zhuti5>div{

    240px;

    height:192px;

    border-right:1px solid rgb(248, 248, 248);

    display: flex;

    flex-direction: column;

}

.zhuti5 img{

    239px;

    height: 96px;

}

.zhuti5 a{

    font-size:14px;

    color:rgb(0, 0, 0);

    text-decoration: none;

    display: inline-block;

    margin-top:15px;

}

.zhuti5>div>a:nth-of-type(1){

    margin-left:30px;

}

.zhuti5>div>a:nth-of-type(2){

    margin-left:15px;

}

查看全文

相关阅读:
Vue_使用v-model指令写的简易计算器
 Vue_v-for的四种用法示例
 bs4_加载顺序
 Vue_自定义指令
 Vue_v-for中key的使用注意事项
 Vue_指令
 bs4_card(卡片)
Vue_过滤器
 Vue_生命周期函数
 selenium 文件上传

原文地址：https://www.cnblogs.com/zhuxinpeng-looking/p/10568326.html