微软主页克隆

微软主页克隆

微软主页克隆免费下载 在 HTML、CSS 和 JavaScript 中

HTML：







表面交易



Select Surfaces 现已开始销售 - 售完即止



现在去购物





新 Surface Pro 7



看看助理凯蒂·索沃斯如何。 49 人队的教练，使用 Surface Pro 7
把她的计划付诸实施。


学到更多



新 Surface 笔记本电脑 3



用轻薄优雅的设计有力地表达自己，
更快的性能，以及长达 11.5 小时的电池续航时间。


学到更多



节省 150 美元 + 免费控制器



购买 Xbox One X 主机，免费选择让您的乐趣翻倍
额外的控制器。起价 349 美元。


学到更多



新的 Microsoft Edge



期待更多。世界级性能，更多隐私，更多
生产力和更多的价值。


学到更多




Xbox Game Pass Ultimate


Xbox Game Pass Ultimate Xbox Live Gold 和 100 多种高品质
控制台和 PC 游戏。和朋友一起玩，发现你的
下一个最喜欢的游戏。



现在加入






微软团队



释放团队的力量。


现在去购物



释放学习的力量



使用 Windows 10 设备让学生为未来做好准备。起价 219 美元。


现在去购物



Windows 10 企业版



下载面向 IT 专业人员的 90 天免费评估。


现在下载



探索 Kubernetes



了解 Kubernetes 的工作原理并开始使用云原生应用
今天的发展。


开始使用




致力于减少碳排放


微软将在 2030 年实现碳负排放，到 2050 年我们将移除
公司自 1975 年成立以来排放的所有碳



学到更多
















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

posted @ 2022-09-27 12:10  哈哈哈来了啊啊啊  阅读(160)  评论(0)    收藏  举报