首页 > 其他分享 >微软主页克隆

微软主页克隆

时间:2022-09-27 12:48:23浏览次数:78  
标签:克隆 主页 微软 ul 边距 nav 20px main

微软主页克隆

微软主页克隆免费下载 在 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 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/39634/09232712

标签:克隆,主页,微软,ul,边距,nav,20px,main
From: https://www.cnblogs.com/amboke/p/16734149.html

相关文章