广州地铁

这是 我做的一个广州地铁的一个小案例练习，我就来说一下吧！


首先来说一下第一步在源代码打一个div在给他一个类，然后在到css样式那里写他的样式，设置他的宽度和高度再放一张大的背景图片在让他居中，就完成了第一个。第二个就是写他里面的内容，在源代码先打一个div在给他一个类然后在里面打一个img放置图片，之后就到css样式里面写他的样式设置上内边距和左内边距移动图片位置，就完成了第二个。接下来是第三个，回到源代码在第二个div里面打一个div在给他一个类,在里面打一个h3标签和p标签在里面写一些文字，然后在css那里写一些样式移动它文字的位置，在设置p标签里面的文字大小和文字颜色就完成了第三步。之后回到源代码在下面打一个div在给他一个类，就到css写样式设置他的宽度2橡数高度16橡数背景颜色为黄色，在移动一下图形的位置就完成了第四步。然后在到源代码里面在下面打一个div再给一个类，之后在里面打一个h5标签，然后在到css写样式移动一下文字的位置设置一下文字颜色就完成了第一部分。


第二部分就是右上角的五个图片，首先第一个div在给他一个类，然后在到css里面写样式设置他的宽度25橡数高度25橡数再放一张小房子的背景图片然后在移动他的位置，之后就来做一个鼠标移入的时候图片颜色发生变化，打一个h2后面在加一个伪类里面在放一个背景图片。不过这个背景图片的颜色是到PS是用同样的图片在复制一份，然后把其中的一个图片弄成黑色在调整一下透明度差不多就行了，在设置鼠标移入就会变成小手的样子，剩下的四个图片复制就行了在改一下背景图片就完成了第二部分。


第三部分这是这个搜索框，首先第一步打一个div在给他一个类，然后在里面打一个input标签,然后在到css写样式设置他的宽度530橡数高度40橡数，在移动它的位置然后在设置圆角的弧度，还有边框的宽度为1橡数.实线.颜色为灰色，下一步就是设置input里面的文字距离，打input[type=“text”],.input-mg这样的类名，因为我不知道怎么说所以我就用代码表示，写好了之后就来写他里面的样式，设置左内边距让里面的文字向右移动50橡数，然后在放一张他的背景图片.设置宽内的颜色为白色.再让图片不重复出现，下面是设置字体大小15橡数就完成了第二步，第三步就是打一个div再给一个类放在input的下面，然后到css写样式设置他宽的120橡数.高度44橡数.背景颜色为红色.圆角效果5橡数.还有背景颜色移动的方向.在给他古绝对定位就完成了第三步，第四步打一个div然后在给他一个类在里面打一个h4标签在标签里面打一个“搜索”，就到css写样式用左外边距.上外边距来移动文字的位置，在给他打一个绝对定位，下面在打一个potl在后面加一个伪类里面就设置一个鼠标移入文字颜色为蓝色。就完成了第三部分。


然后就是第四部分，第一个div在给他一个类里面打一个img放置像美元的标志的图片h5和h3标签就分别写下一些文字，就到css那里写样式设置coni类名的宽度272橡数高度175橡数背景颜色为透明红色的图形，在移动一下图形的位置就行了，然后就是img里的图片让他向右移动在让他向下移动到差不多的位置，在设置h5标签里面的文字让文字向右移动25橡数.字体样式为灰色.字体大小为12橡数，在设置下一行h3里面的文字让他向右移动在让他向上移动，就完成了第四部分。其他几个都是差不多的做法只要复制在改一下里面的图片和文字就行了。

接下来是最后一步打一个div在给他一个类里面在打一个h6标签在里面写下一些文字，然后在到css写一些样式让他向右移动530橡数在向下移动128橡数在设置他的文字颜色为灰色，就完成了最后一步。