制作这样的html5界面，图片可用其他代替

img

大概这个样了，图片自己更换

img

 <!doctype html>
<style>
    body,li,ul{padding:0;margin:0;list-style:none}
    .wrap{max-width:1200px;margin:0 auto;background:url(https://onlinetravelmarket.net/images/k1.jpg) no-repeat;background-size:cover;overflow:hidden}
    .wrap .menu{overflow:hidden}
    .wrap .menu img.logo{float:left;height:100px}
    .wrap .menu .nav{background-image:linear-gradient(#a6c690,#97a04a);overflow:hidden}
    .wrap .menu .nav li{line-height:50px;border-right:solid 1px #fff;width:120px;text-align:center;float:left}                                                                                                             
    .wrap .menu .nav li:last-of-type{border-right:none}
    .left,.right{padding:15px 30px;width:30%;float:left;box-sizing:border-box}
    .left .content,.right .content{background:rgba(255,255,255,.6);text-align:center;padding:30px 10px}
    .right{width:70%;float:right}
    .right .content{padding:10px;text-align:left}
    .right .title span{float:left;color:#e95542;margin-right:10px;font-weight:bold}
    .right .title h3{margin:0}
    .right .content em{display:block;text-decoration:underline;line-height:25px}
    .right .imglist img{width:100px;height:80px;display:inline-block;margin:10px 20px}
    .foot{background:#b1c185;text-align:center;clear:both;line-height:30px}
</style>
<div class="wrap">
    <div class="menu">
        <img src="http://lvyou168.cn/newindex/images/logo.gif" class="logo" />
        <div class="nav">
            <ul>
                <li>首页</li>
                <li>历史文章</li>
                <li>作品列表</li>
                <li>访问记录</li>
                <li>个人信息</li>
            </ul>
        </div>
    </div>
    <div class="left">
        <div class="content">
            <img src="http://lvyou168.cn/newindex/images/logo.gif" width="100" height="100" />
            <br />
            <h3>用户名：张三</h3>
            <div style="text-align:left"><em>　　追求卓越，勤奋努力，从编程能力入手，快乐而拔尖的前端程序员。（用户自诉）</em></div>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <div class="title"><span>>></span><h3>往期文章</h3></div>
            <em>HTML5学习心得</em>
            <em>JavaScript小技巧</em>
            <em>学习资源网站汇总</em>
        </div>
        <div class="content" style="margin-top:20px">
            <div class="title"><span>>></span><h3>相册</h3></div>
            <div class="imglist">
                <img src="http://lvyou168.cn/newindex/images/logo.gif" class="logo" />
                <img src="http://lvyou168.cn/newindex/images/logo.gif" class="logo" />
                <img src="http://lvyou168.cn/newindex/images/logo.gif" class="logo" />
                <img src="http://lvyou168.cn/newindex/images/logo.gif" class="logo" />
            </div>
        </div>
    </div>
    <div class="foot">联系方式：010-11112222　创建时间：2021年12月24日</div>
</div>

img


有帮助或启发麻烦点下【采纳该答案】

自己先写 。不会得再问。