效果如下:
前台代码:
<div id="Men">
<a href ="addnewbooks.aspx" target="_blank"><span class="left"></span>增加新书<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>更新书库<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>网页动态<span class="right"></span></a>
<a href ="dynamicManager.aspx" target="_blank"><span class="left"></span>促销管理<span class="right"></span></a>
......
媒介类型(Media Types)允许你定义以何种媒介来提交文档,文档可以被显示在显示器、打印机或者听觉浏览器等等。
实例
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印,将使用 10 个像素的 Times 字体。注意:font-weight 被设置为粗体,不论显示器还是纸媒介:
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
@media screen{
p.test {font-family:verdana,sans-serif; font-size:14px; color:red}
}
@media print{
p.test {font-family:times,serif; font-size:10px; color:blue}
&n ......
1、css框架
中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中,有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器。为什么呢?因为框架是包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。
编写css也是一样,从最初只是定义文字颜色、内容排版,到现在定义所有的表现。css框架也渐渐被重视了,因为大家都认识到:从具象的表现中抽出抽象的模块来重复使用,是减少用户下载、方便团队及个人开发最重要的手段。
2、css框架的开发顺序
a) 格式化 reset.css
格式化css的真正好处是能够快速启动工作,你可以在新的HTML文件里引入框架,不用再处理重置padding 和 margins,实现统一的排版、浏览器下的相同表现。
b) 布局 layout.css
定义页面是二栏还是三栏,是全屏还是1024×768…&helli ......
本文为大家收集精选了30个使用纯CSS
完成的强大实践的优秀CSS技术和实例
,您将在这里发现很多与众不同的技术,比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。
单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。
1.Hoverbox 图片集
一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果。
2.高级CSS菜单
一款很有创意且复杂的CSS导航方案。
3.滑动影集
手风琴效果的影集,悬停便可拉伸图片。
4.Lightbox幻灯片
题为”Supercharge your image borders
“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。
5.图片的阴影效果
在A List Apart上的一个关于图片效果Demo的讨论文章”CSS Drop shadows
“.
6.跨浏览器多页式影集
悬停标签改变分类,悬停缩略图显示放大图。
7.CSS照片放大
使用简单的图片和background-position属性来进行调解。
8.CSS gallery layout—smells like a table
模仿表格布局,但使用的是列表。图集是流式宽度。
9.Sticky Footer
仅使用了很 ......
这是原先我写的 备忘的 尽管写的很烂
frame.css
Java代码
CHARSET "UTF-八";
html,body{
margin: 零px;
padding: 零px;
height: 100%;
/*font-size: 12px;
color: #666666;
background: #ffffff;*/
}
*{
margin: 零px;
padding: 零px;
}
/*由于用了相对位置格局,应分辨率太大时,图片和文字就会被拉伸
之所以采取max-width来设立一个最大的宽度,但是这个属性IE六以次
不支持,之所以作以次更动
!important 唯有FF和IE七之上才支持
_XXX唯有IE6支持
*XXXIE七,IE六都支持
*+XXX惟独IE7支持
这么就可以把他们界别开了
*/
#box{
/*background: red;*/
height: 100% !important;
width: 100% !important;
_width: 1000px;
/*_height: 600px;*/
max-width: 1024px;
min-width: 1000px;
min-height: 500px;
margin: auto;
}
#header{
/*border: 二px solid #零E六;*/
/*background-color: navy;*/
height: 十%;
}
#header img{
height: 100%;
width: 100%;
}
#temp一{
height: 五%;
}
#mainMenu{
/*border: 二px solid #C26;*/
/*background-color: purple;*/
height: 90% ......
效果如下:
实现方法:利用一下两张图片:
前台代码:
<div id="nagivation">
<ul >
<li ><a href="mainbooks.aspx"><b>首页</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=1"><b>文学</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=2"><b>小说</b></a></li>
&n ......