横幅＋导航＋气泡悬浮框

完成效果▲

html5代码：

Log in

	
    
Starting Small



	
Home
    
About
    
Stories
    
Interludes
    
RUN!



	
About MayStudio
    
Hey, I am May and I draw cartoons, make handcrafts and do some coding stuff.
    
Cast of Cartoons




	

    	
Grey
        
A grey and fat bunny.
    




	

    	
Belle
        
A bear, Grey's best friend.
    




	

    	
Leo
        
Lion, also Grey's friend.
    

横幅的css代码：

@charset "UTF-8";
/* CSS Document */
body{
	padding: 20px;/*内边距20像素*/
	background-color:#FFFFFF;/*背景色为白色*/
}
a.login{
	float:right;/*向右浮动，靠下个元素的右边显示*/
	color:#000000;/*设置颜色为黑色*/
	text-decoration:none; /*文本修饰属性，none以标准文本显示，underline下划线，overline上划线等*/
}
a.banner{
	display:block;/*作为块元素显示，前后带有换行符，可调节宽高，内外边距等*/
	width:250px;
	height:80px;
	background:url(../images/maystudio-figure.png) no-repeat 150px -80px;/*设置背景图片并设置不重复和位置*/
	transition:background-position .1s ease-out .1s; /*平滑切换，0.1s后，背景位置以先快后慢的速度用0.1s平滑切换*/
}
a.banner .banner-logo{
	position:absolute;/*绝对布局，没有设定trbl属性时以父元素的坐标为始点，设置后以浏览器左上角为原始点*/
	left:20px;/*图片以（20，0）为原点*/
	transition:all .1s ease-in .0s;
}
a.banner .banner-desc{
	position:absolute;
	top:35px;
	left:50px;
	color:#000000;
	opacity:0;/*设置不透明度为0，即不可见*/
}
a.banner:hover, a.banner:focus{ /*当鼠标停留在该元素上或获得焦点（按键盘上的tab键）时所做的动作*/
	background-position:150px 0px;
}
a.banner:hover .banner-logo, a.banner:focus .banner-logo{
	position:absolute;
	left:-300px;
}
a.banner:hover .banner-desc, a.banner:focus .banner-desc{
	opacity:1;
}

导航的css代码：

@charset "UTF-8";
/* CSS Document */
.nav{
	border-top:5px solid #000000;/*定义上边框*/
	border-bottom:1px solid #000000;/*定义下边框*/
	padding:.45em .5em;/*内边距，上下0.45字高，左右0.5字高，相对于父元素的font-size*/
}
.nav a{
	color:#000000;
	text-decoration:none;/*默认超链接项带下划线，这里把下划线去掉*/
}
.nav a:hover, .nav a:focus{/*设置鼠标放在导航元素上或获得焦点（tab键）时的动作*/
	background:#D3D3D3;
	border-top:2px solid #D3D3D3;
	border-right:10px solid #D3D3D3;
	border-bottom:2px solid #D3D3D3;
	border-left:10px solid #D3D3D3;
	border-radius:5px;/*设置边框圆角*/
	
}
.nav li{
	display:inline-block;/*行内块元素，不换行又可设置宽高等*/
	padding:0em 1.15em 0em 1.15em;
	border-left:1px solid #000000;
}

.nav li:first-child{/*设置第一个子元素定义样式*/
	border-left:none;
}

气泡悬浮框的css代码：

@charset "UTF-8";
/* CSS Document */

a.role{
	position:relative;
	display:block;
	width:100px;
	height:100px;
	border:2px solid #4b4b4b;
	border-radius:55px;/*设置圆角*/
	background:#fff no-repeat center;
	background-size:cover;/*设置背景图片覆盖背景区域*/
	top:20px;
}

.gallery-nav li{
	display:block;
	float:left;/*使三个气泡横向显示*/
	margin-right:100px;/*设置右外边距来控制三个气泡距离*/
}
a.role.p1{
	background-image:url(../images/grey.jpg);/*设置背景图片，下同*/
}
a.role.p2{
	background-image:url(../images/belle.jpg);
}
a.role.p3{
	background-image:url(../images/leo.jpg);
}
a.role .role-box{
	opacity:0;/*设置不透明度为0*/
	width:8em;/*宽度为10字高，浏览器默认渲染字体大小为16px，所以这里的宽度为8*16px=128px*/
	padding:.8em;/*同理，这里的内边距为0.8*16px＝12.8px*/
	background:#111;/*设置背景颜色*/
	position:absolute;/*设置为绝对布局，相对于设置了position：relative的祖先role计算偏移量*/
	bottom:-110px;/*底边相对于role的底边向下偏移105px*/
	left:50%;/*左边相对于role的左边向右偏移50%＊100px＝50px*/
	margin-left:-4.8em;/*设置左外边距为-(8+0.8*2)/2,即向左偏移－4.8em，使悬浮框相对于气泡居中*/
	border-radius:15px 0px;/*设置边框圆角，上左下右为15px，上右下左为0px*/
	transition:all .4s ease-out .3s;/*全部属性在0.4秒后平滑过渡0.3秒*/
}
a.role .role-box:before{/*为悬浮框添加小箭头，即一个小三角，before在role-box元素之前添加内容*/
	content:'';/*设置内容为空*/
	position:absolute;/*绝对定位，相对于role-box*/
	bottom:97px;/*相对于role－box的底边向上偏移97px*/
	left:80px;/*相对于role－box的左边向右偏移80px*/
	border-bottom:10px solid #111;/*设置下边框为10px，实线，各个边框彼此重叠，所以跟着要设置左右边框为透明*/
	border-left:10px solid transparent;/*设置左边框实线，透明*/
	border-right:10px solid transparent;/*设置右边框实线，透明*/
}
a.role .role-name{
	color:#fff;
}
a.role .role-desc{
	margin-bottom:0;
	font-size:11px;
	text-align:justify;/*两端对齐*/
	color:#BCBCBC;
}
a.role:hover .role-box, a.role:focus .role-box{
	opacity:1;
	bottom:-100px;
}

代码下载：http://download.csdn.net/detail/qq_17615475/9310017