【小练习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第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...
随机推荐
- Git命令行和Xcode结合使用
现在一直使用Git来管理代码,对于有强迫症的我来说,依旧选择了命令行,下面这段话可以更好的解释我为什么喜欢使用终端敲命令. There are a lot of different ways to u ...
- 解决md5不是windows平台FIPS验证的加密算法的一部分的怪异问题
一. 发生问题 临近下班时间的下午,领导一句话:项目先上到测试服吧,我明早来看看. 我想项目还没做完,先上到测试服务器,简单看下应该是没什么问题,部署也只是一会儿的事嘛,随后把手头的项目编译,发布,拷 ...
- Web API 之SelfHost与OwinSelfHots加载外部程序
下面就一些web api的一些基础内容进行阐述,然后就web api宿主承载中的实际业务问题进行解决 HttpController HttpController的激活是由处于消息处理管 ...
- linux编译安装php7
1.首先下载php7 使用wget命令下载 wget http://cn2.php.net/distributions/php-7.0.12.tar.bz2 2.然后解压 tar -xvf php-7 ...
- bzoj2560 串珠子
Description 铭铭有n个十分漂亮的珠子和若干根颜色不同的绳子.现在铭铭想用绳子把所有的珠子连接成一个整体. 现在已知所有珠子互不相同,用整数1到n编号.对于第i个珠子和第j个珠子,可以选择不 ...
- PHP环境搭建之PHPstorm9+PHP5开发环境配置
以前写过一篇zend studio+WAMP的:点这里,个人感觉写得不怎么好可是阅读数却上千了... 不过笔者身边好多人开始用PHPStrom了,所以就简单的写个教程 一.下载安装 PHPStrom下 ...
- Python：字符串的分片与索引、字符串的方法
这是关于Python的第3篇文章,主要介绍下字符串的分片与索引.字符串的方法. 字符串的分片与索引: 字符串可以用过string[X]来分片与索引.分片,简言之,就是从字符串总拿出一部分,储存在另一个 ...
- 蓝桥杯-买不到的数目-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- MongoDB大数据高并发读写性能测试报告
服务器大小: 单节点部署,磁盘1T,内存128G 并发导入规模: 1,多线程并发导入csv文件 2,csv文件分1万.10万.100万.200万行记录4种大小 3,每个csv对应一个collectio ...
- mysql,oracle,sqlserver使用jdbc连接数据库总结
jdbc连接数据是javaweb开发的一个重点,今天特此来总结一下,加深记忆. jdbc连接数据库一共分为三步: 1:加载驱动 需要去下载各自的驱动jar包,可以去网上搜索一下. 模板:加载驱动程序: ...