微软主页克隆
微软主页克隆
微软主页克隆免费下载 在 HTML、CSS 和 JavaScript 中
HTML：
<div class="menu-btn">
<i class="fas fa-bars fa-2x"></i>
</div> <div class="container">
<!-- Nav -->
<nav class="main-nav">
<img src="https://i.ibb.co/wwLhz98/logo.png" alt="微软" class="logo"> <ul class="main-menu">
<li><a href="#">办公室</a></li>
<li><a href="#">视窗</a></li>
<li><a href="#">表面</a></li>
<li><a href="#">的Xbox</a></li>
<li><a href="#">交易</a></li>
<li><a href="#">支持</a></li>
</ul> <ul class="right-menu">
<li>
<a href="#">
<i class="fas fa-search"></i>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-shopping-cart"></i>
</a>
</li>
</ul>
</nav> <!-- Showcase -->
<header class="showcase">
<h2>表面交易</h2>
<p>
Select Surfaces 现已开始销售 - 售完即止
</p>
<a href="#" class="btn">
现在去购物<i class="fas fa-chevron-right"></i>
</a>
</header> <!-- Home cards 1 -->
<section class="home-cards">
<div>
<img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
<h3>新 Surface Pro 7</h3>
<p>
看看助理凯蒂·索沃斯如何。 49 人队的教练，使用 Surface Pro 7
把她的计划付诸实施。
</p>
<a href="#">学到更多<i class="fas fa-chevron-right"></i></a>
</div>
<div>
<img src="https://i.ibb.co/KjGFHVJ/card2.png" alt="" />
<h3>新 Surface 笔记本电脑 3</h3>
<p>
用轻薄优雅的设计有力地表达自己，
更快的性能，以及长达 11.5 小时的电池续航时间。
</p>
<a href="#">学到更多<i class="fas fa-chevron-right"></i></a>
</div>
<div>
<img src="https://i.ibb.co/2cnshH6/card3.png" alt="" />
<h3>节省 150 美元 + 免费控制器</h3>
<p>
购买 Xbox One X 主机，免费选择让您的乐趣翻倍
额外的控制器。起价 349 美元。
</p>
<a href="#">学到更多<i class="fas fa-chevron-right"></i></a>
</div>
<div>
<img src="https://i.ibb.co/G57P0Pb/card4.png" alt="" />
<h3>新的 Microsoft Edge</h3>
<p>
期待更多。世界级性能，更多隐私，更多
生产力和更多的价值。
</p>
<a href="#">学到更多<i class="fas fa-chevron-right"></i></a>
</div>
</section> <!-- Xbox -->
<section class="xbox">
<div class="content">
<h2>Xbox Game Pass Ultimate</h2>
<p>Xbox Game Pass Ultimate Xbox Live Gold 和 100 多种高品质
控制台和 PC 游戏。和朋友一起玩，发现你的
下一个最喜欢的游戏。</p>
<a href="#" class="btn">
现在加入<i class="fas fa-chevron-right"></i>
</a>
</div>
</section> <!-- Home cards 2 -->
<section class="home-cards">
<div>
<img src="https://i.ibb.co/zVqhWn2/card5.png" alt="" />
<h3>微软团队</h3>
<p>
释放团队的力量。
</p>
<a href="#">现在去购物<i class="fas fa-chevron-right"></i></a>
</div>
<div>
<img src="https://i.ibb.co/mGZcxcn/card6.jpg" alt="" />
<h3>释放学习的力量</h3>
<p>
使用 Windows 10 设备让学生为未来做好准备。起价 219 美元。
</p>
<a href="#">现在去购物<i class="fas fa-chevron-right"></i></a>
</div>
<div>
<img src="https://i.ibb.co/NpPvVHj/card7.png" alt="" />
<h3>Windows 10 企业版</h3>
<p>
下载面向 IT 专业人员的 90 天免费评估。
</p>
<a href="#">现在下载<i class="fas fa-chevron-right"></i></a>
</div>
<div>
<img src="https://i.ibb.co/LkP4L5T/card8.png" alt="" />
<h3>探索 Kubernetes</h3>
<p>
了解 Kubernetes 的工作原理并开始使用云原生应用
今天的发展。
</p>
<a href="#">开始使用<i class="fas fa-chevron-right"></i></a>
</div>
</section> <!-- Carbon -->
<section class="carbon dark">
<div class="content">
<h2>致力于减少碳排放</h2>
<p>微软将在 2030 年实现碳负排放，到 2050 年我们将移除
公司自 1975 年成立以来排放的所有碳</p>
<a href="#" class="btn">
学到更多<i class="fas fa-chevron-right"></i>
</a>
</div>
</section> <!-- Follow -->
<section class="follow">
<p>关注微软</p>
<a href="https://facebook.com">
<img src="https://i.ibb.co/LrVMXNR/social-fb.png" alt="Facebook">
</a>
<a href="https://twitter.com">
<img src="https://i.ibb.co/vJvbLwm/social-twitter.png" alt="推特">
</a>
<a href="https://linkedin.com">
<img src="https://i.ibb.co/b30HMhR/social-linkedin.png" alt="领英">
</a>
</section>
</div>
<!-- Links -->
<section class="links">
<div class="links-inner">
<ul>
<li><h3>什么是新的</h3></li>
<li><a href="#">Surface Pro X</a></li>
<li><a href="#">Surface 笔记本电脑 3</a></li>
<li><a href="#">Surface Pro 7</a></li>
<li><a href="#">Windows 10 应用程序</a></li>
<li><a href="#">办公应用</a></li>
</ul>
<ul>
<li><h3>微软商店</h3></li>
<li><a href="#">账户资料</a></li>
<li><a href="#">下载中心</a></li>
<li><a href="#">微软商店支持</a></li>
<li><a href="#">退货</a></li>
<li><a href="#">较早的跟踪</a></li>
</ul>
<ul>
<li><h3>教育</h3></li>
<li><a href="#">教育中的Microsfot</a></li>
<li><a href="#">学生办公室</a></li>
<li><a href="#">适用于学校的 Office 365</a></li>
<li><a href="#">学生优惠</a></li>
<li><a href="#">微软 Azure</a></li>
</ul>
<ul>
<li><h3>企业</h3></li>
<li><a href="#">天蓝色</a></li>
<li><a href="#">应用程序源</a></li>
<li><a href="#">汽车</a></li>
<li><a href="#">政府</a></li>
<li><a href="#">卫生保健</a></li>
</ul>
<ul>
<li><h3>开发商</h3></li>
<li><a href="#">视觉工作室</a></li>
<li><a href="#">Windowszs 开发中心</a></li>
<li><a href="#">开发者网络</a></li>
<li><a href="#">技术网</a></li>
<li><a href="#">微软开发者</a></li>
</ul>
<ul>
<li><h3>公司</h3></li>
<li><a href="#">职业生涯</a></li>
<li><a href="#">关于微软</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">微软的隐私</a></li>
<li><a href="#">投资者</a></li>
</ul>
</div>
</section> <!-- Footer -->
<footer class="footer">
<div class="footer-inner">
<div><i class="fas fa-globe fa-2x"></i>美国英语）</div>
<ul>
<li><a href="#">网站地图</a></li>
<li><a href="#">联系微软</a></li>
<li><a href="#">隐私和 cookie</a></li>
<li><a href="#">使用条款</a></li>
<li><a href="#">商标</a></li>
<li><a href="#">安全环保</a></li>
<li><a href="#">关于我们的广告</a></li>
<li><a href="#">© 微软 2020</a></li>
</ul>
</div>
</footer>
CSS：
* {
box-sizing：边框框；
边距：0；
填充：0；
} 身体 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
背景：#fff;
颜色：#000；
字体大小：15px；
行高：1.5；
} 一个 {
颜色：#262626；
文字装饰：无；
} ul {
列表样式：无；
} 。容器 {
宽度：90%；
最大宽度：1100px；
边距：自动；
} /* 导航 */
.main-nav {
显示：弯曲；
对齐项目：居中；
justify-content: 之间的空格；
高度：60px；
填充：20px 0；
字体大小：13px；
} .main-nav .logo {
宽度：110px；
} .main-nav ul {
显示：弯曲；
} .main-nav ul li {
填充：0 10px；
} .main-nav ul li a {
底部填充：2px；
} .main-nav ul li a:hover {
边框底部：2px 实心 #262626;
} .main-nav ul.main-menu {
弹性：1；
左边距：20px；
} .menu-btn {
光标：指针；
位置：绝对；
顶部：20px；
右：30px；
z指数：2；
显示：无；
} .btn {
光标：指针；
显示：内联块；
边框：0；
字体粗细：粗体；
填充：10px 20px；
背景：#262626；
颜色：#fff;
字体大小：15px；；
} .btn:悬停{
不透明度：0.9；
} 。黑暗的 {
颜色：#fff;
} .dark .btn {
背景：#f4f4f4；
颜色：#333；
} /* 展示 */
.showcase {
宽度：100%；
高度：400px；
背景：url('https://i.ibb.co/zGSDGCL/slide1.png') no-repeat center center/cover;
显示：弯曲；
弹性方向：列；
对齐项目：居中；
文本对齐：居中；
证明内容：弹性结束；
底部填充：50px；
边距底部：20px；
} .showcase h2, .showcase p {
边距底部：10px；
} .showcase .btn {
边距顶部：20px；
} /* 家庭卡片 */
.home-cards {
显示：网格；
网格模板列：重复（4、1fr）；
网格间隙：20px；
边距底部：40px；
} .home-cards img {
宽度：100%；
边距底部：20px；
} .home-cards h3 {
边距底部：5px；
} .home-cards {
显示：内联块；
上边距：10px；
颜色：#0067b8；
文本转换：大写；
字体粗细：粗体；
} .home-cards a:hover i {
左边距：10px；
} /* Xbox */
.xbox {
宽度：100%；
高度：350px；
背景：url('https://i.ibb.co/tBJGPD9/xbox.png') 无重复中心中心/封面；
边距底部：20px；
} .xbox .内容{
宽度：40%；
填充：50px 0 0 30px；
} .xbox p，.碳 p {
边距：10px 0 20px；
} /* 碳 */
。碳 {
宽度：100%；
高度：350px；
背景：url('https://i.ibb.co/72cgtsz/carbon.jpg') no-repeat center center/cover；
} .碳.含量{
宽度：55%；
填充：100px 0 0 30px；
} /* 跟随 */
。跟随 {
显示：弯曲；
对齐项目：居中；
证明内容：弹性开始；
边距：30px 0 30px；
} 。跟随 * {
右边距：10px；
} /* 链接 */
.链接{
背景：#f2f2f2；
颜色：#616161；
字体大小：12px；
填充：35px 0；
} .links-inner {
最大宽度：1100px；
边距：0 自动；
填充：0 20px；
显示：网格；
网格模板列：重复（6、1fr）；
网格间隙：10px；
对齐项目：弹性开始；
证明内容：中心；
} .链接李{
行高：2.8；
} /* 页脚 */
.footer {
背景：#f2f2f2；
颜色：#616161；
字体大小：12px；
填充：20px 0；
} .footer-inner {
最大宽度：1100px；
边距：0 自动；
填充：0 20px 0 20px；
显示：弯曲；
对齐项目：居中；
justify-content: 之间的空格；
} . 页脚 div {
边距底部：20px；
显示：弯曲；
对齐项目：居中；
} . 页脚 div 我 {
右边距：10px；
} .footer ul {
显示：弯曲；
弹性包装：换行；
} .footer li {
右边距：30px；
边距底部：20px；
} @media（最大宽度：700px）{
.menu-btn {
显示：块；
} .menu-btn:悬停{
不透明度：0.5；
} .main-nav ul.right-menu {
右边距：50px；
} .main-nav ul.main-menu {
显示：块；
位置：绝对；
顶部：0；
左：0；
背景：#f2f2f2；
宽度：50%；
高度：100%；
右边框：#ccc 1px 实心；
不透明度：0.9；
内边距：30px；
变换：translateX（-500px）；
过渡：变换0.5s缓进出；
} .main-nav ul.main-menu li {
填充：10px；
边框底部：#ccc 实心 1px；
字体大小：14px；
} .main-nav ul.main-menu li:last-child {
边框底部：0；
} .main-nav ul.main-menu.show {
变换：translateX（-20px）；
} .home-cards {
网格模板列：重复（2、1fr）；
} .xbox .content p {
显示：无；
} .xbox .content h2 {
边距底部：20px；
} .碳.含量{
宽度：85%；
} .links .links-inner {
网格模板列：重复（2、1fr）；
}
} @media（最大宽度：500px）{
.home-cards {
网格模板列：1fr；
} .links .links-inner {
网格模板列：1fr；
} .links .links-inner ul {
边距底部：20px；
}
}
JavaScript：
document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('.main-menu').classList.toggle('show'));
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 微软主页克隆片段
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
