使用Flex布局仿php中文网 - 前端提交作业

Community Learn Tools Library Leisure

English

Home > List of blog posts > 使用Flex布局仿php中文网

Blogger Information

Blog 40

fans 0

comment 1

visits 39785

Special Recommendation

More>

Related recommendations

模仿效果如下：

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局仿php中文网</title>
    <link rel="stylesheet" href="./dome.css">
    <link rel="stylesheet" href="./styer.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <div class="title">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">视频教学</a></li>
                    <li><a href="#">入门教学</a></li>
                    <li><a href="#">社区问答</a></li>
                    <li><a href="#">技术文章</a></li>
                    <li><a href="#">资源下载</a></li>
                    <li><a href="#">编程词典</a></li>
                    <li><a href="#">工具下载</a></li>
                    <li><a href="#">PHP培训</a></li>
                </ul>
                <p><a href="#">注册</a><a href="#">登录</a></p>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div>
        <div>
            <ul>
                <li>
                    <a href="">php开发</a>
                </li>
                <li>
                    <a href="">前段开发</a>
                </li>
                <li>
                    <a href="">服务端开发</a>
                </li>
                <li>
                    <a href="">移动开发</a>
                </li>
                <li>
                    <a href="">数据库</a>
                </li>
                <li>
                    <a href="">服务器运维</a>
                </li>
                <li>
                    <a href="">在线工具箱</a>
                </li>
                <li>
                    <a href="">常用库类</a>
                </li>
            </ul>
        </div>
        <div class="viewAd">
            <div class="search">
                <a href="">php</a>
                <a href="">孤独</a>
                <a href="">php</a>
                <a href="">php开发</a>
                <a href="">php开发</a>
                <a href="">php开发</a>
                <a href="">课程直播</a>
                <span class="searchInput">
                    <input type="text" placeholder="输入关键字搜索"><a href="">搜索</a>
                </span>              
            </div>
            <div class="viewImg"><img src="./static/img/b1.p" alt=""></div>
            <div class="adImg">
                <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
                <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
                <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
                <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
            </div>
        </div>
    </div>
    <!-- AD -->
    <div class="ad1">
        <a href=""><img src=".static/img/1.png" alt=""></a>
    </div>
    <!-- 内容 -->
    <div class="content1">
        <!-- 左边 -->
        <div class="left">
            <h4>头条</h4>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
            <p><a href="#">php中文网</a></p>
        </div>
        <!-- 内容中间 -->
        <div class="mian flexGrowAuto">
            <h4>最新课程</h4>
            <ul>
                <li>
                    <a href="">
                        <div><img src="./static/img/2.png" alt=""></div>
                        <div><span>初级</span>前段教程</div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div><img src="./static/img/2.png" alt=""></div>
                        <div><span>初级</span>前段教程</div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div><img src="./static/img/2.png" alt=""></div>
                        <div><span>初级</span>前段教程</div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div><img src="./static/img/2.png" alt=""></div>
                        <div><span>初级</span>前段教程</div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div><img src="./static/img/2.png" alt=""></div>
                        <div><span>初级</span>前段教程</div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div><img src="./static/img/2.png" alt=""></div>
                        <div><span>初级</span>前段教程</div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 右 -->
        <div class="right">
            <h4>常用手册</h4><h4>更多...</h4>
            <ul>
                <li class="flexDis">
                    <div class="rightImg"><img src="./static/img/2.png" alt=""></div>
                    <div class="rightFont">
                        <a href="">php手册</a>
                        <a href="">linux手册</a>
                        <a href="">ci手册</a>
                        <a href="">php手册</a>
                    </div>
                </li>
                <li class="flexDis">
                    <div class="rightImg"><img src="./static/img/2.png" alt=""></div>
                    <div class="rightFont flexDis">
                        <a href="">javascript</a>
                        <a href="">jquery</a>
                    </div>
                </li>
                <li class="flexDis">
                    <div><img src="./static/img/2.png" alt=""></div>
                    <div class="rightFont flexDis">
                        <a href="">javascript</a>
                        <a href="">jquery</a>
                    </div>
                </li>
                <li class="flexDis">
                    <div><img src="./static/img/2.png" alt=""></div>
                    <div class="rightFont flexDis">
                        <a href="">html手册</a>
                        <a href="">css手册</a>
                        <a href="">html手册</a>
                        <a href="">css手册</a>
                    </div>
                </li>
                <li class="flexDis">
                    <div><img src="./static/img/2.png" alt=""></div>
                    <div class="rightFont flexDis">
                        <a href="">ASP手册</a>
                        <a href="">bt3手册</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content2 container flexDis">
            <div class="content_ad_down">
                <div class="content_ad">
                    <img src="./static/img/2.png" alt="">
                    <a href="">phpstudy急速入门视频</a>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="content_down">
                    <div class="down_title">
                        <span><a href="">更多...</a></span>php工具下载
                    </div>
                    <div>
                        <ul>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                            <li><span>8-17</span><a href="">小皮面板</a></li>
                        </ul>
                    </div>
                </div>
                <div class="content_arc">
                    <div class="arc_title">
                        <span>技术文章</span>
                        <span>网站源码</span>
                        <span>原生手册</span>
                        <span>推荐博文</span>
                    </div>
                    <div class="arc_content">
                        <ul>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                            <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
                            <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
                        </ul>
                    </div>
                </div>
                <div class="content_qa">
                    <div class="qa_title"><span>社区问答</span></div>
                    <div class="qa_content">
                        <ul>
                            <li><a href="">密码错误</a></li>
                            <li><a href="">朱老师用的什么屏幕截取软件</a></li>
                            <li><a href="">编辑页面大不开</a></li>
                            <li><a href="">密码错误</a></li>
                            <li><a href="">朱老师用的什么屏幕截取软件</a></li>
                            <li><a href="">编辑页面大不开</a></li>
                            <li><a href="">密码错误</a></li>
                            <li><a href="">朱老师用的什么屏幕截取软件</a></li>
                            <li><a href="">编辑页面大不开</a></li>
                            <li><a href="">密码错误</a></li>
                            <li><a href="">朱老师用的什么屏幕截取软件</a></li>
                            <li><a href="">编辑页面大不开</a></li>
                            <li><a href="">密码错误</a></li>
                            <li><a href="">朱老师用的什么屏幕截取软件</a></li>
                            <li><a href="">编辑页面大不开</a></li>
                            <li><a href="">密码错误</a></li>
                            <li><a href="">朱老师用的什么屏幕截取软件</a></li>
                            <li><a href="">编辑页面大不开</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- phpstudy -->
            <div class="ad2"> <a href=""><img src="./static/img/2.png" alt=""></a></div>
            <!-- 底部 -->
            <div class="footer">
                <div class="footer_left content">
                    <p class="footer_link">
                        <a href="">网站首页</a>
                        <a href="">php视频</a>
                        <a href="">网站首页</a>
                        <a href="">php视频</a>
                        <a href="">网站首页</a>
                        <a href="">编程词典</a>
                    </p>
                    <p class="footer_company">
                        <span>php中文网：公益在线PHP培训</span>
                        <img src="static/img/logo,png" alt="">
                    </p>
                    <p class="add_tel">
                        座机号码：0551-0000000 地址：安徽省合肥市....
                    </p>
                    <div class="code">
                        <img src="./static/img/code1.png" alt="">
                        <img src="./static/img/code1.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

