不败世界与终焉之花 2021-06-27 23:22 采纳率: 100%
浏览 113
已结题

如何用flex布局html css做出这个页面。只做布局

上面是要做出的页面。

下面是自己写的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        .divall{
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
        }

        .head{
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            margin-left: 10%;
            width: 100%;
            height: 150px;
            min-width: 900px;
        }
        .div0{
            width: 25%;
            height: 150px;
        }
        #span1{
            /* width: 90px; */
            /* height: 150px; */
            font-size: 14px;
            margin: 10px;
            /* font:; */
        }
        #span1:hover{
        color: darkorange;
        
        border-bottom: #FF8C00 solid 1px;
        
        }
        
        /* .pPRODUCT{
            margin: 5% 0 0 45%;
            font-size: 25px;
            color: gray;
        }
        #id1{
            color: black;
        } */
        .divpzuopin{
            width: 100%;
            margin-top: 5%;
            display: flex;
            justify-content: center;
            
        }
        .div4gtp{
            display: flex;
            justify-content: center;
            text-align: center;
            flex-wrap: wrap;
        }
        #lbt{
            width: 20%;
            margin: 10px;
        }
        #ptpwz{
            width: 20%;
            margin: 10px;
            font-size: 10px;
        }
        </style>
    </head>
    <body>
    <div class="divall">
    <div class="head">
        
            <img  src="img/avatar.jpg" width="50px" height="50px" >
            <span style="font-size: 35px;">Alloy Team</span>
            <div class="div0">
                
            </div>
            <span id="span1">首页</span>
            <span id="span1">博客</span>
            <span id="span1">Github</span>
            <span id="span1">SuperStar</span>
            <span id="span1">Web前端导航</span>
            <span id="span1">关于</span>
    </div>
    <hr width="100%"  >
    <!-- <p class="pPRODUCT">Product / <strong id="id1">作品</strong></p> -->
    <div class="divpzuopin">
        <span style="">Product /</span>
        <span>作品</span>
        
    </div>
    <div class="div4gtp">
        <img  id="lbt" src="img/codetank.jpg" >
        <img  id="lbt" src="img/alloyphoto.jpg" >
        <img id="lbt"  src="img/alloydesigner.jpg" >
        <img id="lbt"  src="./img/alloystick.jpg" >
        <p id="ptpwz">CodeTank <br>全世界首个JavaScript程序员的在线</p>
        <p id="ptpwz">AllowPhonto</p>
        <p id="ptpwz">AllowDisigner <br>新概念开发工具</p>
        <p id="ptpwz"> AllowStrck</p>
    </div>
    <div style="display: flex;justify-content: center; margin: 2% 0 0 47% ;">
        <input type="button" name="" id="" value="更多作品/" />
    </div>
    
    </div>
    </body>
</html>

新手自己写的。有很多功能存在缺陷。

比如缩放会变型。鼠标移动到导航  出现的线会往下很多。

希望有时间的大佬帮忙教一下怎么做。

 

  • 写回答

4条回答 默认 最新

  • _yangyi 2021-06-30 22:11
    关注
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            img{
                margin: 0;
                padding: 0;
                display: inline-block;
            }
            .head{
                width: calc(100% - 280px);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .left, .right{
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
            .span1{
                min-width: 72px;
                margin: 0 20px;
                height: 60px;
                line-height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
            }
            .span1:hover{
                border-top: 10px solid transparent;
                border-bottom: 10px solid #f7b334;
            }
            .lbt{
                width: 100%;
                height: 170px;
            }
            .divpzuopin p{
                text-align: center;
            }
            .div4gtp{
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            .listCard{
                width: calc((100% / 4) - 60px);
                border-radius: 10px;
                border: 1px solid #f3f3f3;
                margin: 0 60px;
                overflow: hidden;
            }
            .listCard:hover{
                box-shadow: 0px 3px 3px #F3F3F3;
            }
            .listCard p{
                padding: 0 10px;
                box-sizing: border-box;
                text-align: left;
                overflow-x: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: calc(100% - 1px);
            }
            footer{
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 10px;
            }
            footer .foot{
                background: #e1e1e1;
                border: 2px solid #f3f3f3;
                border-radius: 4px;
                padding: 20px 60px;
            }
        </style>
    </head>
    <body>
        <header class="head">
            <div class="left">
                <img src="img/avatar.jpg" width="50px" height="50px">
                <span style="font-size: 35px;">Alloy Team</span>
            </div>
            <div class="right">
                <div class="span1">首页</div>
                <div class="span1">博客</div>
                <div class="span1">Github</div>
                <div class="span1">SuperStar</div>
                <div class="span1">Web前端导航</div>
                <div class="span1">关于</div>
            </div>
        </header>
        <div class="divpzuopin">
            <p style="">
                <span>Product</span>
                <span>/作品</span>
            </p>
            <p>新奇好玩的作品，让你欲罢不能</p>
        </div>
        <div class="div4gtp">
            <div class="listCard">
                <img class="lbt" src="./12.jpg">
                <p class="ptpwz">CodeTank</p>
                <p class="ptpwz">全世界首个JavaScript程序员的在线</p>
            </div>
            <div class="listCard">
                <img class="lbt" src="./12.jpg">
                <p class="ptpwz">CodeTank</p>
                <p class="ptpwz">全世界首个JavaScript程序员的在线</p>
            </div>
            <div class="listCard">
                <img class="lbt" src="./12.jpg">
                <p class="ptpwz">CodeTank</p>
                <p class="ptpwz">全世界首个JavaScript程序员的在线</p>
            </div>
            <div class="listCard">
                <img class="lbt" src="./12.jpg">
                <p class="ptpwz">CodeTank</p>
                <p class="ptpwz">全世界首个JavaScript程序员的在线</p>
            </div>
        </div>
        <footer>
            <div class="foot">
                更多作品>
            </div>
        </footer>
    </body>
</html>

    选中的样式就用你自己的进行，样式对照着再改改就可以了，

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 9月23日
  • 已采纳回答 9月15日

悬赏问题

  • ¥15 Opencv配置出错
  • ¥15 模电中二极管，三极管和电容的应用
  • ¥15 关于模型导入UNITY的.FBX: Check external application preferences.警告。
  • ¥15 气象网格数据与卫星轨道数据如何匹配
  • ¥100 java ee ssm项目 悬赏，感兴趣直接联系我
  • ¥15 微软账户问题不小心注销了好像
  • ¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
  • ¥15 curl 命令调用正常，程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥15 使用百度地图api 位置函数报错？