效果图:
要做成上图所示的样子,那么我们就得按照步骤慢慢来。
步骤:
1.了解整体的构成(拆分)
2.从一个大的盒子拆分成不同的小的盒子
比如手机图片就是一个盒子,文字是一个盒子,价格是一个盒子,分开来做
3.再依次填充内容就行了
步骤第一步:整体框架布局
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米案例</title>
<style>
* {
padding: 0