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

    安装与配置: 1.先配置好IIS,再安装visual stdio,主要原因系统会自注册.net Framework,若顺序不正确,则需手动注册,步骤: a. IIS可承载的Web核心 b. IIS6 ...

  2. lnmp配置Yii2规则

    nginx配置: 参考地址:http://www.cnblogs.com/grimm/p/5389970.html location / { try_files $uri $uri/ /index.p ...

  3. input checkbox属性-Indeterminate状态

    我们在使用input标签,多选框时,通常会看到两种状态,即选中(checked)和被选中(unchecked). // 选中状态也可写成checked="checked" chec ...

  4. cloudera learning4:Hadoop集群规划

    涉及到一些关于硬件的东西,我也不是很懂,记录下来有待以后学习. Hadoop集群一般都是由小到大,刚开始可能只有4到6个节点,随着存储数据的增加,计算量的增大,内存需求的增加,集群慢慢变大. 比如按照 ...

  5. MS SQL数据类型比较

    字符串数据类型 char此数据类型可存储1~8000个定长字符串,字符串长度在创建时指定:如未指定,默认为char(1).每个字符占用1byte存储空间.nchar此数据类型可存储1~4000个定长U ...

  6. linux io stack

  7. Git过滤文件和文夹

    今天是2016年10月份的最后一天,感觉时间过得真的是飞快呢,此刻天下着小雨,天气灰蒙如天每个人的心情一样.在此把这个月的项目上传到git上,就需要过滤一些项目自动生成的不必要的文件,如:bin,ob ...

  8. mysql用户密码修改，用户添加、删除及设置权限

    一下的示例所用用户名和密码为:test,111111 Mysql密码修改: Mysql修改密码需要root的权限,先执行mysql -uroot -p(密码); 1)使用set password方式来 ...

  9. python引用py文件中文报错

    文件 a.py 中引用文件 b.py 如果文件b.py中包含中文,会报错. 文件hello.py中代码如下: def say_nihao(): print "你好" 文件main. ...

  10. Leetcode: Poor Pigs

    There are 1000 buckets, one and only one of them contains poison, the rest are filled with water. Th ...