用HTML+css+原生js 仿Mac系统,直接给出完整的代码
时间: 2023-03-08 12:27:30 浏览: 125
基于HTML实现的手机仿青藤文学网页(含HTML源代码).zip
答:以下是一个仿Mac系统的HTML、CSS和原生JS代码:
<html>
<head>
<title>Mac系统仿制</title>
<style type="text/css">
body {
background-color: #f8f8f8;
}
#container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.mac-container {
background-color: #fff;
padding: 20px;
box-shadow: 0px 10px 5px #888;
}
.mac-window {
width: 100%;
background-color: #fbfbfb;
padding: 10px;
}
.mac-titlebar {
background-color: #2d2d2d;
color: #fff;
padding: 10px;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.mac-button {
background-color: #2d2d2d;
color: #fff;
padding: 5px 15px;
font-size: 12px;
font-weight: bold;
text-align: center;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="mac-container">
<div class="mac-window">
<div class="mac-titlebar">标题栏</div>
<div class="mac-content">
<p>这里是内容</p>
<input type="button" value="按钮" class="mac-button" />
</div>
</div>
</div>
</div>
</body>
</html>
阅读全文