只加深了印象，出错点：未给左侧人物大图宽高，致使第二行图层叠在其上；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.  
  6.         <style type="text/css">
  7.         /*
  8. * @Author: Mingming
  9. * @Date:   2017-03-04 18:44:25
  10. * @Last Modified by:   Mingming
  11. * @Last Modified time: 2017-03-04 22:36:03
  12. */
  13. body,div,p,a{
  14.     margin: 0;
  15.     height: 0;
  16.     text-decoration: none;
  17. }
  18. .fl{
  19.     float: left;
  20. }
  21. .fr{
  22.     float: right;
  23. }
  24. body{
  25.     background: #AAAAAA;
  26.     font-size: 14px;
  27. }
  28. .big-box{
  29.     width: 1226px;
  30.     margin: 0 auto;
  31. }
  32. .title{
  33.  
  34.     height: 38px;
  35. }
  36. .l-title{
  37.  
  38.         font:500 18px 微软雅黑;
  39. }
  40. /* 左侧大图 */
  41. .left-pic{
  42.     margin-bottom: 4px;
  43.     width: 234px;
  44.     height: 614px;
  45. }
  46. /* 第一个右侧小图 */
  47. .r-pic{
  48.     background: #ffffff;
  49.     width: 234px;
  50.     height: 300px;
  51.     margin: 0 0 14px 14px;
  52.     text-align: center;
  53. }
  54. .r-pic img{
  55.     margin-top: 21px ;
  56. }
  57. .store-name,.store-explain{
  58.     font:  12px  微软雅黑 ;
  59.     margin-top: 6px;
  60.     margin-bottom: 25px;
  61. }
  62. a{
  63.     color: #000000;
  64. }
  65. .store-money{
  66.     margin-top: 17px;
  67. }
  68.  
  69. .store-money a{
  70.     color: #FFA500;
  71.     font-weight: 700;
  72. }
  73. /* 包邮 */
  74. .free-post{
  75.     width: 64px;
  76.     height: 20px;
  77.     /* z-index: 100; */
  78.     background: #FFA500;
  79.     color: #FFFFFF;
  80.     margin: 0 auto;
  81.     font-size: 12px;
  82. }
  83.  
  84.         </style>
  85.     </head>
  86.     <body>
  87.     <div class="big-box">
  88.     <!-- 顶部导航 -->
  89.     <div class="title"> <p class="l-title fl">智能硬件</p>
  90.                         <p class="r-title fr">查看全部</p></div>
  91.      <!-- 左侧大图 -->
  92.     <div class="left-pic fl"><a href="#"><img src="data:images/124d82cc-cfce-44ab-b711-28b21be81683.jpg"  alt=""> </a>
  93.     </div>
  94.      <!-- 第一个右侧小图 -->
  95.     <div class="r-pic fl">
  96.         <div class="free-post">免邮费</div>
  97.         <img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
  98.         <p class="store-name"><a href="#">小米路由器3</a></p>
  99.         <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
  100.         <p class="store-money"><a href="#">149元</a></p>
  101.     </div>
  102.     <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
  103.     <div class="r-pic fl">
  104.         <div class="free-post">免邮费</div>
  105.         <img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
  106.         <p class="store-name"><a href="#">小米路由器3</a></p>
  107.         <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
  108.         <p class="store-money"><a href="#">149元</a></p>
  109.     </div>
  110.     <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
  111.     <div class="r-pic fl">
  112.         <div class="free-post">免邮费</div>
  113.         <img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
  114.         <p class="store-name"><a href="#">小米路由器3</a></p>
  115.         <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
  116.         <p class="store-money"><a href="#">149元</a></p>
  117.     </div>
  118.     <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
  119.     <div class="r-pic fl">
  120.         <div class="free-post">免邮费</div>
  121.         <img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
  122.         <p class="store-name"><a href="#">小米路由器3</a></p>
  123.         <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
  124.         <p class="store-money"><a href="#">149元</a></p>
  125.     </div>
  126.     <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
  127.     <div class="r-pic fl">
  128.         <div class="free-post">免邮费</div>
  129.         <img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
  130.         <p class="store-name"><a href="#">小米路由器3</a></p>
  131.         <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
  132.         <p class="store-money"><a href="#">149元</a></p>
  133.     </div>
  134.     <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
  135.     <div class="r-pic fl">
  136.         <div class="free-post">免邮费</div>
  137.         <img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
  138.         <p class="store-name"><a href="#">小米路由器3</a></p>
  139.         <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
  140.         <p class="store-money"><a href="#">149元</a></p>
  141.     </div>
  142.     <!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
  143.     <div class="r-pic fl">
  144.         <div class="free-post">免邮费</div>
  145.         <img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
  146.         <p class="store-name"><a href="#">小米路由器3</a></p>
  147.         <p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
  148.         <p class="store-money"><a href="#">149元</a></p>
  149.     </div>
  150.     <!-- 第一个右侧小图结束 -->
  151.  
  152. </div>
  153.     </body>
  154. </html>

