我的CSS布局之旅--持续更新
虽然我也接触前端一年之久了，但是无奈从切图布局下来的经验还真是很不足，因为之前比赛或者是做小项目时全部都是自己负责设计，所以都是编写边设计，哎呀，也是醉了；或者是有模板，然后从人家上面扒拉下来的，真的拿一张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的例子
此处我的CSS布局之旅--持续更新的更多相关文章
- CSS 3篇（持续更新）
1.关于盒子模型 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 理解c ...
- CSS效果集锦（持续更新中）
高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...
- css随笔记（持续更新）
/*DIV鼠标穿透*/ div{pointer-events:none;} /*清除IE11默认×*/ input::-ms-clear{display:none;} 使用伪类写边框部分三角 右上角三 ...
- CSS相关知识（持续更新中）
1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...
- CSS冗余简化（持续更新）
1.float属性会把元素默认成inline-block状态,不需要再专门定义display了 2.对于inline而言,您设置line-height多大,很多时候并不需要定义height,其实际占据 ...
- css样式小结（持续更新...）
1.手写table的border,显示空白间隔,而不是想要的样式,需要添加下面的样式处理 table{ border-collapse:collapse; } 2.移动端输入框效果,去掉高亮边框, i ...
- css面试题汇总 （持续更新）
前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...
- CSS小记(持续更新......)
1 内联元素和块级元素的区别以及display的三种属性区别 在说起display属性之前,就必须先说说什么是文档流,以及文档流中的内敛元素和块级元素又是指什么? 一直觉得理解了文档流的概念,一堆CS ...
- LookAround开元之旅（持续更新中...）
应用介绍随便瞧瞧是一款为android用户量身定做的免费图文资讯软件集美食,文学,语录等频道于一体界面简洁,操作流畅,图文分享,个性收藏是广大卓粉的必备神器APK下载 -->https://ra ...
随机推荐
- SQL DELETE 语句
DELETE 语句用于删除表中的行. 语法 DELETE FROM 表名称 WHERE 列名称 = 值 Person: LastName FirstName Address City Gates Bi ...
- js、css引用文件的下载方式
js.css引用文件的下载方式 一.测试(chrome):1.直接使用<script...>.<link...>标签来混合引入脚本文件和css文件, <script as ...
- The shortest path---hdu2224 && Tour---poj2677（旅行商问题）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2224 题意:平面上有n个点,问去的路只能从左到右,回的路只能从右到左的,且来回必须经过所有点的最小路径 ...
- Java 静态变量，常量和方法
static 关键字 例如:在球类中使用PI这个常量,可能除了本类需要这个常量之外,在另外一个圆类中也需要使用这个常量.这时没有必要 在两个类中同时创建PI这个常量,因为这样系统会将这两个不在同一个类 ...
- https://yq.aliyun.com/articles/65125?spm=5176.100240.searchblog.18.afqQoU
https://yq.aliyun.com/articles/65125?spm=5176.100240.searchblog.18.afqQoU
- Android中如何查看内存
文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...
- python成长之路-----day1----笔记（1）
1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语言和弱类型 ...
- Nodes “-1” are listed in ADOP_VALID_NODES table but not in FND_NODES table
While trying to apply patches to upgrade to 12.2.4, adop failed due to the below errors. Validating ...
- STL—Vector简介
有关C++ STL 中的vector向量的用法(代码示例) 一. 简介 Vector是一个称为向量的顺序容器(不明白顺序容器与关联容器的可以Google). 二. 特点 1. 动态(相当于一个动态数组 ...
- 对ADC（DAC）的线性度（INL和DNL）的一点理解 [转]
大家在使用ADC的时候,往往最关注位数,而对ADC的线性度往往会忽略. 其实这个线性度也是ADC非常重要的指标,ADC(或DAC,其实ADC也是由DAC组成的)线性度指标有两个: INL:翻译过来叫“ ...