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确实太好用了 ...
随机推荐
- ion-scroll zooming="true" android端无法缩放的问题
很久很久没更新博客了,从今天开始决定以后陆续写一些博文,总结下自己在开发中碰到的问题. ionic项目.ion-scroll zooming="true" 在android端无法缩 ...
- android 项目更改包名的方法
本文章全文转载: http://www.2cto.com/kf/201304/206747.html 1.在项目上右键,选择android tools->rename application p ...
- Ansible之 Inventory 资源清单介绍
一.Inventory 库存清单文件 1.Inventory 作用 Ansible 可以在同一时间针对多个系统设施进行管理工作.它通过选择Ansible 资源清单文件中列出的系统,该清单文件默认是在/ ...
- SpringMVC:学习笔记(1)——理解MVC及快速入门
SprigMVC-理解MVC及快速入门 说明: 传统MVC-->JSPModel2-->Front Controller + Application Controller + Page C ...
- 这是一款可以查阅Github上的热门趋势的APP
随时查阅当前Github上的热门趋势.使用Material Design设计风格,和流行的MVP+Retrofit+RxJava框架.数据抓取自https://github.com/trending ...
- 基于微博数据用 Python 打造一颗“心”
一年一度的虐狗节刚过去不久,朋友圈各种晒,晒自拍,晒娃,晒美食,秀恩爱的.程序员在晒什么,程序员在加班.但是礼物还是少不了的,送什么好?作为程序员,我准备了一份特别的礼物,用以往发的微博数据打造一颗“ ...
- 前端Cookie与Session的区别
我们在实际生活中总会遇到这样的事情,我们一旦登录(首次输入用户名和密码)某个网站之后,当我们再次访问的时候(只要不关闭浏览器),无需再次登录.而当我们在这个网站浏览一段时间后,它会产生我们浏览的记录, ...
- android学习5——画图问题
重写View中的onDraw函数可以实现画图.代码如下: @Override public void onDraw(Canvas canvas) { Paint paint = new Paint() ...
- maven引用net.sf.json-lib
json-lib提供了两个jdk版本的实现, json-lib-2.1-jdk13.jar和json-lib-2.1-jdk15.jar <dependency> <gro ...
- 《HelloGitHub月刊》第11期
<HelloGitHub>第11期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高质量 ...