公共样式代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    html,
    body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    font: 14px Helvetica Neue,Helvetica,PingFang SC,微软雅黑,Tahoma,Arial,sans-serif;
    background: #F3F5F7;
    }
    li,dd{
    list-style: none;
    }
    a{
    text-decoration: none;
    }
    button,img{
    border: none;
    outline: none;
    }
    /* 过渡动画: */
    .navTs{
    transition:all 200ms ease;
    }
    .container {
    width: 1200px;
    margin: 0 auto;
    }
    /* 转为flex容器 */
    .flexDis {
    display: flex;
    }
    /* flex项目收缩比例:不收缩 */
    .flexShrinkStatic {
    flex-shrink: 0;
    }
    /* flex项目收缩比例:等比收缩 */
    .flexShrinkAuto {
    flex-shrink: 1;
    }
    /* flex项目放大比例: */
    .flexGrowAuto {
    flex-grow: 1;
    }
    /* flex主轴排列:水平排列 */
    .flexDir-x {
    flex-direction: row;
    }
    /* flex主轴排列:垂直排列 */
    .flexDir-y {
    flex-direction: column;
    }
    /* flex主轴换行:换行 */
    .flexWrap {
    flex-wrap: wrap;
    }
    /* flex主轴换行:不换行 */
    .flexNoWrap {
    flex-wrap: nowrap;
    }
    /* 主轴水平对齐方式-------------------------------------- */
    /* flex主轴对齐方式:左对齐 */
    .flexContentS {
    justify-content: start;
    }
    /* flex主轴对齐方式:右对齐 */
    .flexContentE {
    justify-content: end;
    }
    /* flex主轴对齐方式:中对齐 */
    .flexContentC {
    justify-content: center;
    }
    /* flex主轴对齐方式:均匀排列每个元素,每个元素之间的间隔相等 */
    .flexContentV {
    justify-content: space-evenly;
    }
    /* flex主轴对齐方式:均匀排列每个元素,首个元素放置于起点末尾元素放置于终点 */
    .flexContentB {
    justify-content: space-between;
    }
    /* flex主轴对齐方式:均匀排列每个元素,元素之前、之间、之后都留有空白的容器内。 */
    .flexContentA {
    justify-content: space-around;
    }
    /* 主轴垂直对齐方式-------------------------------------- */
    /* 行内上对齐-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
    .flexAlignS {
    align-items: start;
    }
    /* 行内中对齐-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
    .flexAlignC {
    align-items: center;
    }
    /* 行内下对齐-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
    .flexAlignE {
    align-items: end;
    }
    /* 元素位于容器的基线上。-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
    .flexAlignB {
    align-items: baseline;
    }
    /* 默认值。元素被拉伸以适应容器。-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
    .flexAlignT {
    align-items: stretch;
    }

css样式代码

.header {
    max-height: 60px;
    font-size: 1em;
    }
    .header .logo {
    display: block;
    height: 60px;
    width: 140px;
    background: url("../img/logo.png") no-repeat center;
    background-size: 100%;
    margin-left: 2em;
    }
    .header .nav {
    background: #000;
    }
    .header .nav ul {
    padding: 0 1.6em;
    margin: 0 3em;
    }
    .header .nav ul li {
    display: inline-block;
    }
    .header .nav ul li a {
        display: inline-block;
        text-align: center;
        width: 85px;
        height: 60px;
        line-height: 60px; /* 文本垂直居中 */
        color: rgba(255, 255, 255, 0.7);
        }
        .header .nav ul li:first-of-type {
        background-color: #363c41;
        }
        .header .nav ul li a:hover {
        color: rgba(255, 255, 255, 1);
        border-bottom: 5px solid #5fb878;
        }
        .header .nav p {
        margin-left: auto;
        }
        .header .nav p a {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: rgba(255, 255, 255, 0.7);
        }
        .header .nav p a:hover {
        background: #363c41;
        }
        .top {
        height: 510px;
        /* border: 5px solid red; */
        /* padding: 1em 0; */
        margin-top: 20px;
        }
        .top .menuList {
        width: 210px;
        /* border: 5px solid blue; */
        background: #2b333b;
        border-top-left-radius: 0.8em;
        border-bottom-left-radius: 0.8em;
        }
        .top .menuList li {
        position: relative;
        }
        .top .menuList a {
        display: inline-block;
        width: 100%;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 0.8em;
        padding: 0.85em 1.5em;
        font-size: 1.1em;
        }
        .top .menuList a:hover {
        background: rgba(255, 255, 255, 0.2);
        }
        .top .menuList span {
        color: rgba(255, 255, 255, 0.8);
        position: absolute;
        top: 45%;
        right: 10%;
        }
        /* 搜索 */
        .top .search {
        background: #fff;
        height: 60px;
        /* width: 990px; */
        border-top-right-radius: 0.8em;
        box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.2);
        line-height: 60px;
        position: relative;
        }
        .top .search a {
        color: #333;
        margin: 0 18px;
        }
        .top .search .span1 {
        color: #fff;
        background: #ff5722;
        border-radius: 0.2em;
        position: absolute;
        top: 32%;
        left: 7.5%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        }
        .top .search .span2 {
        color: #fff;
        background: #2f4056;
        border-radius: 0.2em;
        position: absolute;
        top: 32%;
        left: 26.8%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        }
        .top .search .span3 {
        color: #fff;
        background: #ffb800;
        border-radius: 0.2em;
        position: absolute;
        top: 32%;
        left: 46%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        }
        .top .search .searchInput {
        position: absolute;
        top: 20%;
        right: 20px;
        width: 270px;
        height: 40px;
        background: #f1f0f0;
        line-height: 40px;
        border-radius: 0.2em;
        }
        .top .searchInput:hover {
        border-bottom: 1px solid silver;
        }
        .top .searchInput input {
        width: 210px;
        height: 40px;
        outline: none;
        /* vertical-align: middle; */
        background: none;
        border: none;
        margin-left: 10px;
        }
        .top .viewImg {
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
        }
        .top .viewAd .adImg {
        height: 110px;
        background: rgba(255, 255, 255, 1);
        border-bottom-right-radius: 0.8em;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
        margin-top: -2px;
        }
        .top .viewAd .adImg img {
        border-radius: 0.8em;
        }
        .ad1 img {
        margin: 20px 0;
        border-radius: 0.8em;
        }
        .ad2 img {
        margin-bottom: 10px;
        border-radius: 0.8em;
        }
        /* 内容1 */
        .content1 {
        height: 415px;
        }
        .content1 h4 {
        color: #343535;
        border-bottom: 1px dotted #e9e9e9;
        padding: 5px;
        /* height: 30px; */
        }
        .content1 .left {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
        border-radius: 0.8em;
        padding: 10px;
        width: 300px;
        }
        /* .content1 .left h4{
        color: #343535;
        border-bottom: 1px dotted #e9e9e9;
        padding: 5px;
        } */
        .content1 .left p {
        margin: 10px 0;
        }
        .content1 .left p a {
        margin: 115px 0;
        color: #333;
        }
        .content1 .left p a:hover {
        color: #777;
        }
        .content1 .right {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
        padding: 10px;
        border-radius: 0.8em;
        width: 260px;
        position: relative;
        }
        .content1 .right h4:last-of-type {
        /* background: #000; */
        position: absolute;
        top: 10px;
        right: 10%;
        }
        .content1 .right .rightImg {
        height: 60px;
        /* border: 1px solid #000; */
        line-height: 60px;
        }
        .content1 .right .rightImg img {
        width: 40px;
        margin-left: 5px;
        vertical-align: middle;
        }
        .content1 .right .rightFont {
        margin: 8px 5px;
        width: 100%;
        }
        .content1 .right .rightFont a {
        margin: 2px;
        color: #333;
        }
        .content1 .right .rightFont a:hover {
        color: #777;
        }
        .content1 .main {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
        border-radius: 0.8em;
        margin: 0 10px;
        padding: 10px;
        /* position: relative; */
        max-width: 620px;
        }
        .content1 .main span {
        background: #93999f;
        padding: 2px;
        color: #fff;
        font-size: 0.8em;
        margin: 0 5px;
        }
        .content1 .main ul li {
        /* margin: 10px 10px; */
        margin: 20px auto;
        /* height: 200px; */
        /* background: #777; */
        }
        .content1 .main ul li div {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
        border-radius: 0.7em;
        padding: 5px;
        /* margin: 15px; */
        width: 180px;
        height: 70px;
        position: relative;
        top: 10px;
        left: 0;
        /* border: 5px solid red; */
        }
        .content1 .main ul li a {
        color: #333;
        }
        .content1 .main ul li a:hover {
        color: #777;
        }
        .content1 .main ul li div img {
        border-radius: 0.8em;
        width: 180px;
        position: relative;
        top: -10px;
        left: -5px;
        }
        /* content2 */
        .content2 .content_ad_down {
        width: 360px;
        /* border: 1px solid red; */
        margin: 20px 0;
        }
        .content2 .content_ad_down .content_ad {
        height: 187px;
        border-radius: 0.7em;
        background: rgba(255, 255, 255, 1);
        margin-bottom: 10px;
        padding: 1px;
        }
        .content2 .content_ad_down .content_ad img {
        width: 356px;
        height: 183px;
        border-radius: 0.7em;
        }
        .content2 .content_ad_down .content_ad a {
        display: block;
        position: relative;
        top: -33px;
        left: 0;
        background: rgb(0, 0, 0, 0.7);
        color: #fff;
        width: 300px;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        }
        .content2 .content_ad_down .content_ad span {
        display: inline-block;
        position: relative;
        top: -53px;
        left: 305px;
        background: rgb(0, 0, 0, 0.7);
        color: #fff;
        margin: 0 1px;
        width: 8px;
        height: 10px;
        line-height: 30px;
        padding-left: 10px;
        }
        .content2 .content_ad_down .content_down {
        background: rgb(255, 255, 255, 1);
        border-radius: 0.7em;
        position: relative;
        /* border: 1px solid red; */
        }
        .content2 .content_ad_down .content_down .down_title {
        font-weight: bold;
        height: 33px;
        line-height: 33px;
        border-bottom: 2px solid rgb(255, 74, 0);
        padding-left: 10px;
        }
        .content2 .content_ad_down .content_down .down_title span {
        position: absolute;
        top: 0;
        right: 8px;
        }
        .content2 .content_ad_down .content_down .down_title span a {
        color: #333;
        font-weight: normal;
        }
        .content2 .content_ad_down .content_down .down_title span a:hover {
        color: #777;
        }
        .content2 .content_ad_down .content_down .down_content {
        /* margin-top: 10px;
        margin-left: 20px; */
        min-height: 260px;
        }
        .content2 .content_ad_down .content_down .down_content ul li {
        list-style: outside;
        margin: 10px 20px;
        color: #ccc;
        }
        .content2 .content_ad_down .content_down .down_content span {
        /* color: #333; */
        position: absolute;
        /* top: 10px; */
        right: 10px;
        }
        .content2 .content_ad_down .content_down .down_content a {
        color: #333;
        }
        .content2 .content_ad_down .content_down .down_content a:hover {
        color: #777;
        }
        .content2 .content_arc {
        /* border: 1px solid #000; */
        width: 510px;
        margin: 20px 0;
        border-radius: 0.7em;
        background: rgba(255, 255, 255, 1);
        }
        .content2 .content_arc .arc_title {
        border-bottom: 1px solid #eaeaea;
        height: 35px;
        line-height: 35px;
        }
        .content2 .content_arc .arc_title span {
        display: inline-block;
        height: 35px;
        margin-left: 15px;
        cursor: pointer;
        color: #333;
        }
        .content2 .content_arc .arc_title span:first-of-type {
        border-bottom: 1px solid #f80303;
        }
        .content2 .content_arc .arc_content ul li {
        margin: 7px 10px;
        position: relative;
        }
        .content2 .content_arc .arc_content ul li span:first-of-type {
        display: inline-block;
        width: 75px;
        /* border: 1px solid red; */
        text-align: right;
        }
        .content2 .content_arc .arc_content ul li span {
        margin: 0 3px;
        color: #999;
        }
        .content2 .content_arc .arc_content ul li span:last-of-type {
        display: inline-block;
        position: absolute;
        top: 3px;
        right: 5px;
        color: #f20b0b;
        }
        .content2 .content_arc .arc_content ul li a {
        margin-left: 2px;
        color: #333;
        }
        .content2 .content_arc .arc_content ul li a:hover {
        color: #777;
        }
        .content2 .content_qa {
        width: 310px;
        margin: 20px 0;
        /* border: 1px solid #000; */
        border-radius: 0.7em;
        background: rgba(255, 255, 255, 1);
        }
        .content2 .content_qa .qa_title {
        border-bottom: 1px solid #eaeaea;
        height: 35px;
        line-height: 35px;
        }
        .content2 .content_qa .qa_title span {
        margin-left: 15px;
        color: #333;
        }
        .content2 .content_qa .qa_content ul li {
        margin: 10px 20px;
        }
        .content2 .content_qa .qa_content ul li a {
        color: #333;
        }
        .content2 .content_qa .qa_content ul li a:hover {
        color: #777;
        }
        /* .search-related {
        border: 1px solid #000;
        } */
        .search-related .related_type {
        width: 230px;
        height: 390px;
        /* border: 1px solid lightsalmon; */
        }
        .search-related .related_type .type_title {
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        font-weight: bold;
        color: #666;
        background: #eee;
        font-size: 12px;
        border-right: 1px solid #fff;
        }
        .search-related .related_type .type_content {
        /* display: block; */
        height: 320px;
        background: #515773;
        border-right: 1px solid #fff;
        border-bottom-left-radius: 8px;
        }
        .search-related .related_type .type_content ul li {
        padding: 12px 0 0px 20px;
        }
        .search-related .related_type .type_content ul li a {
        color: #fff;
        font-size: 14px;
        }
        .search-related .related_type .type_content ul li a span {
        color: #bbbbbb;
        font-size: 12px;
        padding-left: 5px;
        }
        /* ------------------------- */
        .search-related .related_search {
        width: 970px;
        height: 390px;
        /* margin-bottom: 20px; */
        /* border: 1px solid lightseagreen; */
        }
        .search-related .related_search .search_title {
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        font-weight: bold;
        color: #666;
        background: #eee;
        font-size: 12px;
        }
        .search-related .related_search .search_title a {
        margin-right: 20px;
        padding-bottom: 10px;
        display: block;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: bold;
        color: #666;
        }
        .search-related .related_search .search_title a:first-of-type {
        color: #fff;
        background: #515773;
        }
        .search-related .related_search .search_content {
        height: 320px;
        background: #515773;
        padding: 30px;
        border-bottom-right-radius: 8px;
        }
        .search-related .related_search .search_content .sc_title {
        font-size: 2em;
        font-weight: bold;
        color: #e4e0e0;
        margin: 10px auto;
        }
        .search-related .related_search .search_content .sc_title2 {
        margin: 5px auto;
        color: #fff;
        }
        .search-related .related_search .search_content .search_div {
        width: 80%;
        height: 50px;
        line-height: 50px;
        margin: 20px auto;
        color: #fff;
        /* border: 1px solid #000; */
        background: #fff;
        position: relative;
        }
        .search-related .related_search .search_content .search_div span:first-of-type {
        display: inline-block;
        width: 50px;
        height: 50px;
        color: #333;
        text-align: center;
        }
        .search-related .related_search .search_content .search_div input {
        border-style: none;
        width: 80%;
        height: 48px;
        }
        .search-related .related_search .search_content .search_div button {
        display: block;
        border-style: none;
        background: none;
        height: 50px;
        line-height: 50px;
        color: #fff;
        margin: 0 auto;
        }
        .search-related .related_search .search_content .search_div span:last-of-type {
        position: absolute;
        right: 0;
        width: 100px;
        height: 50px;
        background: #98a1ad;
        }
        .search-related .related_search .search_content .hot_key {
        margin-bottom: 25px;
        color: #fff;
        }
        .search-related .related_search .search_content .hot_key span {
        display: inline-block;
        color: #fff;
        background: #898c87;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        height: 35px;
        line-height: 35px;
        padding: 0 5px;
        margin: 10px;
        }
        .search-related .related_search .search_content .ls_key {
        margin-top: -20px;
        color: #fff;
        }
        .content3 {
        background: #fff;
        /* border-radius: 8px; */
        height: 635px;
        }
        .content3 .content3_title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: #4d555d;
        line-height: 30px;
        padding-top: 20px;
        padding-bottom: 10px;
        }
        .content3 .content3_content {
        /* border: 1px solid #000; */
        padding: 10px;
        }
        .content3 .content3_content .content_left ul li {
        position: relative;
        }
        .content3 .content3_content .content_left .ct3_left_ad img {
        width: 217px;
        height: 364px;
        border-radius: 8px;
        margin-bottom: 18px;
        }
        .content3 .content3_content .content_left ul li img {
        width: 217px;
        height: 124px;
        border-radius: 8px;
        border: none;
        }
        .content3 .content3_content .content_left ul li span {
        position: absolute;
        top: 124px;
        left: 0;
        /* bottom: -50px; */
        width: 217px;
        height: 42px;
        background-color: #fff;
        color: #93999f;
        font-size: 12px;
        line-height: 42px;
        padding: 0 20px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
        }
        .content3 .content3_content .content_left ul li a {
        display: block;
        border-radius: 8px;
        padding: 15px 20px;
        position: absolute;
        top: 86px;
        transition: top 0.3s;
        height: 80px;
        width: 217px;
        background: #e2e2e2;
        color: #555;
        }
        .content3 .content3_content .content_left ul li a:hover {
        color: #333;
        top: 45px;
        }
        /* 点击次数
        .content3 .content3_content .content_left ul li span {
        position: absolute;
        bottom: -36px;
        width: 100%;
        height: 42px;
        background-color: #fff;
        color: #93999f;
        font-size: 12px;
        line-height: 42px;
        padding: 0 20px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
        }
        .content3 .content3_content .content_left ul li a {
        display: block;
        border-radius: 8px;
        padding: 15px 20px;
        position: absolute;
        top: 83px;
        transition: top 0.3s;
        height: 80px;
        width: 100%;
        background: #e2e2e2;
        color: #555;
        }
        .content3 .content3_content .content_left ul li a:hover {
        color: #333;
        top: 46px;
        } */
        .content3 .content3_content .content_right {
        width: 100%;
        /* border: 1px solid yellowgreen; */
        margin-left: 20px;
        }
        /* 右---------------------------------------- */
        .content3 .content3_content .content_right ul li {
        position: relative;
        /* margin: 30px 5px; */
        height: 192px;
        }
        .content3 .content3_content .content_right ul li img {
        width: 217px;
        height: 124px;
        border-radius: 8px;
        border: none;
        }
        .content3 .content3_content .content_right ul li span {
        position: absolute;
        top: 124px;
        left: 0;
        /* bottom: -50px; */
        width: 217px;
        height: 42px;
        background-color: #fff;
        color: #93999f;
        font-size: 12px;
        line-height: 42px;
        padding: 0 20px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
        }
        .content3 .content3_content .content_right ul li a {
        display: block;
        border-radius: 8px;
        padding: 15px 20px;
        position: absolute;
        top: 86px;
        transition: top 0.3s;
        height: 80px;
        width: 217px;
        background: #e2e2e2;
        color: #555;
        }
        .content3 .content3_content .content_right ul li a:hover {
        color: #333;
        top: 50px;
        }
        .footer {
        padding: 20px;
        background: #393d49;
        color: #787d82;
        }
        .footer .footer_left .footer_link a {
        margin: 0 10px;
        color: #c8cdd2;
        }
        .footer .footer_left .footer_link a:hover {
        color: #fff;
        }
        .footer .footer_left .footer_company span {
        /* font-size: 11px; */
        }
        .footer .footer_left .footer_company img {
        padding-top: 25px;
        width: 50px;
        }
        .footer .footer_left .copyright img {
        padding-top: 25px;
        width: 15px;
        }
        .footer .footer_left .copyright a {
        margin: 0 1px;
        color: #787d82;
        }
        .footer .footer_left .copyright a:hover {
        color: #fff;
        }
        .footer .footer_left .add_tel {
        padding-top: 25px;
        }
        .footer .footer_left .code{
        position: relative;
        }
        .footer .footer_left .code img:last-of-type {
        margin: 3px;
        width: 100px;
        position: absolute;
        top: -150px;
        right: 2%;
        }
        .footer .footer_left .code img:first-of-type {
        margin: 3px;
        width: 100px;
        position: absolute;
        top: -150px;
        right: 12%;
        }

总结：

学习了flex布局后感觉比较容易上手
可以自适应布局
弹性盒子也比较容易理解

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：能理解就好, 剩下就是多写多看了

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

jq返回顶部多种实现方法

2020-12-30 11:05:41