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

第一季 简单的轮播布局 2015.12.1

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

来贴段代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> </title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="v_show">

    <div class="v_caption">

        <h2 class="cartoon">卡通动漫</h2>

        <div class="highlight_tips">

            <span class="current">1</span>

            <span>2</span>

            <span>3</span>

            <span>4</span>

        </div>

        <div class="btn">

            <span class="prev"></span>

            <span class="next"></span>

        </div>

        <em><a href="javascript:;">更多>></a></em>

    </div>

    <div class="v_content">

        <ul class="contentlist">

            <li>

                <img src="img/01.jpg">

                <h2 class="title"><a href="javascript:;">海贼王</a></h2>

                <p class="radio">播放：<span class="count">28,276</span></p>

            </li>

            <li>

                <img src="img/01.jpg">

                <h2 class="title"><a href="javascript:;">海贼王</a></h2>

                <p class="radio">播放：<span class="count">28,276</span></p>

            </li>

            <li>

                <img src="img/01.jpg">

                <h2 class="title"><a href="javascript:;">海贼王</a></h2>

                <p class="radio">播放：<span class="count">28,276</span></p>

            </li>

            <li>

                <img src="img/01.jpg">

                <h2 class="title"><a href="javascript:;">海贼王</a></h2>

                <p class="radio">播放：<span class="count">28,276</span></p>

            </li>

        </ul>

    </div>

</div>

</body>

</html>
* { margin:; padding:; word-break:break-all; }

body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#2B93D2; text-decoration:none; }

a:hover { color:#E31E1C; text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

/* v_show style */

.v_show{

    width:595px;

    margin: 50px auto;

}

.v_caption{

    height:35px;

    background: url(img/btn_cartoon.gif) 0 0;

}

.v_caption h2{

    float: left;

    width:90px;

    height:35px;

    background: url(img/btn_cartoon.gif) 0 -100px;

    text-indent: -9999px;

}

.highlight_tips{

    float: left;

    width:60px;

    margin: 14px 0 0 5px;

}

.highlight_tips span{

    display: inline-block;

    width:7px;

    background: url(img/btn_cartoon.gif) 0 -320px;

    text-indent: -999px;

}

.highlight_tips span.current{

    background-position: 0 -220px;

}

.btn{

    float:left;

    margin-top:5px;

}

.btn span{

    display: inline-block;

    width:30px;

    height: 22px;

    background: url(img/btn_cartoon.gif);

}

.btn span.prev{

    background-position: 0 -400px;

}

.btn span.next{

    background-position: -30px -400px;

    margin-left:-3px;

}

.v_caption em{

    float: right;

    line-height: 35px;

    margin-right: 10px;

}

.v_content{

    width:592px;

    border:1px solid #ccc;

    border-top:;

}

.contentlist{

    overflow: hidden;

}

.contentlist li{

    float:left;

    margin: 20px 10px 15px 10px;

}

.contentlist li img{

    padding-bottom: 8px;

}

.contentlist li .title a{

    color:#04AEF4;

}

.contentlist li .title a:hover{

    color:#0592CC;

    text-decoration: none;

}

.contentlist li .radio{

    color:#666;

}

第二季 简单电商网站布局　　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. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  2. EntityFramework 连接字符串

    1. Microsoft SQL Server 2016 LocalDB <connectionStrings> <add name="DefaultConnection& ...

  3. 著名的sql注入问题-问题的原因分析及总结

    Statement安全漏洞(sql注入问题)问题展示: 首先我的Mysql数据库中有一张users表,如下图所示 /** * 根据用户名查询用户 * @param username 需要查询的用户名 ...

  4. vert.x学习（二），使用Router来定义用户访问路径

    这里需要用到vertx-web依赖了,依然是在pom.xml里面导入 <?xml version="1.0" encoding="UTF-8"?> ...

  5. Linux从零单排（二）：setuptools、pip、anaconda2的环境配置

    为了更方便的使用Python的类库,需要进行相应的配置 (一)setuptools的配置 1.setuptools的下载 命令行输入wget https://pypi.python.org/packa ...

  6. .net资源链接

    http://aspalliance.com/ http://www.hotscripts.com/ http://www.dotnet247.com http://stackoverflow.com ...

  7. 在DCOM 中不存在WORD、EXCEL等OFFICE组件

    DCOM里面没有与office相关的所有组件解决方法:先简单说下,操作步骤(项目演示完成后,补上图): Run MMC -32 File Add Remove Snap-in Component Se ...

  8. itertools模块

    itertools模块中有很多函数,返回的是一个迭代器 参考: http://www.wklken.me/posts/2013/08/20/python-extra-itertools.html#_1

  9. ADC 转换序列暂时难理解

    通常情况下,core文件会包含了程序运行时的内存,寄存器状态,堆栈指针,内存管理信息还有各种函数调用堆栈信息等,我们可以理解为是程序工作当前状态存储生成第一个文件,程序出错的时候理论上都会产生一个co ...

  10. 游戏机制(Machinations)在线演示工具

    >>> http://www.jorisdormans.nl/machinations/