【小练习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第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...
随机推荐
- 为部署ASP.NET Core准备：使用Hyper-V安装Ubuntu Server 16.10
概述 Hyper-V是微软的一款虚拟化产品,和VMWare一样采用的hypervisor技术.它已经被内嵌到Win10系统内,我们只需要进行简单的安装即可.但是前提是要确保你的机器已经启用虚拟化,可以 ...
- salt-stack部署
saltstack部署 环境准备 [root@server elasticsearch]# cat /etc/redhat-release CentOS release 6.6 (Final)[r ...
- Yii2发送邮件
1.在配置文件main-local.php components=>[]里面配置 'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', ...
- jmeter执行case结果插入DB数据优化
访问初始实现路径:jmeter执行case结果插入DB生成报表和备份记录 借前面实现导入DB数据先说明之前数据的缺点: 第一,若需要依赖接口的数据,会把依赖接口的case统计进去造成数据统计错误.第二 ...
- NODEJS环境搭建 第一篇 安装和部署NODEJS
一.下载安装文件 根据自己当前系统环境,下载相对应的安装文件 https://nodejs.org/en/download/ 二.双击安装 都傻瓜式的安装步骤,一步一步安装就好了. 三.检查安装结果 ...
- cookie方法封装及cookie缺点分析
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Consolas; color: #4f5d66 } p.p2 { margin: 0.0px ...
- 热爱H5
我不去想是否能够功成名就既然选择了前端便只顾埋头于无声 我不去想能否赢得掌声既然钟情于IT就勇敢得踏步前行 我不去想前行的路上会不会日暮穷途既然目标是未来留给现在的只能是汗水 我不去想所谓的成功是不是 ...
- 某公司HP-EVA4400数据丢失的恢复方法和恢复全过程
一.故障描述1.设备清单一台HP-EVA4400控制器(型号:AG638-53011)三台HP-EVA4400扩展柜(型号为AG638-63001),和28块HP-FC磁盘(型号为300G FC硬盘) ...
- .NET枚举类型转为List类型
如图所示这个竞卖状态,原先是在前端界面通过html代码写死的几个状态,现在需要改为动态加载.这个几个状态是定义的枚举类型. 1:定义一个枚举类型 /// <summary> /// ...
- 进程间通信系列 之 socket套接字及其实例
进程间通信系列 之 概述与对比 http://blog.csdn.net/younger_china/article/details/15808685 进程间通信系列 之 共享内存及其实例 ...