使用CSS+HTML实现macOS红绿灯应用标题栏

最新推荐文章于 2023-12-14 11:24:07 发布

Zip Zou

最新推荐文章于 2023-12-14 11:24:07 发布

阅读量1.7k

点赞数

分类专栏： HTML笔记文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/zouzhipeng1717/article/details/115919410

版权

本文介绍了两种在HTML设计中实现macOS红绿灯窗口风格标题栏的方法。第一种利用子元素定位和CSS，扩展性强并能添加事件监听；第二种则是纯CSS解决方案，虽然无法添加事件，但实现过程更简洁。文中给出了详细代码示例。

摘要由CSDN通过智能技术生成

在HTML设计中，通常需要模拟Mac下红绿灯窗口风格用来表示一个窗口或页面，常用的方法，如：通过定位+子元素实现，该方式扩展性强，可以在子元素上创建事件。

另一种方法，则为纯CSS解决方案，但是无法产生事件监听，但是产生的效果也更加简单。

解决方案1: 使用子元素实现

使用三个<a>即可实现，但是需要将display: inline-block;用于设置宽度和高度生效，同时通过边框弧度产生圆形效果：

.light {
   
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

最后再通过设置颜色即可实现。完整HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
    
      margin: 0;
      padding: 0;
    }
    .window {
    
      width: 1000px;
      height: 900px;
      margin: 0 auto;
      margin-top: 12px;
    }
    .header {
    
      background-color: #E0E0E0