淘宝模块

在这里插入图片描述
这是我做的一个小案例练习,我就来简单的说一下吧!
在这里插入图片描述
在这里插入图片描述
首先第一部分打一个div在给他一个类,然后到css写样式设置他宽度和高度背景颜色为灰色,并且让背景垂直居中在往下移动80橡数,在设置他的边框宽度为1橡数.实线.背景颜色为深灰色就完成了第一部分。
在这里插入图片描述
在这里插入图片描述
再来就是第二部分,打一个div然后在给他一个类,到css写样式设置他的宽度和高度.背景颜色为白色就完成了第一步,回到源代码在里面打一个div在给他一个类在里面打一个img是放置那小小的图片h3里面写“众筹”,然后在到css里面写样式设置img的图片让他向下移动14在往左移动55橡数就完成了第二步,再来就是设置h3里面的文字在向左移动,在向上移动就完成了第二部分。
在这里插入图片描述
在这里插入图片描述
第三部分的内容,在源代码打一个div然后在给他一个类里面包裹着img标签放的是小型的无人机图片p2和p标签则放的是一些文字,然后就到css写样式设置类名的宽170橡数高150橡数背景颜色为白色在移动一下位置就完成了第一步,再来就是设置img的图片左外边距和上外边距都设为0橡数就完成了第二步,在设置p2和p标签里面的文字的位置让他垂直在中间的位置在更改一下p标签里面的文字颜色就完成了第三部分。
在这里插入图片描述
在这里插入图片描述 在源代码打一个div然后在给他一个类,在里面打两个img标签在放置两张图片,到css写样式设置他的宽77橡数,在移动图片的位置就完成了第一步,打一个div在给他一个类在里面打两个span标签在里面写下一些文字,在到css写样式设置他左外边距13橡数和文字大小14橡数就完成了第二步,同样在源代码里面打一个div在给他一个类,在里面打三个span标签在里面输入一些文字,下面两个的前面一个空格一个横杆,就到css写样式设置字体大小和他的左内边距就完成了第三步,再来就是第四步在源代码打一个div在给他一个类,之后在里面打两个span标签其中一个加一个2,第一个span里面加两个中括号用i标签来包裹着中间的字用两个空格隔开,然后在到css写样式先设置第一个span里面的文字大小14橡数.向右移动8橡数.文字颜色为红色还有鼠标移入光标就变成小手,里面的i标签设置他的颜色为灰色,再把中括号的斜体样式去掉,在设置span2里面的文字大小和左内边距就完成了第四部分,其他几个复制在改一下图片和文字完成了。