最近一直很忙,做一个学校的网站项目,是asp.net2.0,做这个项目过程中有好多经验可以总结一下,不过现在项目进度很紧,先放一放,等做完了一起总结一下。今天简单写写使用母版页时内容页中如何使用css和javascript的问题。
由于网站的主要频道页和列表页的头部和底部都是一样的,如果将每个页面放在单独的页面中,当头部和底部需要更改时维护量太大。于是想把头部和底部做成母版页,频道页和列表页的具体内容放到内容页中。这样当头和底需要改动时,只要修改一下母版页就可以了。
好处有了,问题也接着来了。原来在频道页和列表页中有其各自的css引入和一些javascript函数,当使用母版页时,放在内容页中这些css样式和 javascript函数怎么处理呢?因为大家知道,使用母版页的内容页是不能包含<head></head>标记的,而css 和javascript函数的声明是要放到<head></head>中间的,这些css样式和javascript函数如何处 理呢?上网查了一下,大致有三种解决方案:方案一:把所有的css样式和javascript函数放到母版页的<head></head>中, 我觉得这样做的弊端就是导致母版页的<he ......
兼容IE、FireFox、Chrome
//加载js
function loadJs(){
if (!getObj('script_PlData')){
var scriptObj= document.createElement("script");
//scriptObj.id = 'script_1';
scriptObj.type = "text/javascript";
scriptObj.src='/js/m.js' ;
document.body.appendChild(scriptObj);
}
}
//加载css、
function loadCss(){
var cssObj=null;
cssObj = document.createElement("style");
var cssAry=new Array();
cssObj.setAttribute("type", "text/css");
cssAry.push('img {border:none;}');
cssAry.push('.div{ width:350px; height:auto; border:1px solid #000000;}');
cssAry.push('.div_data{ width:300px; height:70px; border: ......
兼容IE、FireFox、Chrome
//加载js
function loadJs(){
if (!getObj('script_PlData')){
var scriptObj= document.createElement("script");
//scriptObj.id = 'script_1';
scriptObj.type = "text/javascript";
scriptObj.src='/js/m.js' ;
document.body.appendChild(scriptObj);
}
}
//加载css、
function loadCss(){
var cssObj=null;
cssObj = document.createElement("style");
var cssAry=new Array();
cssObj.setAttribute("type", "text/css");
cssAry.push('img {border:none;}');
cssAry.push('.div{ width:350px; height:auto; border:1px solid #000000;}');
cssAry.push('.div_data{ width:300px; height:70px; border: ......
本人一般用editplus写一些小的测试代码或者来研究学习别人的代码,但经常会遇到这些问题:下载过来的HTML/CSS代码混乱,JS代码被压缩,或者是我们想把我们的代码做一下压缩混淆以供发布时使用。当然,对于代码的格式化和代码压缩等,我们都可以使用专有的工具,或者使用一些在线的工作来做,既然EditPlus可以扩展插件,那我们何不利用这一功能来把这些工具集成到EP中呢?
其实很早我都有这些想法,一直没有深究其做法,EP的用户工具组,我一般也是挂些帮助手册之类的供开发时参考。今天在BlueIdea看到有人发了一篇名为“让Editplus自动格式化css和js”的文章,看完后觉得写的很好,我也突然来了灵感,为什么不把前端开发常用工具都集成进去呢?
说做就做,我在网上找了一些相关的工具代码,按照作者的方式开始改造(作者是使用“本地cScript调用JS+EP的文本过滤器”的方式来实现的)。
下面来说下集成的方法(以下以EditPlus3中文版本为例):
1、下载工具包:edtools.rar ,解压后放到磁盘的一个目 ......
本人一般用editplus写一些小的测试代码或者来研究学习别人的代码,但经常会遇到这些问题:下载过来的HTML/CSS代码混乱,JS代码被压缩,或者是我们想把我们的代码做一下压缩混淆以供发布时使用。当然,对于代码的格式化和代码压缩等,我们都可以使用专有的工具,或者使用一些在线的工作来做,既然EditPlus可以扩展插件,那我们何不利用这一功能来把这些工具集成到EP中呢?
其实很早我都有这些想法,一直没有深究其做法,EP的用户工具组,我一般也是挂些帮助手册之类的供开发时参考。今天在BlueIdea看到有人发了一篇名为“让Editplus自动格式化css和js”的文章,看完后觉得写的很好,我也突然来了灵感,为什么不把前端开发常用工具都集成进去呢?
说做就做,我在网上找了一些相关的工具代码,按照作者的方式开始改造(作者是使用“本地cScript调用JS+EP的文本过滤器”的方式来实现的)。
下面来说下集成的方法(以下以EditPlus3中文版本为例):
1、下载工具包:edtools.rar ,解压后放到磁盘的一个目 ......
<style type="text/css">
/*
根据input的type来控制css样式
*/
/*
1.用css的expression判断表达式
优点:简单,轻量级
缺点:expression判断表达式FireFox是不支持的。致命的是只能区分出一个(例如例子中就只能区分出text文本框),不要试图设置多个,下面的会将上面的覆盖掉
input
{
background-color:expression(this.type=="text"?'#FFC':'#eee');
}
*/
/*
2.用css中的type选择器
优点:简单,明了,可以分区出各个input控件形态。
缺点:type选择器,IE6之前的对web标准支持的不太好的浏览器不能支持
input[type="text"]
{
background-color:aquamarine;
}
input[type="password"]
{
background-color:bisque;
}
input[type="submit"]
{
background-color:blueviolet;
}
input[type="reset"]
{
background-color:chocolate;
}
input[type="radio"]
{
background-color:darkcyan;
}
input[type="checkbox"]
{
background-color:dodgerblue;
}
input[type="button"]
{
background-color:purple;
}
*/
</style>
<script type="text/javascript">
/*
3.用javascript脚本实现
......
我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理:
举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示:
如何实现这个效果?
上例的HTML代码如下所示:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
要实现图片向左浮动、而且被文字环绕的效果,你只需先设定图片所在盒子的宽度,然后再把CSS属性float设为left即可:
#picture {
float:left;
width: 100px;
}
显示示例
另一个例子:列
浮动也可以用于实现在文档中分列。要创建多个列,你需要在HTML代码里用div来结构化想要的各个列:
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
......
CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。
本课我们将讨论以下内容:
CSS定位的原理
绝对定位
相对定位
CSS定位的原理
把浏览器窗口想象成一个坐标系统:
CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。
假设我们要放置一个标题。通过使用盒状模型(参见第9课),标题将显示如下:
如果我们要把这个标题放置在距文档顶部100像素、左边200像素的地方,我们可以在CSS中输入以下代码:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
得到的显示效果如下:
正如你所看到的,采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言,CSS定位要简单得多。
绝对定位
一个采用绝对定位的元素不获得任何空间。这意味着:该元素在被定位后不会留下空位。
要对元素进行绝对定位,应将position属性的值设为absolute。接着,你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。
举个绝对定位的例子,假如我们要在文档的四个角落各放置一个盒子:
#box1 {
position:absolute;
top: 50px;
l ......