建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > CSS布局实例 >

CSS布局:淘宝首页布局效果

更新时间:2015-10-13整理编辑:建站学习网阅读:0
代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body{ margin:10px; padding:10px; font-size:12px; line-height:1.7; text-align:center;}
#zishu{ width:780px; margin-left:auto; margin-right:auto;}
.list{width:260px; height:155px; float:left;}
.box{ float:left; width:225px;}
.box2{ padding:0 5px 0 5px; text-align:left;}
#r1{background-position: 0;}
#r2{background-position: -19px;}
#r3{background-position: -38px;}
#r4{background-position: -57px;}
#r5{background-position: -76px;}
#r6{background-position: -95px;}
#r7{background-position: -114px;}
#r8{background-position: -133px;}
#r9{background-position: -152px;}
#t1{background-position: 0px 0px;}
#t2{background-position: 0px -5px;}
#t3{background-position: 0px -10px;}
#t4{background-position: 0px -15px;}
#t5{background-position: 0px -20px;}
#t6{background-position: 0px -25px;}
#t7{background-position: 0px -30px;}
#t8{background-position: 0px -35px;}
#t9{background-position: 0px -40px;}
#y1{background-position: 0px 0px;}
#y2{background-position: 0px -18px;}
#y3{background-position: 0px -36px;}
#y4{background-position: 0px -54px;}
#y5{background-position: 0px -72px;}
#y6{background-position: 0px -90px;}
#y7{background-position: 0px -108px;}
#y8{background-position: 0px -126px;}
#y9{background-position: 0px -144px;}
#u1{border-right: 1px solid #8A8FA0;border-left: 1px solid #8A8FA0;}
#u2{border-right: 1px solid #DF4493;border-left: 1px solid #DF4493;}
#u3{border-right: 1px solid #3B6DA5;border-left: 1px solid #3B6DA5;}
#u4{border-right: 1px solid #AA86CE;border-left: 1px solid #AA86CE;}
#u5{border-right: 1px solid #6EA314;border-left: 1px solid #6EA314;}
#u6{border-right: 1px solid #C55936;border-left: 1px solid #C55936;}
#u7{border-right: 1px solid #FAAD2D;border-left: 1px solid #FAAD2D;}
#u8{border-right: 1px solid #86D500;border-left: 1px solid #86D500;}
#u9{border-right: 1px solid #2F8A8E;border-left: 1px solid #2F8A8E;}
.cd1{background-image:url(http://www.dedexuexi.com/image/d3.gif);background-repeat:no-repeat;cursor:pointer;float:left; width:19px; height:142px;}
.ce1{background-image:url(http://www.dedexuexi.com/image/d2.gif);background-repeat:no-repeat;height:5px;overflow:hidden;}
.cf1{background:#fafafa;border-top: 0;border-bottom: 0; height:119px;}
.cg1{background-image:url(http://www.dedexuexi.com/image/d1.gif);background-repeat:no-repeat;height:18px;overflow:hidden;}
.l1{width:40px;height:20px;cursor:pointer; margin-left:180px;}
</style>
</head>
<body>
<div id="zishu">
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r1" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t1" class="ce1"></div>
    <div id="u1" class="cf1">
      <div class="box2">这里是内容1</div>
    </div>
    <div id="y1" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r2" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t2" class="ce1"></div>
    <div id="u2" class="cf1">
      <div class="box2">这里是内容2</div>
    </div>
    <div id="y2" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r3" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t3" class="ce1"></div>
    <div id="u3" class="cf1">
      <div class="box2">这里是内容3</div>
    </div>
    <div id="y3" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r4" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t4" class="ce1"></div>
    <div id="u4" class="cf1">
      <div class="box2">这里是内容4</div>
    </div>
    <div id="y4" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r5" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t5" class="ce1"></div>
    <div id="u5" class="cf1">
      <div class="box2">这里是内容5</div>
    </div>
    <div id="y5" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r6" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t6" class="ce1"></div>
    <div id="u6" class="cf1">
      <div class="box2">这里是内容6</div>
    </div>
    <div id="y6" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r7" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t7" class="ce1"></div>
    <div id="u7" class="cf1">
      <div class="box2">这里是内容7</div>
    </div>
    <div id="y7" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r8" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t8" class="ce1"></div>
    <div id="u8" class="cf1">
      <div class="box2">这里是内容8</div>
    </div>
    <div id="y8" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
<div class="list"> <a href="http://www.dedexuexi.com">
  <div id="r9" class="cd1"></div>
  </a>
  <div class="box">
    <div id="t9" class="ce1"></div>
    <div id="u9" class="cf1">
      <div class="box2">这里是内容9</div>
    </div>
    <div id="y9" class="cg1"> <a href="http://www.dedexuexi.com">
      <div class="l1"></div>
      </a> </div>
  </div>
</div>
</body>
</html>
效果如下:
 

本文网址:https://www.dedexuexi.com/divcss/bj/380.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
DivCSS布局实例 用dl dt dd来制作列表
« 上一篇2015年10月13日
CSS布局实例:隐藏input文字
2015年10月13日下一篇 »
  • CSS Wave滤镜用法示例
    0阅读
    CSS Wave滤镜可能很多朋友并不喜欢用,其实用的好了,可以有不少奇异效果。CSS Wave滤镜可把对象按垂直方向叠加波形样式,使对象年上去像波浪一样。语法示例:filter:wave(add=add,freq=freq,lightst
  • CSS写的简单表格示例
    0阅读
    使用CSS写表格,不要有所怀疑,主要是对html结构进行css样式重定义,大家可以看看效果图,个人感觉还不错,感兴趣的朋友可以参考下 复制代码 代码如下: !DOCTYPE HTML html head meta http-equiv=Conte
  • 纯CSS代码实现翻页
    0阅读
    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=http://www.w3.org/1999/xhtml xml:la...
  • 表格列表偶数列、奇数列的CSS样式示例
    0阅读
    表格列表CSS样式包括:偶数列、奇数列、鼠标经过时样式、标题列等等,在接下来的示例中将为大家完美呈现,感兴趣的朋友不要错过 HTML示例源代码: 复制代码 代码如下: table class=list_table
  • 用CSS3创建一个旋转可变色按钮
    0阅读
    先从HTML: div a class=button旋转按钮/a /div 和现在的CSS: .button { background:#aaa; color:#555; font-weight:bold; font-size:15px; padding:10px 15px; border:none...
 
QQ在线咨询

添加微信客服