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确实太好用了 ...
随机推荐
- Kafka概念入门（一）
序:如何保证kafka全局消息有序? 比如,有100条有序数据,生产者发送到kafka集群,kafka的分片有4个,可能的情况就是一个分片保存0-25,一个保存25-50......这样消息在kafk ...
- Spring Boot 基础教程系列学习文档
Spring Boot基础教程1-Spring Tool Suite工具的安装 Spring Boot基础教程2-RESTfull API简单项目的快速搭建 Spring Boot基础教程3-配置文件 ...
- Runloop -------iOS
正文 1.Runloop是什么? Runloop是线程的基础架构部分.是一个事件循环处理.是用来不停的调配工作(可以节省CPU)和处理输入事件(输入源(input source)和定时源(timer ...
- 毕向东udp学习笔记3多线程聊天
项目功能: 实现了多线程下的发送接收,比较好 希望可以加入GUI,类似聊天软件一样,有一个消息输入框,捕获输入消息,作为发送线程 有一个显示消息框,接收消息并显示,作为接收线程 不知道的是,当在线程中 ...
- Java数组练习题小结
//2015/07/07 //Java数组小小练习题 /* 3. 写一个函数,计算一个整数数组的平均值 4. 自定义一个整数数组a,读入一个整数n,如果n 在数组中存在,则输出n 的下标:如果不存在, ...
- 用js实现文字提示层 ---总结
文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下: 需求: 当鼠标移入到红色字体是,提示框会显示在下 ...
- 纯css 构造的tip
css部分: <style> .abc{ margin-top:20px; } span{ position:relative; display: inline-block; back ...
- centos 安装gcc->联网 问题解决
本篇部分摘抄至TD_时缔 VMware虚拟机下安装centosmini版本,安装后第一件事就是yum update 但是有错:cannot find a valid baseurl for repo ...
- 【数据标识】iOS App下载渠道的统计需求
需求概述 我们现在有一个需求,某一个活动需要拉新所谓的拉新一般是推App下载,这个用户通过这个活动下载了App后,我们需要做到[在数据库中记录这个用户下载这个App是通过那个二维码渠道的,从效果上说, ...
- java 抽象(abstract) 构造 静态(static) 总结--2017-03-02
抽象类:不能实例化!子类继承抽象类, 实例化子类对象才可以调用, 多态的体现; 抽象方法:必须被重写才能被调用; 静态方法:类名直接调用,或者实例化对象调用; 构造方法:new后面的括号里面带参数,就 ...