分类目录归档:html&CSS学习笔记

关于Html和CSS的学习笔记

记极端跳转代码

JS的跳转
为什么要单独拿出来说,是因为各种各样的跳转脚本太丰富了。。。放几个我收藏的栗子:

<script language=”javascript”> location.replace(“http://www.rffan.com”) </script>

这段代码是最有用的代码。

栗子1:(这个最没营养)

  1. <script language=’javascript’>window.location=’http://www.baidu.com’;</script>
  2. <script language=”javascript”>document.location = “http://www.baidu.com”;</script>

复制代码

栗子2:
—————————————
先在页面中做iframe,

  1. <IFRAME height=3220 marginHeight=0 src=/aaa.html frameBorder=0 width=100% marginWidth=0 scrolling=noalign=center></IFRAME>

复制代码

下面代码放入要iframe的aaa.html中

  1. <script type=”text/javascript”>
  2. var turl = “http://www.baidu.com/”;
  3. if(!window.attachEvent){
  4.     document.write(‘<input style=”display:none” type=”button” id=”exe” value=”” onclick=”window.parent.location.href=\”+turl+’\'”>’);
  5.     document.getElementById(‘exe’).click();
  6. }else{
  7.     document.write(‘<a style=”display:none” target=”_parent” href=”‘+turl+'” id=”exe”></a>’);
  8.     document.getElementById(‘exe’).click();
  9. }
  10. </script>

复制代码

栗子3:
—————————————

  1. <a  id=”auto”>百度</a>
  2. <SCRIPT LANGUAGE=”JavaScript”>
  3. <!–
  4. function Redirect(){
  5. var lnk = document.getElementById(“auto”);
  6. if(typeof(lnk.click)==”undefined”){
  7. window.location.;
  8. }else{lnk.click();}}
  9. var time = 1; //时间,秒
  10. var i = 0;
  11. function dis(){
  12. document.all.s.innerHTML = “还剩” + (time – i) + “秒”;
  13. i++;
  14. }
  15. timer=setInterval(‘dis()’, 1000);//显示时间
  16. timer=setTimeout(‘Redirect()’,time * 1000); //跳转
  17. //–>
  18. </SCRIPT>

复制代码

栗子4,带进度条:

  1. <form name=loading>
  2. <p align=center><font face=arial color=#0066ff size=2>loading…</font>
  3. <input style=”padding-right: 0px; padding-left: 0px; font-weight: bolder; padding-bottom: 0px; color: #0066ff; border-top-style: none; padding-top: 0px; font-family: arial; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none” size=46 name=chart>
  4. <input style=”border-right: medium none; border-top: medium none; border-left: medium none; color: #0066ff; border-bottom: medium none; text-align: center” size=47 name=percent>
  5. <script language=”javascript”>
  6. var bar=0
  7. var line=”||”
  8. var amount=”||”
  9. count()
  10. function count(){
  11.     bar=bar+2
  12.     amount =amount + line
  13.     document.loading.chart.value=amount
  14.     document.loading.percent.value=bar+”%”
  15.     if (bar<99){
  16.         setTimeout(“count()”,100);
  17.     }else{
  18.         window.location = “http://www.baidu.com/”;
  19.     }
  20. }
  21. </script>
  22. </p>
  23. </form>

复制代码

PHP中的跳转
  1. <?php
  2. $asins = $_GET[“asins”];
  3. $tag = $_GET[“tag”];
  4. $url = “http://www.amazon.com/dp/”.$asins.”/?tag=”.$tag;
  5. Header(“HTTP/1.1 302 Moved Permanently”);
  6. Header(“Location: “.$url);
  7. ?>

CSS修改实例之搭建像chinaz的超级ping一样的样式

我们测试IP的ping的时候常常会使用chinaz作为我们的ping,但是我们很少会发现当我们直接复制chinaz的时候就会出现那个难看的带圆点li列表(如果你的主题没有定义li的话)那么怎么解决呢?看阿福变魔术吧

只要在你的wordpress的主CSS上加上以下的CSS代码,直接复制之后效果就在下面了,是不是很轻松呢?

/* ping列表开始 */
#detail {margin:5px auto;width:600px;border:#b2b2b2 1px solid;overflow:hidden;font-size:13px;font-family:”Microsoft Yahei”;}
#detail ul {margin:0 !important;padding:0 !important;height:35px !important; width:666px !important; overflow:hidden !important;border-bottom:#b2b2b2 1px dotted !important;}
#detail ul:hover{background:#f4f4f4 !important;}
#detail li{ text-align:center !important;padding-top:8px !important;margin-left:0px !important;color:#555 !important;height:34px !important;width:128px !important; float:left !important; list-style:none !important; }
#detail #detail ,#detail .head:hover {background:#f4f4f4 !important;}
#countresult{margin:20px auto;font-size:13px;font-family:”Microsoft Yahei”;text-align:center;color:#555;}

/* ping列表结束 */

效果如下:

  • 序号
  • Ping的地点
  • 响应IP
  • 响应时间
  • TTL
  • 赞助商 赞助点联系QQ:1751691323
最快:上海[电信] 5 毫秒    最慢:德国[海外] 299 毫秒
电信平均: 28 毫秒    联通平均: 45 毫秒

修改wordpress 中的关于“引用”的CSS代码实例

quota

上面的截图中斜体字就是没改之前,引用的代码,这个引用实在是太难看的,还斜体。一般咱们写博客很少用的到这种积累的功能。食之无味,弃之可惜。

对于我们这些天天看着代码的孩子来说,显然一个代码高亮会更爽点。不过代码高亮不是得主题集成就是要安装插件。不过幸好的是,wordpress最新版,当你复制代码的时候不会自动应用为html了,因此,咱们就可以拿这个引用改成代码高亮。

首先我们得找到页面中的引用的div,使用火狐和谷歌的查找元素很快就能找到了,是在entry-content下面的blockquote中,然后,我们就去找css里面的entry-content下面的blockquote了。替换掉里面的内容,效果和代码如下

padding:5px 10px;
margin:0px;
border:1px solid rgb(255, 196, 99);
background-color:rgb(255, 239, 198);
overflow:auto;

CSS中的背景图片定位[转载]

写在转载前:CSS中的背景图的定位最重要的就是开始的坐标位置了,开始的坐标位置定好了,其他的也就很轻松了。最主要的就是你要设置好你的div的大小。利用CSS定位背景图的目的是为了将N多的图片放到一张大图里面,从而减少对图片的请求。

1. 关键字, 例如: background-position: top right;

优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.

2. 像素, 例如: background-position: 0px 0px;

优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.

原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.

像素

3. 百分比, 例如: background-position: 80% 50%;

优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
缺点: IE 中无法处理复杂的百分比定位. 你可以看看这个测试.

原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.

百分比

本文来自:neoease

如何去掉li前面的原点

这个很简单,只需要在CSS中加上li{
list-style: url(“pre.gif”) outside circle;
}

就OK了

然后还有各种其他的装饰

list-style-type :
disc   默认值。实心圆
circle   空心圆
square   实心方块
decimal   阿拉伯数字
lower-roman   小写罗马数字
upper-roman   大写罗马数字
lower-alpha   小写英文字母
upper-alpha   大写英文字母
none   不使用项目符号

不过很可惜的是,阿福在使用过程中发现还是无法消除圆点。。。

css的语法基础

css貌似对于我们来说看起来很难其实很简单,但是用起来却很麻烦的一种语言。

好吧阿福说的很绕,但是事实就是如此,css你必须得吃透,阿福所说的这个吃透。其实挺简单的,因为CSS的语法就一种,那就是“选择器{属性:值}”举个例子就是: h1{font:微软雅黑}  这个请参照上面的对号入坐即可。

是不是有点简单呢?呵呵其实等到下面的时候你就会发现不怎么简单了。目前这个还是酱紫。

Html第一脸的认识

html5

上面的图是html5的图。不过可惜的是html5阿福目前还是无缘接触到,但是很快阿福就能够接触到html5了。

当然这次先来看看html,做一下html的笔记。其实在阿福的认知中,html更像是告诉人们这是什么,而不像程序语言那样,告诉人们怎么去做。html事实上就是一门形容词语言。用来形容这个网页是啥样子的。

好吧,这是总的印象。但是细小还是有差别的,他是有包容性的,这个包容性还包括了程序等。不过说了这么多,总得说说html的表现形式吧?

是的html就是这么一种语言“标签开始+内容+标签结束”就是酱紫。还不懂?那让我来给你举个例子吧

<a href=”http://rffan.com”>阿福学前端</a>  前面的<>就是标签的开始,中间的阿福学前端就是内容了,而后面的带“/”的<>就是标签的结束了,细心的孩纸们会发现不管是前面还是后面的<>都会带有一个a,呵呵是了,这就是a标签~