虽然我也接触前端一年之久了，但是无奈从切图布局下来的经验还真是很不足，因为之前比赛或者是做小项目时全部都是自己负责设计，所以都是编写边设计，哎呀，也是醉了；或者是有模板，然后从人家上面扒拉下来的，真的拿一张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. percona-toolkit中在线ddl

    percona-toolkit中在线ddl percona-toolkit工具提供了一组用于mysql操作的工具,比如主从复制,在线更改mysql表ddl等 一.安装1.安装perl(略)2.BI&a ...

  2. require.js工作原理（初始）

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  3. iOS项目的本地化处理（多国语言）

    项目的本地化就是:iOS系统在不同语言环境下自动切换语言,从而实现一个app发布到全世界各个国家的AppStore上. 我们不仅仅需要在iOS项目中做本地化处理,在上架iOS APP的时候,也需要做对 ...

  4. node-webkit 桌面开发 初入1

    node-webkit  是什么就不介绍了 注意官网的一句话 ”node-webkit is based on Chromium and node.js " 所以node-webkit 实际 ...

  5. Createjs学习一

    需求1:根据后端返回过来的不同信息,实现长按保存图与文字片功能(图片都是一样的,文字信息不同) 首先我们来分析一下要求,得出需要用到哪些技术.长按保存这一功能只针对图片,文字长按的话只会出现复制.. ...

  6. mysql关于排序值的问题

  7. ios程序发布测试打包

    1. 获取测试机UDID 手机连接电脑,打开iTunes-摘要-点击序列号,设备概要界面显示设备udid-反键-拷贝 2. 添加设备 取得UDID后,进入开发者中心-iOS PRovisioning ...

  8. scanf、printf、gets、puts的应用及区别

    1.scanf()函数 函数scanf()按指定的格式从键盘读取数据,并将其赋给一个或多个变量.例如: scanf(“%d %f”, &x,&rate);  输入多个变量时,scanf ...

  9. Hibernate操作指南-搭建一个简单的示例（基于原生API和XML）

  10. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...