CSS -- 练习之制作简单商品图
只加深了印象，出错点：未给左侧人物大图宽高，致使第二行图层叠在其上；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <style type="text/css">
/*
* @Author: Mingming
* @Date: 2017-03-04 18:44:25
* @Last Modified by: Mingming
* @Last Modified time: 2017-03-04 22:36:03
*/
body,div,p,a{
margin: 0;
height: 0;
text-decoration: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
body{
background: #AAAAAA;
font-size: 14px;
}
.big-box{
width: 1226px;
margin: 0 auto;
}
.title{ height: 38px;
}
.l-title{ font:500 18px 微软雅黑;
}
/* 左侧大图 */
.left-pic{
margin-bottom: 4px;
width: 234px;
height: 614px;
}
/* 第一个右侧小图 */
.r-pic{
background: #ffffff;
width: 234px;
height: 300px;
margin: 0 0 14px 14px;
text-align: center;
}
.r-pic img{
margin-top: 21px ;
}
.store-name,.store-explain{
font: 12px 微软雅黑 ;
margin-top: 6px;
margin-bottom: 25px;
}
a{
color: #000000;
}
.store-money{
margin-top: 17px;
} .store-money a{
color: #FFA500;
font-weight: 700;
}
/* 包邮 */
.free-post{
width: 64px;
height: 20px;
/* z-index: 100; */
background: #FFA500;
color: #FFFFFF;
margin: 0 auto;
font-size: 12px;
} </style>
</head>
<body>
<div class="big-box">
<!-- 顶部导航 -->
<div class="title"> <p class="l-title fl">智能硬件</p>
<p class="r-title fr">查看全部</p></div>
<!-- 左侧大图 -->
<div class="left-pic fl"><a href="#"><img src="data:images/124d82cc-cfce-44ab-b711-28b21be81683.jpg" alt=""> </a>
</div>
<!-- 第一个右侧小图 -->
<div class="r-pic fl">
<div class="free-post">免邮费</div>
<img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
<p class="store-name"><a href="#">小米路由器3</a></p>
<p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
<p class="store-money"><a href="#">149元</a></p>
</div>
<!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
<div class="r-pic fl">
<div class="free-post">免邮费</div>
<img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
<p class="store-name"><a href="#">小米路由器3</a></p>
<p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
<p class="store-money"><a href="#">149元</a></p>
</div>
<!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
<div class="r-pic fl">
<div class="free-post">免邮费</div>
<img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
<p class="store-name"><a href="#">小米路由器3</a></p>
<p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
<p class="store-money"><a href="#">149元</a></p>
</div>
<!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
<div class="r-pic fl">
<div class="free-post">免邮费</div>
<img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
<p class="store-name"><a href="#">小米路由器3</a></p>
<p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
<p class="store-money"><a href="#">149元</a></p>
</div>
<!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
<div class="r-pic fl">
<div class="free-post">免邮费</div>
<img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
<p class="store-name"><a href="#">小米路由器3</a></p>
<p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
<p class="store-money"><a href="#">149元</a></p>
</div>
<!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
<div class="r-pic fl">
<div class="free-post">免邮费</div>
<img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
<p class="store-name"><a href="#">小米路由器3</a></p>
<p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
<p class="store-money"><a href="#">149元</a></p>
</div>
<!-- 第一个右侧小图结束 --> <!-- 第一个右侧小图 -->
<div class="r-pic fl">
<div class="free-post">免邮费</div>
<img src="data:images/T1rQAgB7Av1RXrhCrK.jpg" height="160" width="160" alt="">
<p class="store-name"><a href="#">小米路由器3</a></p>
<p class="store-explain"><a href="#">四天线设计，更安全更稳定</a></p>
<p class="store-money"><a href="#">149元</a></p>
</div>
<!-- 第一个右侧小图结束 --> </div>
</body>
</html>
CSS -- 练习之制作简单商品图的更多相关文章
- 用CSS和jQuery制作简单的下拉框
请选择 百度 谷歌 雅虎 新浪 dowebok 代码 素材 模板 教程 示例下载 // li', function() { var parent = $(this).closest('.select' ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- 使用Compass制作雪碧图
遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...
- css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...
- JSP制作简单登陆
JSP制作简单登陆界面 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表 这里我先把jsp文件先放在Web-INF外面访问 需要建立的几个文 ...
- 利用compass制作雪碧图
compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...
- FusionCharts制作实时刷新图
转自:http://yklovejava-163-com.iteye.com/blog/1889949 下面介绍的是用FusionCharts制作实时刷新图的过程(FusionCharts确实太好用了 ...
随机推荐
- ASP.NET Core MVC 中设置全局异常处理方式
在asp.net core mvc中,如果有未处理的异常发生后,会返回http500错误,对于最终用户来说,显然不是特别友好.那如何对于这些未处理的异常显示统一的错误提示页面呢? 在asp.net c ...
- linux gdb基本概念
GDB是一个功能强大的调试器,它是一个自由软件,能够用在许多UNIX平台上.它同时也是Linux系统中的默认调试器.GDB已被移植到许多其他的计算机平台上,并且能够用于调试嵌入式实时系统.一般来说,G ...
- bootstrap - btn
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SharePoint 2016 配置用户请求应用程序
最近看了看SharePoint的应用程序,觉得还是不错的,以前都没怎么注意过这样的功能.当然,应用程序除了让用户和管理员添加外,还可以让他们进行请求,把应用程序添加到应用程序目录,然后由统一的管理员进 ...
- JavaWeb验证码的使用
在Java Web开发中,我们经常需要使用到验证码功能,一般情况下,我们可以将产生的验证码保存到服务器端中的session中,这种方式中,是使用服务器来保证验证码的功能.另外,我们也可以采用js产生验 ...
- js设计模式--迭代器模式
迭代器模式: 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示.js中我们经常会封装一个each函数用来实现迭代器. 理解的意思:提供一个方法,去把对象的每一项按 ...
- vim高亮设置
vim高亮设置 前提: 查看vim是否完整安装 rpm -qa | grep vim 若完整安装,则会出现如下相关信息 vim-filesystem-7.4.629-5.el6.x86_64 vim- ...
- [Linux] PHP程序员玩转Linux系列-备份还原MySQL
1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 前几天有个新闻,说是g ...
- 软件测试作业1 — 令我印象最深的BUG
回顾从大一到大三的学习生活,我在学习过程中遇到过许多BUG,刚开始和罗凯老师学习C++时从来没有接触过编程,那时候导致程序不能运行的原因多是语法错误和拼写错误,到了大一下学期,错误多出现在循环与条件跳 ...
- 每天一个Linux命令（05）--rm命令
自从学会了用mkdir创建目录之后,整个系统里就只能看到一堆空目录了,囧~ 那么今天我们来学一下如何清理这些空目录吧--rm命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录 ...