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确实太好用了 ...
随机推荐
- 完成OSS.Http底层HttpClient重构封装 支持标准库
OSS.Http项目对于.Net Standard标准库的支持已经迁移完毕,OSS开源系列两个最底层的类库已经具备跨运行时支持的能力.由于OSS.Http类库是几年前我参照RestSharp的思路,完 ...
- localStorage 如何存储JSON数据并读取JSON数据
localStorage是HTML5提供的再客户端实现本地存储的一种方法,但是localStorage方法只能存储字符串数据,有时候我们需要存储对象到本地比如:JSON:那么,localStorage ...
- DHCP协议
来源摘取自百度百科 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服 ...
- java udp (使用类调用双通信)1
项目需要就使用了UDP通信,做了java的双方通信,其实代码还是来自之前的udp学习代码,自己加了注释,并且优化的使用类来封装关于通信类库的使用代码 目的是为了在安卓项目中使用时,可以通过实例化,调用 ...
- 张高兴的 UWP 开发笔记：用 Thumb 控件仿制一个可拖动 Button
在 WPF 上可用的控件拖动方法在 UWP 上大多没用,那干脆用 Thumb 仿制一个吧. 关于 Thumb 控件的教程也不多,毕竟在 WPF 控件拖动有很多种方法, Thumb 就显得很鸡肋了.下面 ...
- php基础知识掌握——四种界定符
闲来无事,研究了与java.c#完全不同的领域php,php即(外文名:PHP: Hypertext Preprocessor,中文名:"超文本预处理器"),对于学习php的初学者 ...
- html5_canvas初学
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Swift3.0 中 Strings/Characters 闲聊
前言 本篇文章主要浅析字符串\字符在 Swift 和 Objective-C 之间的区别及其简单用法.如有不妥的地方还望大家及时帮忙纠正. 字符串判空 在 swift 语言中空字符串初始化方式常用的有 ...
- 关于boostrap的thead固定tbody滚动
原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...
- Unity3d中如何混用三种脚本语言？
首先要明白,这三种说的混用是指文件级别的混用,就是说一个文件是由一种语言写的.而不是说你这一个文件可以混用这三种语言,注意这是不允许的. 第二要明白,在unity3d中为什么可以使用三种语言混合开发? ...