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

    站点的Headers里面会暴露一些服务器的环境,例如IIS版本.语言的环境等 有时候我们不想让用户了解这类信息那么可以这样做: 1.修改web.config 在 <system.webServe ...

  2. iOS 因为reason: 'Pushing the same view controller instance more than once is not supported而奔溃（上）

    这个问题是什么意思呢,之前遇到过几次,但程序再次打开时没有问题,也就没有重视,今天又遇到了,无法忍受啊. 控制台报的错误是:"不支持多次推入相同的视图控制器实例". 什么原因造成的 ...

  3. LL(1)文法

    <源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...

  4. 数据库 定义 bit 类型 （true=1,false=0）

    当Sql Server数据库定义 数据 为 bit 类型时, 编写代码时 要用 true or false 赋值. 例如: OffTheShelf  定义类型为  bit 后台赋值时 OffTheSh ...

  5. Spring注解@Resource和@Autowired区别对比

    转载:http://www.cnblogs.com/think-in-java/p/5474740.html @Resource和@Autowired都是做bean的注入时使用,其实@Resource ...

  6. ASP.NET MVC 4 Attribute特性

    [AcceptVerbs(-)] To specify HTTP verbs an action method will respond to. 要指定HTTP动词的将响应的一个操作方法. [Acti ...

  7. shell计算小问题

    1.shell处理两数相加时报错: req_all=$(($hits+$misses)) error: invalid arithmetic operator (error token is &quo ...

  8. Linux环境安装MySQL数据库

    1.  下载mysql安装包 下载地址1:  http://www.mysql.com/   (mysql官网) 下载地址2:  http://mirrors.sohu.com/mysql/   (其 ...

  9. Jquery父级节点追加

    <!-- 父节点追加 --><!DOCTYPE html><html lang="en"><script src="../../ ...

  10. jQuery.serialize() 函数详解////////////z

    serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串. serialize()函数常用于将表单内容序列化,以便用于AJAX提交. 该函数主要根据用于提交的有效表单控件的n ...