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>
        <!-- 导航3 -->
        <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 {
    width: 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 {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background-color: rgb(55, 61, 65);
}

header>div:first-child>div>a>img {
    width: 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 {
    width: 1200px;
    height: 100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.daohang>a>img {
    width: 100px;
    height: 41px;
}

.daohang>a {
    display: inline-block;
    margin-top: 21px;
}

.daohang>nav>input {
    width: 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;
    width: 12px;
    height: 7px;
    background-image: url("../IMG/index_01.png");
    background-position: -1171px -64px;
}

/* 导航三样式 */

.daohang2 {
    width: 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;
    width: 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 {
    width: 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;
    width: 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 {
    width: 1200px;
    /* height: 500px; */
    margin: auto;
    /* border: 1px solid red; */
}

/* 第一段样式 */

.zhuti1-1 {
    width: 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 {
    width: 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;
    width: 63px;
    height: 45px;
    background-image: url("../IMG/TB1oP6tHFXXXXXUapXXAAT2HVXX-63-63.png");
    background-position: 0px -10px;
}

.zhuti2-2>span>a>i {
    display: inline-block;
    width: 60px;
    height: 44px;
    background-image: url("../IMG/TB1XNwNHpXXXXa1XVXXAAT2HVXX-63-63.png");
    background-position: -1px -10px;
}

.zhuti2-3>span>a>i {
    display: inline-block;
    width: 63px;
    height: 44px;
    background-image: url("../IMG/TB1woESHpXXXXXSXpXXAAT2HVXX-63-63.png");
    background-position: 0px -11px;
}

.zhuti2-4>span>a>i {
    display: inline-block;
    width: 63px;
    height: 44px;
    background-image: url("../IMG/TB11GsPHpXXXXciXFXXAAT2HVXX-63-63.png");
    background-position: 0px -9px;
}

.zhuti2-5>span>a>i {
    display: inline-block;
    width: 63px;
    height: 44px;
    background-image: url("../IMG/TB1t.ARHpXXXXb0XpXXAAT2HVXX-63-63.png");
    background-position: 0px -8px;
}

.zhuti2-6>span>a>i {
    display: inline-block;
    width: 63px;
    height: 44px;
    background-image: url("../IMG/TB1KGwUHpXXXXaOXXXXAAT2HVXX-63-63.png");
    background-position: 0px -11px;
}

.zhuti2-7>span>a>i {
    display: inline-block;
    width: 63px;
    height: 44px;
    background-image: url("../IMG/TB17s7UHpXXXXa1XXXXAAT2HVXX-63-63.png");
    background-position: 0px -10px;
}

.zhuti2-8>span>a>i {
    display: inline-block;
    width: 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 {
    width: 150px;
    height: 120px;
    border-right: 1px solid rgb(238, 238, 238);
    background-color: rgb(255, 255, 255);
}

.zhuti2-8 {
    width: 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;
    width: 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;
    width: 12px;
    height: 19px;
    background-image: url("../IMG/index.png");
    background-position: -797px -867px;
}
.zhuti4>div:first-child>div:first-child{
width: 240px;
height: 223px;
background-color: rgb(255,235,206);
}
.zhuti4>div:first-child>div:last-child{
    width: 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{
    width:240px;
    height:192px;
    border-right:1px solid rgb(248, 248, 248);
    display: flex;
    flex-direction: column;
}
.zhuti5 img{
    width: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;

}
posted @ 2019-03-20 22:43  代码狂魔2019  阅读(686)  评论(0)  编辑  收藏  举报