虽然我也接触前端一年之久了，但是无奈从切图布局下来的经验还真是很不足，因为之前比赛或者是做小项目时全部都是自己负责设计，所以都是编写边设计，哎呀，也是醉了；或者是有模板，然后从人家上面扒拉下来的，真的拿一张UI设计稿给我，还真是有点心虚的，所以借最近深入了解jquery的机会，我决定把布局顺带练一练，OK，废话不多说，开工了，一周练习一次，并上图示众，同时欢迎大家一起探讨css布局细节。

第一季 简单的轮播布局 2015.12.1

所有小图片在一张雪碧图上

来贴段代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title> </title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div class="v_show">
  10.     <div class="v_caption">
  11.         <h2 class="cartoon">卡通动漫</h2>
  12.         <div class="highlight_tips">
  13.             <span class="current">1</span>
  14.             <span>2</span>
  15.             <span>3</span>
  16.             <span>4</span>
  17.         </div>
  18.         <div class="btn">
  19.             <span class="prev"></span>
  20.             <span class="next"></span>
  21.         </div>
  22.         <em><a href="javascript:;">更多>></a></em>
  23.     </div>
  24.     <div class="v_content">
  25.         <ul class="contentlist">
  26.             <li>
  27.                 <img src="img/01.jpg">
  28.                 <h2 class="title"><a href="javascript:;">海贼王</a></h2>
  29.                 <p class="radio">播放：<span class="count">28,276</span></p>
  30.             </li>
  31.             <li>
  32.                 <img src="img/01.jpg">
  33.                 <h2 class="title"><a href="javascript:;">海贼王</a></h2>
  34.                 <p class="radio">播放：<span class="count">28,276</span></p>
  35.             </li>
  36.             <li>
  37.                 <img src="img/01.jpg">
  38.                 <h2 class="title"><a href="javascript:;">海贼王</a></h2>
  39.                 <p class="radio">播放：<span class="count">28,276</span></p>
  40.             </li>
  41.             <li>
  42.                 <img src="img/01.jpg">
  43.                 <h2 class="title"><a href="javascript:;">海贼王</a></h2>
  44.                 <p class="radio">播放：<span class="count">28,276</span></p>
  45.             </li>
  46.         </ul>
  47.     </div>
  48. </div>
  49. </body>
  50. </html>
  1. * { margin:; padding:; word-break:break-all; }
  2. body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
  3. h1, h2, h3, h4, h5, h6 { font-size:1em; }
  4. a { color:#2B93D2; text-decoration:none; }
  5. a:hover { color:#E31E1C; text-decoration:underline; }
  6. ul, li { list-style:none; }
  7. fieldset, img { border:none; }
  8.  
  9. /* v_show style */
  10. .v_show{
  11.     width:595px;
  12.     margin: 50px auto;
  13. }
  14. .v_caption{
  15.     height:35px;
  16.     background: url(img/btn_cartoon.gif) 0 0;
  17. }
  18. .v_caption h2{
  19.     float: left;
  20.     width:90px;
  21.     height:35px;
  22.     background: url(img/btn_cartoon.gif) 0 -100px;
  23.     text-indent: -9999px;
  24. }
  25. .highlight_tips{
  26.     float: left;
  27.     width:60px;
  28.     margin: 14px 0 0 5px;
  29. }
  30. .highlight_tips span{
  31.     display: inline-block;
  32.     width:7px;
  33.     background: url(img/btn_cartoon.gif) 0 -320px;
  34.     text-indent: -999px;
  35. }
  36. .highlight_tips span.current{
  37.     background-position: 0 -220px;
  38. }
  39. .btn{
  40.     float:left;
  41.     margin-top:5px;
  42. }
  43. .btn span{
  44.     display: inline-block;
  45.     width:30px;
  46.     height: 22px;
  47.     background: url(img/btn_cartoon.gif);
  48. }
  49. .btn span.prev{
  50.     background-position: 0 -400px;
  51. }
  52. .btn span.next{
  53.     background-position: -30px -400px;
  54.     margin-left:-3px;
  55. }
  56. .v_caption em{
  57.     float: right;
  58.     line-height: 35px;
  59.     margin-right: 10px;
  60. }
  61. .v_content{
  62.     width:592px;
  63.     border:1px solid #ccc;
  64.     border-top:;
  65. }
  66. .contentlist{
  67.     overflow: hidden;
  68. }
  69. .contentlist li{
  70.     float:left;
  71.     margin: 20px 10px 15px 10px;
  72. }
  73. .contentlist li img{
  74.     padding-bottom: 8px;
  75. }
  76. .contentlist li .title a{
  77.     color:#04AEF4;
  78. }
  79. .contentlist li .title a:hover{
  80.     color:#0592CC;
  81.     text-decoration: none;
  82. }
  83. .contentlist li .radio{
  84.     color:#666;
  85. }

第二季 简单电商网站布局　　2015-12-14

先贴上大图，还有一小部分未完成，这个本来是我用来练习jquery的例子

遇到的问题：1）、行内标签inline-block之后，之间还是有3px左右的像素间隔，用margin负值就好了
　　　　　　2）、为了页面规范性，标签内会写文字，但为了文字不显示出来，加上text-indent缩进掉就好了
　　　　　　　　如此处

我的CSS布局之旅--持续更新的更多相关文章

  1. CSS 3篇（持续更新）

    1.关于盒子模型 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 理解c ...

  2. CSS效果集锦（持续更新中）

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  3. css随笔记（持续更新）

    /*DIV鼠标穿透*/ div{pointer-events:none;} /*清除IE11默认×*/ input::-ms-clear{display:none;} 使用伪类写边框部分三角 右上角三 ...

  4. CSS相关知识（持续更新中）

    1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...

  5. CSS冗余简化（持续更新）

    1.float属性会把元素默认成inline-block状态,不需要再专门定义display了 2.对于inline而言,您设置line-height多大,很多时候并不需要定义height,其实际占据 ...

  6. css样式小结（持续更新...）

    1.手写table的border,显示空白间隔,而不是想要的样式,需要添加下面的样式处理 table{ border-collapse:collapse; } 2.移动端输入框效果,去掉高亮边框, i ...

  7. css面试题汇总 （持续更新）

    前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...

  8. CSS小记(持续更新......)

    1 内联元素和块级元素的区别以及display的三种属性区别 在说起display属性之前,就必须先说说什么是文档流,以及文档流中的内敛元素和块级元素又是指什么? 一直觉得理解了文档流的概念,一堆CS ...

  9. LookAround开元之旅（持续更新中...）

    应用介绍随便瞧瞧是一款为android用户量身定做的免费图文资讯软件集美食,文学,语录等频道于一体界面简洁,操作流畅,图文分享,个性收藏是广大卓粉的必备神器APK下载 -->https://ra ...

随机推荐

  1. Self-Host Web API 学习笔记

    ASP.NET Web API 不需要 IIS,直接使用控制台程序可以实现. 一.创建一个新的控制台程序,项目名为 HostApi 二.设置目标框架为.NET Framework 4 三.NuGet添 ...

  2. 精简的javascript下throttle和debounce代码

    //频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs.立即执行1次 function throttle(fn, waitMs) { var lastRun = 0; return f ...

  3. 浅谈Json和jsonp

    定义: JSON:是一种数据交换格式, JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议 曾经看到一个有意思的例子:JSON是地下党们用来书写和交换情报的“暗号”的话, 而JS ...

  4. Quartz2D 编程指南（二）变换、图案、阴影

    概览 图形上下文 路径 颜色与颜色空间 变换 图案 阴影 渐变 透明层 Quartz 2D 中的数据管理 位图与图像遮罩 CoreGraphics 绘制 Layer 5.变换 简介 Quartz 2D ...

  5. Python学习【第八篇】Set集合

    Set集合 set集合是无序,不能重复,可嵌套的序列 如何创建 li = [] dic = {"k1":123} se = {"123","456&q ...

  6. 手机端页面自适应解决方案—rem布局

    只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...

  7. Scala：没有continue，break怎么办？

    scala自身是没有continue,break这两个语法关键词的. 但是实际上我们还是很希望有这两个语法,那么我们是否可以自己实现呢? 从官网上搜索,我们可以找到一下关于break的类相关资料: B ...

  8. WCF 依赖注入-- Attribute

    最近,工作之余学习WCF(Windows Communication Fundation)时,感觉自己还有好多的东西需要学习呀⊙﹏⊙b汗,于是想记录下自己学习WCF的心得,以鼓励自己再接再厉,同时希望 ...

  9. python中的GIL(全局解释锁)多线程能够提升效率

    预启动的时候,应用程序仍然会调用 OnLaunched 方法的,在 OnLaunched 方法调用之后,会马上发生 Suspending 事件,随后应用就会暂停. 我先基于develop主分支拉出一个 ...

  10. 多节点ssh免密匙登录

    1,在所有节点上,使用yourname用户名执行: ssh-keygen -t dsa -P '' -f /home/yourname/.ssh/id_dsa 2,在node1的/home/yourn ...