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

如何用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条)

相关推荐 更多相似问题