【小练习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>

源码地址：http://download.csdn.net/detail/baidu_37107022/9840917

【小练习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第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...

随机推荐

JS里引用CSS属性时候的命名
如果JS代码中设置<p>元素的另一个CSS属性font-family.这个属性的获取方式与color属性略有不同,因为 font和family之间的连字符与JS中减法操作符相同,J ...
Java中的排序方法
冒泡排序法快速排序
React的学习（下）
摘要众所周知,前端三大框架Angular.React.Vue,所以为了跟上时代的步伐,最近开始着手学习React,这时候就发现个大问题,框架一直在更新,提倡的编写语法也在更新,网上有许多教程都是一两 ...
JSON 解析工具的封装(Java)
JSON 解析工具的封装(Java) 一直想有一个属于自己的JSON工具,今天终于弄好了..... 1.添加pom依赖包  <dependency> ...
sass入门学习篇（二）
从语法开始但是语法也不是一两句的事情,首先看基本的导入,使用一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,建议scss. 二,导入使 ...
Laravel 5.2 教程 - 邮件
一.简介 Laravel 的邮件功能基于热门的 SwiftMailer 函数库之上,提供了一个简洁的 API.Laravel为SMTP.Mailgun.Mandrill.Amazon SES.PHP的 ...
Fish Shell
今天看到阮一峰同学的一篇博客(Fish shell 入门教程),讲述的非常详细.清楚,有兴趣的可以直接转去查看此文,本文仅提供一下个人使用心得. 一.fish shell 想必接触过类unix(包括w ...
windows下使用IIS的ARR实现站点的负载均衡
1) 目的: 访问localhost:18066 对下边两个端口负载 localhost:18098 localhost:18099 2) 手段: 1.通过nginx 2.通过iis的AR ...
小谈ThinkPHP
ThinkPHP也是一个MVC框架,分视图.控制器和模型,和Yii框架相比相对较好理解,并且是轻量级的框架(相对于Yii来说),在使用Yii框架时候如果将框架放在项目文件中,用编辑器打开文件都比较慢, ...
Google的PageRank及其Map-reduce应用（日志五）
上一篇:Hadoop的安装(日志四) 1,算法的原理解释: 如下图所示,G就是传说中的谷歌矩阵,这个矩阵是n*n型号的,n表示共计有n个网页. 如矩阵中所示: 11位置处的元素,是表示第一个网页指向的 ...

【小练习05】HTML+CSS--淘宝商铺小页面

【小练习05】HTML+CSS--淘宝商铺小页面的更多相关文章

随机推荐

热门专题