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

    https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ Counting to 6 The previous editions ...

  2. Socket练习

    第一类方法 package socketLianXi; import java.io.IOException; import java.io.InputStreamReader; import jav ...

  3. System.Linq.Dynamic的使用

    项目中经常用到组合条件查询,根据用户配置的查询条件进行搜索,拼接SQL容易造成SQL注入,普通的LINQ可以用表达式树来完成,但也比较麻烦.有个System.Linq.Dynamic用起来比较方便. ...

  4. 关于 Pragma 的使用总结

    注意:此文乃是本人阅读多个博客文章后,记下的个人认为重点的地方. 参考文章: 参考1   参考2 #Pragma mark - 用于分离类中的不同功能的方法.(例如,一个 viewController ...

  5. python pip源

    pipy国内镜像目前有: http://pypi.douban.com/  豆瓣 http://pypi.hustunique.com/  华中理工大学 http://pypi.sdutlinux.o ...

  6. sublime sublimeCodeIntel插件 配置

    安装完成后, 弹出一个说明 页面, 不用 管 .可到了这里就是没有提示信息, 忽略 配置sublimeCodeIntel的config文件,告诉他我们需要javascript的提示. 法一: 通过su ...

  7. ORM系列之二：EF（5） Model First

    前面我们已经介绍过EF中Code First开发模式,简而言之,就是不管三七二十一直接写代码,不过对于很多开发人员来说,可能并不习惯这样来开发,并且安装标准的开发流程,应该是先建模再进行编码,当然EF ...

  8. PerformSelector

    PerformSelector 1. 执行和取消 //执行 [self performSelector:@selector(showMessage) withObject:nil afterDelay ...

  9. springmvc配置多视图 - tiles, velocity, freeMarker, jsp

    转自: http://www.cnblogs.com/shanheyongmu/p/5684595.html <!-- Velocity --> <bean id="vel ...

  10. Cen0S下挂载设备

    在CentOS中,如果我们要查看光驱,U盘或者要把安装包挂载到某个文件夹,我写下我的一些理解. 所谓的挂载,就是把物理设备或者文件(包含安装文件,压缩包等等),与系统中的某个目录建立一个快捷方式,然后 ...