html+css仿写小米商城

fine1998_

已于 2022-11-14 15:36:50 修改

阅读量2.1k

点赞数 11

文章标签： html5 css3 前端 vscode

于 2022-04-25 21:02:39 首次发布

本文链接：https://blog.csdn.net/fine1998_/article/details/124410745

版权

本文介绍了一次使用HTML5和CSS3仿写小米商城页面的过程，旨在提升前端编码技能和熟悉PC端网页布局。主要内容包括：成果展示、仿写前准备、HTML头部优化、各模块详细描述，特别探讨了浮动布局、清除浮动、下拉框的过渡效果以及全屏跨度上边框的实现。

摘要由CSDN通过智能技术生成

利用空余时间仿写了一个小米商城的页面，都是最基础的结构和样式的写法，主要想锻炼自己写代码的能力和熟悉一下PC端网页的布局。等学完其他知识再来做补充。这里先记录一下我的仿写思路，以免忘记。

一、成果展示：

小米商城仿写

二、仿写前准备：

1、将模块分类，使用html5新标签

2、确定版心宽度以及位置

3、观察动态效果，能够使用css做出来的有：鼠标移入、过渡、表单获取焦点

三、html头部准备：

1、html的seo优化

<!-- seo优化 -->
    <!-- 1.标题 -->
    <title>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <!-- 2.网站说明 -->
    <meta name="description" conten

最低0.47元/天解锁文章