我的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 ...
随机推荐
- poj3740
#include<stdio.h>#include<iostream>int map[16][300];int vistx[16];int visty[300];int zhe ...
- PHP preg_replace使用例子
将 qwer://xxx/545/0 替换为 qwer://trading_system_xxx/0/545 $str = '<a href="qwer://xxx/545/0&quo ...
- linux实践之ELF文件分析
linux实践之ELF文件分析 下面开始elf文件的分析. 我们首先编写一个简单的C代码. 编译链接生成可执行文件. 首先,查看scn15elf.o文件的详细信息. 以16进制形式查看scn15elf ...
- 枚举Enum
#region 根据枚举名称获取值或反之 /// <summary> /// 根据枚举的名称,得到该枚中该名称对应的值 /// </summ ...
- 批处理ODBC配置
工作需要来回切换ODBC配置,用同一个DSN名称访问不同的数据库. 对于linux的odbc配置在odbc.ini文件里,替换不同的文件就可以切换了. 而windows的配置一直通过控制面板里的odb ...
- NSURLSession访问网络数据
1.NSMutableURLRequest的设置 //创建NSMutableURLRequest对象 NSMutableURLRequest *request = [NSMutableURLReque ...
- PHP服务器配置环境变量
我们写的PHP应用程序,通常会分别在本地.开发.测试.RC.生产环境中运行,不同环境中全局变量各不相同.通常简单的部署做法是,每次部署到一个环境,都需要先修改对应的全局变量,然后再部署代码.如果部署频 ...
- lkx开发日志2-第一次团队讨论
遇到的问题 冰球与击球手碰撞的形式有两种.第一种:击球手的速度不指向冰球圆心,这样碰撞后冰球会旋转.第二种:击球手的速度指向冰球圆心,直接科运用动量定理计算两者速度的变化.考虑到时间限制,团队假设冰球 ...
- 从 IClassFactory 为 CLSID 为 {00024500-0000-0000-C000-000000000046} 的 COM 组件创建实例失败，原因是出现以下错误: 8001010a解决办法
1.在命令行中输入:dcomcnfg,会显示出“组件服务”管理器 2.打开“组件服务->计算机->我的电脑->DCOM 配置”,找到“Microsoft Word文档”,单击右键,选 ...
- window虚拟机安装Linux
Linux是一种自由和开放源码的类Unix操作系统,存在着许多不同的Linux版本,但它们都使用了Linux内核.Linux可安装在各种计算机硬件设备中,比如手机.平板电脑.路由器.视频游戏控制台.台 ...