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确实太好用了 ...
随机推荐
- java_XML_JAXB
JAXB 可以实现Java对象与XML的相互转换,在JAXB中,将一个Java对象转换为XML的过程称之为Marshal,将XML转换为Java对象的过程称之为UnMarshal. 下面使用的是JDK ...
- Syslog4j如何实现接收日志
1.Syslog4j是一个实现Syslog(RFC3164)协议的Java开源类库包括客户端与服务器端.通过 UDP/IP, TCP/IP, TCP/IPover SSL/TLS, Unix Sysl ...
- phpcms的安装以及简单使用
先来说一下phpcms的安装 首先从网上下个phpcms的压缩包,解压 解压后就是个这样的文件夹 这里要注意,下载的时候要放在平时存动态网页的那个地址,www目录下,如图 点开phpcms文件夹,里面 ...
- JS作用域理解
1.JS解析步骤: a.预解析 将变量声明提升: 将函数声明及函数内容提升,可以理解成原来位置的函数在解析代码时已经提到代码初始位置: 遇到重名,只留下一个: 如有重名变量和函数,留下函数: 如有两个 ...
- BZOJ 1877: [SDOI2009]晨跑（费用流）
看到要求两个量就下意识的想到了费用流= =，先把一个点拆成两个点就能够解决一个的只经过一次的限制 CODE： #include<cstdio>#include<iostream> ...
- 【译】C++日志（Logging in C++）
声明:原创翻译,转载请注明出处!http://www.cnblogs.com/mewmicro/p/6432507.html 注:作者Petru Marginean,2007/09/05 日志记录 ...
- 从HTML5规范弄清i、em、b、strong元素的区别
为了语义化,HTML5增加了不少新标签.其中i.em和b.strong这两组标签是最容易弄混的,不好好去探究一下,还真说不清.这个也是前端面试中经常会问的问题.今天从源头上,也就是从HTML5的文档( ...
- angular 2 animate 笔记
好久没有在这里写点笔记了.时隔已久,angular1 去 angular2 咯 笔记来源:https://angular.cn/docs/ts/latest/guide/animations.html ...
- 读阮一峰对《javascript语言精粹》的笔记，我有疑问。
<javascript语言精粹>是一本很棒的书籍,其中作者在附录列出了12种他所认为的javascript语言中的糟粕. 我最近开始跟读前端前辈的博客,其中读到了阮一峰的<12种不宜 ...
- iOS 原生的 UIButton 点击事件是不允许带多参数的，唯一的一个参数就是默认UIButton本身 那么我们该怎么实现传递多个参数的点击事件呢？
UIButton *btn = // create the button objc_setAssociatedObject(btn, "firstObject", someObje ...