在网页设计中,右边栏通常是用来展示一些补充信息的地方,比如相关文章、广告、热门推荐等等。要实现一个简单的右边栏,需要使用 HTML 和 CSS 代码。
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; }
上面的代码中,我们给整个右边栏添加了背景色,阴影和圆角边框。给标题添加了下划线,给链接添加了样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。