【小练习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第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...
随机推荐
- node.js系列(模块)：request模块实现与php的通讯
app.js: var express = require('express'); var request = require('request'); var app = express(); /*r ...
- 【树莓派】修改树莓派盒子MAC地址
用树莓派盒子,在某些客户方实施过程中,不同客户的网络环境对树莓派盒子的要求不同,网络管理配置要求MAC地址和IP绑定. 一种情况下,查询盒子的MAC地址,添加到网络管理的路由规则中即可: 另一种情况下 ...
- [Linux] PHP程序员玩转Linux系列-telnet轻松使用邮箱
1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 4.PHP程序员玩转L ...
- 业务订单号生成算法，每秒50W左右，不同机器保证不重复，包含日期可读性好
参考snowflace算法,基本思路: 序列12位(更格式化的输出后,性能损耗导致每毫秒生成不了这么多,所以可以考虑减少这里的位,不过留着也并无影响) 机器位10位 毫秒为左移 22位 上述几个做或运 ...
- _getch() 函数，应用于输入密码敲入回车前修改
body,table { font-family: 微软雅黑; font-size: 10pt } table { border-collapse: collapse; border: solid g ...
- 为用户增加sudo权限(修改sudoers文件)
在使用Linux系统过程中,通常情况下,我们都会使用普通用户进行日常操作,而root用户只有在权限分配及系统设置时才会使用,而root用户的密码也不可能公开.普通用户执行到系统程序时,需要临时提升权限 ...
- 基于JS的问卷调查
主要工作 因为代码不好展示,也不好截长图,可以去看我的GitHub地址:https://github.com/14glwu/MyBlog/blob/master/questionnaire.html ...
- Ubuntu16.04安装opencv for python/c++
Ubuntu16.04安装opencv for python/c++ 网上关于opencv的安装已经有了不少资料,但是没有一篇资料能让我一次性安装成功,因此花费了大量时间去解决各种意外,希望这篇能给一 ...
- 解决 MySQL 分页数据错乱重复
前言 一天,小明兴匆匆的在通讯工具上说:这边线上出现了个奇怪的问题,麻烦 DBA 大大鉴定下,执行语句 select xx from table_name wheere xxx order by 字段 ...
- 面向对象设计（Object-Oriented Design，OOD）
前言 OOD简介 Shubho:亲爱的,让我们开始学习OOD吧.你了解面向对象原则吗? Farhana:你是说封装,继承,多态对吗?我知道的. Shubho:好,我希望你已了解如何使用类和对象.今天我 ...