目标效果：
实现效果：
html代码：
<!DOCTYPE>
<html>
<head>
<title>掘金</title>
<link href="decoration.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="juejin">
<div class="header-box">
<header class="main-header">
<div class="header-container">
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" class="logo1"/>
<nav class="main-nav">
<ul class="nav-list">
<li class="main-nav-list">
<span>首页</span>
<span>沸点</span>
<span>小册</span>
<span>活动</span>
</li>
<li class="search-list">
<input type="text" class="search-box" placeholder="搜索掘金"/>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/juejin-search-icon.6f8ba1b.svg" class="search-logo"/>
</li>
<li class="add-article">
<input type="button" value="写文章" class="add-button"/>
</li>
<li class="notification">
<img src="1.png" class="notification-logo"/>
</li>
<li class="user">
<img src="https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/aebf7ce7aff6943bce224e971053019d~300x300.image" class="user-logo"/>
</li>
</ul>
</nav>
</div>
</header>
</div>
<hr>
<div class="label-box">
<nav class="label">
<ul class="header-list">
<li>
<div>
<span>推荐</span>
</div>
</li>
<li>
<div>
<span>关注</span>
</div>
</li>
<li>
<div>
<span>后端</span>
</div>
</li>
<li>
<div>
<span>前端</span>
</div>
</li>
<li>
<div>
<span>Android</span>
</div>
</li>
<li>
<div>
<span>iOS</span>
</div>
</li>
<li>
<div>
<span>人工智能</span>
</div>
</li>
<li>
<div>
<span>开发工具</span>
</div>
</li>
<li>
<div>
<span>代码人生</span>
</div>
</li>
<li>
<div>
<span>阅读</span>
</div>
</li>
<li class="tag-manage">
<div >
<span>标签管理</span>
</div>
</li>
</ul>
</nav>
</div>
<hr>
<div class="ctx">
<div class="context-box">
<div class="context-container">
<div class="main-context">
<nav class="context-nav-list">
<ul class="context-list">
<li>
<div>
<span>热门</span>
</div>
</li>
<li>
<div>
<span>最新</span>
</div>
</li>
<li>
<div>
<span>热榜</span>
</div>
</li>
</ul>
</nav>
<hr>
<div class="context">
<div class="context-content">
<ul class="context-item">
<li class="title">
<div class="status">
<span>来自格兰芬多的邦尼</span>
<span>5天前</span>
</div>
</li>
<li><h3>你有多久没有翻开一本书了？</h3></li>
<li><span>100%获奖!掘金读书会，与我们一起读好书~趁着国际读书日的到来，给自己一个读书的切记和我们一起阅读吧~</span></li>
</ul>
<div class="picture-item">
<img src="2.png" class="pic1"/>
</div>
</div>
<hr>
<div class="context-content">
<ul class="context-item">
<li class="title">
<div class="status">
<span>阿宝哥</span>
<span>2小时前</span>
</div>
<div class="tag-list">
<div class="tag">
<span>JavaScript</span>
</div>
<div class="tag">
<span>前端</span>
</div>
</div>
</li>
<li><h3>JavaScript中如何实现大文件并行下载？</h3></li>
<li><span>本文介绍了在JavaScript中如何利用async-pool这个库提供的asyncPool函数，来实现大文件的并行下载</span></li>
<li class="comment-button">
<div class="cb">
<img src="4.png" class="zan">
<span class="s">56</span>
</div>
<div class="cb">
<img src="5.png" class="pinglun">
<span class="s">5</span>
</div>
<div class="cb">
<img src="6.png" class="fenxiang">
<span class="s">分享</span>
</div>
</li>
</ul>
</div>
<hr>
<div class="context-content">
<ul class="context-item">
<li class="title">
<div class="status">
<span>codercao</span>
<span>36分钟前</span>
</div>
<div class="tag-list">
<div class="tag">
<span>JavaScript</span>
</div>
</div>
</li>
<li><h3>JavaScript中几个优雅的运算符使用技巧</h3></li>
<li class="ctx-pic">
<span>ECMAScript发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变JavaScript编写方式，可能有些人喜欢，有些人不喜欢，但像每个...</span>
<div class="picture-item">
<img src="3.png" class="pic2"/>
</div>
</li>
<li class="comment-button">
<div class="cb">
<img src="4.png" class="dianzan">
<span class="s">6</span>
</div>
<div class="cb">
<img src="5.png" class="comment>
<span class="s">评论</span>
</div>
<div class="cb">
<img src="6.png" class="share>
<span class="s">分享</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="ad">
<div class="ad1">
<img src="ad1.png" class="ad1-pic">
</div>
<div class="ad1">
<img src="ad2.png" class="ad2-pic">
</div>
<div class="ad1">
<img src="ad3.png" class="ad3-pic">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css代码：
.juejin{
width: 100%;
}
.header-box{
display: flex;
justify-content: center;
}
.label-box
{
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.main-header{
width: 100%;
max-width: 960px;
}
.header-container
{
position: relative;
display: flex;
}
img{
width:auto;
height:auto;
border-style: none;
}
li{
list-style: none;
}
.main-nav{
height: 100%;
flex:1 0 auto;
}
.nav-list{
display: flex;
align-items: center;
}
.search-list{
width: 100px;
display:flex;
flex: 1 1 auto;
justify-content: flex-end;
}
.add-article,
.notification
{
width:80px;
display: flex;
justify-content: center;
}
.add-button{
color: white;
background-color: cornflowerblue;
border: none;
border-radius: 2px;
}
.notification-logo,.user-logo{
width: 24px;
height: 24px;
}
hr{
width:100%;
background-color: gainsboro;
}
div{
display:block;
margin: 1px;
}
.header-list{
width: 920px;
display: flex;
justify-content: space-between;
}
.tag-manage{
width: 250px;
display: flex;
justify-content: flex-end;
}
.ctx{
background-color: whitesmoke;
}
.context-box{
background-color: white;
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.context-container{
position: relative;
display: flex;
justify-content: flex-start;
/* width: 100%; */
height:100%;
}
.main-context{
width:70%;
margin:10px;
}
.context-list{
width: 30%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.context-content{
display: flex;
justify-content: center;
}
.picture-item{
position:relative;
width:auto;
display: flex;
align-items: flex-end;
}
.title{
display: flex;
justify-content: flex-start;
align-items: center;
}
.status{
width:60%;
}
.tag-list{
position: relative;
width: 40%;
margin: 1px;
display: flex;
justify-content: flex-end;
}
.tag{
background-color: gainsboro;
padding: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 5px;
}
.comment-button{
width: 40%;
display:flex;
justify-content: space-between;
}
.cb{
display: flex;
align-items: center;
}
.ctx-pic{
display: flex;
justify-content: center;
}
.ad{
margin:10px;
}
相关标签：
- <nav> 标签定义导航链接的部分。 用来表示一个含有多个超链接的区域，这个区域的连接可以连接到其他页面，也可以连接到本页面内部其他部分。nav标签中的内容通常是一个列表；如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。 用法说明:
-
- 并不是所有的链接都必须使用<nav>元素,它只用来将一些热门的链接放入导航栏,例如<footer>元素就常用来在页面底部包含一个不常用到,没必要加入的链接列表.
-
- 一个网页也可能含有多个元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表.
-
- 通过nav标签能更好的实现在不同设备上（如：手机、电脑等）控制导航链接是否显示，从而让网页适应不同大小的屏幕。
- <header> 标签定义文档或者文档的一部分区域的页眉。 <header> 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 <header> 元素。 <header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
