【小练习05】HTML+CSS--淘宝商铺小页面
要求实现如下效果图：
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #f7f7f7;
}
h2,h3,p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
#wrap{
width: 260px;
padding-top: 4px;
}
#wrap h2{
height: 20px;
background: url(images/title_img.gif) no-repeat;
text-indent: 99px;
font: bold 12px/17px '宋体';
color: #6c6c6c;
margin-bottom: 14px;
}
.box{
background: #fff;
border: 1px solid #e8e8e8;
}
.list{
padding: 12px 14px 16px 14px;
border-bottom: 1px solid #e8e8e8;
}
.list h3{
font: bold 12px/23px '宋体';
color: #444444;
}
.list p{
font: 12px/23px '宋体';
}
.list p a{
color: #6c6c6c;
padding: 0 6px 0 10px;
border-right: 1px solid #eaeaea;
}
.list p a.noPadding{
padding-left: 0;
}
.list p a.noBorder{
border-right: none;
}
.list ul{
font-size: 0;
padding-top: 6px;
}
.list ul li{
display: inline-block;
}
.center{
margin: 0 10px;
}
.look{
height: 33px;
padding-top: 4px;
background: #e9e9e9 url(images/ico_02.gif) no-repeat 82px 12px;
text-indent: 112px;
}
.look a{
font: 12px/33px '宋体';
color: #6c6c6c;
/*position: relative;
top: 3px;*/
}
</style>
</head>
<body>
<div id="wrap">
<h2>你可能喜欢的店铺</h2>
<div class="box">
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="data:images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="data:images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="data:images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="data:images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="data:images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="data:images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="data:images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="data:images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="look"><a href="#">换一组看看</a></div>
</div>
</div>
</body>
</html>
【小练习05】HTML+CSS--淘宝商铺小页面的更多相关文章
- jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
- iOS - 小功能 跳转到淘宝或天猫的商品展示详情页
最近做iOS项目的时候遇到一个需求,点击广告页,跳转到淘宝或天猫的商品详情页. 具体需要是这样: 1)安装了淘宝:跳转到淘宝详情页. 2)没装淘宝,装了天猫:跳转到天猫详情页 3)淘宝.天猫都没装:跳 ...
- ios 类似的效果淘宝商品详细页面
今天试着写ios 分类似影响淘宝的商品详细页面 我使用第三方库EGORefreshTableHeaderView有一个下拉效果刷新PWLoadMoreTableFooterView上拉电阻负载许多其他 ...
- 淘宝双十一页面（Flexible）demo
下面的代码是看了大漠 使用Flexible实现手淘H5页面的终端适配 做的一个demo. <!DOCTYPE html> <html lang="en" ng-a ...
- 淘宝双十一页面（Flexible）
以下demo点我下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- 淘宝弹性布局方案lib-flexible实践
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...
- 【转】淘宝技术牛p博客整理
转自:http://blog.csdn.NET/zdp072/article/details/19574793 淘宝技术委员会是由淘宝技术部高级技术人员组成的一个组织,共分为Java分会.C/C++分 ...
- 淘宝UWP中的100个为什么
从淘宝UWP第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...
随机推荐
- jdk8的新特性 Lambda表达式
很多同学一开始接触Java8可能对Java8 Lambda表达式有点陌生. //这是一个普通的集合 List<Employee> list = em.selectEmployeeByLog ...
- MongoDB系列：把mongodb作为windows的服务来启动
1.首先切换到mongodb安装目录下的bin目录,在控制台直接运行以下命令 "C:\Program Files\MongoDB\Server\3.0\bin\mongod.exe" ...
- 【BFS + Hash】拼图——携程2017春招编程题2
写在前面 前天参加了携程的网测--还是感觉自己太!渣!了! _(:з」∠)_ 时光匆匆啊,已经到了开始思考人生的时候了(算了不矫情了)--总之写个博客来督促一下自己.之前太懒了,很多时候都是输在 ...
- iOS 让View始终在屏幕最上层
UIView层次管理 放到最上层 放到最下层 将一个UIView显示在最前面只需要调用其父视图的 bringSubviewToFront()方法. 将一个UIView层推送到背后只需要调用其父视图的 ...
- 篇3 安卓app自动化测试-搞定界面元素
篇3 安卓app自动化测试-搞定界面元素 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),今天是<安卓app自动化测试>的第三 ...
- css3 felx布局
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. [css] .box ...
- EasyUI datagrid默认勾选checkbox时注意事项
在使用easyui的datagrid默认选中复选框时遇到的一个问题:就是加载程序默认选中复选框时死活选不中,查了好多资料才知道是easyui的datagrid的singleSelect属性设置为‘tr ...
- 厉害了我的雅虎！卖掉主业后更名为阿里他爸(Altaba)
据雅虎周一向美国证券交易委员会(SEC)提交的文件显示,在美国通信巨头Verizon斥资48亿美元收购雅虎的交易完成后,该公司首席执行官玛丽莎o梅耶尔(Marissa Mayer)将退出公司董事会. ...
- ABP官方文档翻译 2.5 设置管理
设置管理 介绍 关于 ISettingStore 定义设置 设置范围 重写设置定义 获取设置值 服务端 客户端 更改设置 关于缓存 介绍 每个应用都需要存储设置,并且在应用的某些地方需要使用这些设置. ...
- 简单五子棋，没有电脑AI
刚学了C#委托,做了个五子棋练习,把前台绘制和后台逻辑分开,前台绘制方法用委托传给后台逻辑. 界面好简单... 先看类图 控制类控制整个游戏的逻辑,包括调用棋盘类的属性初始化棋盘.初始化两个棋手.轮流 ...