html右边栏代码

在网页设计中，右边栏通常是用来展示一些补充信息的地方，比如相关文章、广告、热门推荐等等。要实现一个简单的右边栏，需要使用 HTML 和 CSS 代码。

html右边栏代码

HTML 代码如下：

<div class="right-sidebar">
  <h2>相关文章</h2>
  <ul>
    <li><a href="#">文章1</a></li>
    <li><a href="#">文章2</a></li>
    <li><a href="#">文章3</a></li>
    <li><a href="#">文章4</a></li>
  </ul>
  <h2>热门推荐</h2>
  <ul>
    <li><a href="#">推荐1</a></li>
    <li><a href="#">推荐2</a></li>
    <li><a href="#">推荐3</a></li>
    <li><a href="#">推荐4</a></li>
  </ul>
</div>

上面的代码中，我们使用了 <div> 元素来包裹整个右边栏，使用了 <h2> 元素来显示标题，使用了 <ul> 和 <li> 元素来显示文章链接和推荐链接。

CSS 代码如下：

.right-sidebar {
  background-color: #f7f7f7;
  Box-shadow: 1px 1px 5px rgba(0,0.1);
  padding: 10px;
  border-radius: 5px;
}

.right-sidebar h2 {
  font-size: 20px;
  margin: 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

.right-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.right-sidebar li {
  margin: 10px 0;
}

.right-sidebar a {
  color: #333;
  text-decoration: none;
}

.right-sidebar a:hover {
  color: #666;
}

上面的代码中，我们给整个右边栏添加了背景色，阴影和圆角边框。给标题添加了下划线，给链接添加了样式。

通过以上代码，我们可以轻松地实现一个简单的右边栏。