CSS -- 练习之制作简单商品图的更多相关文章

  1. 用CSS和jQuery制作简单的下拉框

    请选择 百度 谷歌 雅虎 新浪 dowebok 代码 素材 模板 教程 示例下载 // li', function() { var parent = $(this).closest('.select' ...

  2. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  3. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  4. 使用Compass制作雪碧图

    遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...

  5. css中的em 简单教程 -- 转

    先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...

  6. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  7. JSP制作简单登陆

    JSP制作简单登陆界面 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表 这里我先把jsp文件先放在Web-INF外面访问 需要建立的几个文 ...

  8. 利用compass制作雪碧图

    compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...

  9. FusionCharts制作实时刷新图

    转自:http://yklovejava-163-com.iteye.com/blog/1889949 下面介绍的是用FusionCharts制作实时刷新图的过程(FusionCharts确实太好用了 ...

随机推荐

  1. java_db常见错误总结

    1.java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符 在拼写seq时是否存在存在特殊字符,如:常见语句后面添加了;2.ORA-01722:无效数字解决 ...

  2. Omi原理-Hello Omi

    Hello Omi Omi框架的每个组件都继承自Omi.Component,本篇会去完成Omi的Component的基本锥形,让其能够渲染第一个组件. omi.js实现 var Omi = {}; O ...

  3. javaweb log4j显示完整sql日志

    javaweb显示完整sql日志 所需jar包: log4j-1.2.17.jar log4jdbc-1.2.jar slf4j-api-1.7.12.jar slf4j-log4j12-1.7.12 ...

  4. CSS3知识点整理（四）----布局样式及其他

    包括CSS3多列布局样式.Flexbox伸缩布局.盒子模型等.重点介绍了Flexbox伸缩布局的各种属性用法. 一.多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给 ...

  5. matlab 全局变量的使用举例

    昨天在写项目时,想要把获取到的临时变量放入一个全局变量,为以后的使用做准备,结果总是出错,今天做了一个小程序,放在这里备用. 自定义函数: global_p.m function y=global_p ...

  6. 前端开发面试题总结之——CSS3

    ____________________________________________________________________________________________ 相关知识点 布 ...

  7. JAVA程序测试之Swing编程

    package swingtest; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt. ...

  8. Spring框架(4)---AOP讲解铺垫

    AOP讲解铺垫      不得不说,刚开始去理解这个Aop是有点难理解的,主要还是新的概念比较多,对于初学者一下子不一定马上能够快速吸收,所以我先对什么事Aop做一个解释: 首先说明:本文不是自己所写 ...

  9. 【Zookeeper】源码分析之服务器（四）

    一.前言 前面分析了LeaderZooKeeperServer,接着分析FollowerZooKeeperServer. 二.FollowerZooKeeperServer源码分析 2.1 类的继承关 ...

  10. “使用多target来构建大量相似App”，唐巧大神理论验证（附工程代码地址）

    无意间看到巧神的文章时,感觉非常兴奋,此文章正好解决了公司目前项目的痛点. 读到以下关键一段时,不甚明了,故自己做了实验分享给有缘人. "我们的每个课程的资源文件都具有相同的文件名,例如首页 ...