案例要求：根据如下图片完成复刻
案例实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始化 */
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
/* 页面内容 */
/* -----------头部内容部分开始----------- */
.header {
height: 56px;
}
.header_con {
width: 1400px;
margin: 0 auto;
height: 56px;
border: 1px solid red;
}
.header_con .logo {
/* 浮动后的元素display为块元素 但是可以一行展示 脱离标准流 */
float: left;
margin-top: 10px;
}
.addons {
float: right;
width: 80px;
height: 50px;
margin-top: 15px;
}
.wen {
overflow: hidden;
width: 1400px;
margin: 10px auto;
height: 490px;
border-radius: 20px;
}
.wen img {
width: 1400px;
height: 490px;
}
</style>
<link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
<div class="header">
<div class="header_con">
<a href="">
<img src="./images/logo.png" alt="">
</a>
<div class="addons">
<span class="iconfont icon-yonghu"></span>
<span class="iconfont icon-sousuo"></span>
<span class="iconfont icon-icon_renwulancopy"></span>
</div>
</div>
<div class="wen">
<a href="https://consumer.huawei.com/cn/wholehome/"><img src="./images/bg.png" alt=""></a>
</div>
</div>
</body>
</html>
案例复刻思路：首先从整体来看，右半部分导航栏三个可以使用矢量图标来实现，个人推荐去阿里巴巴矢量库下载所需要的图标。之后可以发现左半部分是一个华为的logo，所以导航栏部分可以使用矢量标签link引入，同时使用span标签包裹。之后给导航栏左半部分设置左浮动，右半部分相反即可。至此下半部分可以引用一个a标签来包裹img，整体给a标签设置一个div盒子包裹。设置一下盒子的边框、宽高即可完整一个大致的模仿。
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
