微软主页克隆
微软主页克隆免费下载 在 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