CSS笔记-CSDN博客

本文链接：https://blog.csdn.net/kkllmey/article/details/2761890

==========================================================CSS样式

1.内嵌样工   2.·行内样式 3.外部样式
   导入外部样式表: <style>@import mycss.css</style>
   链接外部样式表(不用加style标记):   <head><link rel="stylesheet" type="text/css" href="myCss.css"></head>
<head>
<style type="text/css">
p{color:red;font-family:"隶书";font-size:24px;}
.h2{color:blue;font-family:"隶书";font-size:30px;}
</style>
</head>
<body>
<h2 class="h2">静夜思</h2>
<p>床前明月光</p>
</body>

=================样式属性====================

文本属性 :
font-size  ----文字大小
font-family ----字体
font-style  ----字体样式（细，粗）
color  ----字体颜色
text-align  ----文字对齐方式（center）
text-decoration:none 无下划线
text-decoration:overline 有下划线
          none 默认。定义标准的文本。
          underline 定义文本下的一条线。
          overline 定义文本上的一条线。
         line-through 定义穿过文本下的一条线。
         blink 定义闪烁的文本（无法运行在IE和Opera中）。

背景属性:
background-color ---设置背景颜色
background-image ---设置背景图片
background-repeat ---设置一个指定的背景图像如何被重复显示
可取的值有：repeat(铺满整个区域，默认情况)，no-repeat(不平铺)，repear-x(只在水平方向铺)
repeat-y(只在垂直方向平铺)

表格也可有背景图片样式
td{background-image:url(aa.gif);backgound-repeat:no-repeat;}

方框属性：
  margin-top  设置对象的上边框
   (边界属性) margin-right 设置对象的右边框
   margin-bottom
  margin-left
  例子
  四个边距均为10px：

h1 {margin: 10px}顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：

h1 {margin: 10px 2%}顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：

h1 {margin: 10px 2% -10px}顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：

h1 {margin: 10px 2% -10px auto}

<UL>   :ul{border:1px solid red;}
<LI>    :li{list-style:url(img/dot_yellow.gif);display:inline;border:1px solid blue;margin:0px 10px;}
  //display:inline 水平显示每项
  //border:1px solid blue;     每项的背景边框为1px，细线，蓝色
  //margin:0px;10px; 上下边距为0，左右为10
<UL>

   (边框属性) border-style:deshed(虚线) 边框的样式
  border-width:1px;  边框的宽度
  border-color:red  边框的颜色

   (填充属性) padding-top 设置内容与上边框之间距离
  padding-right 设置内容与右边框之间距离
  padding-bottom
  padding-left

方框属性案例：--------
<style type="text/css">
   table{ margin-top:100px;margin-left:100px;} --整个table表中应用对齐方式
   tr{background:yellow}    --每行应用背景颜色
   td{border-style:solid;border-width:11px;padding-top:11px;border-color:red;}     ----每个单元格设置边框属性(必须设置border-style，才能显示边框)dashed:虚线
</style>

文本框设置边框:
<style>
.border{border-width:1px;border-color:red;border-style:solid;width:100px;background:red;text-align:center;color:blue;}
</style>

为Button按钮设置背景图片
<style>
.button{background:url(img/login-sm2.gif);padding:0px;border:0px;width:100px;height:33px;};//padding:填充为0;border：边框为0
</style>

---------------------<DIV>透明度----------------------------------------
style="position:absolute;z-index:20; cursor:hand; left:expression(window.screen.width-40); top:115px; width:15px;filter:alpha(opacity=80);"

仅支持 FF
<script>document.getElementById("Layer1").style.opacity = "0.5";</script>

IE Only
<script>document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";</script>

-------------------------------windwos浏览器对象----------------------------------------

window.location.assign('ss.htm');相当于超链接

-----------------特殊样式-----------------------------

A:link {color:red} 未被访问的链接样式，红色
A:visited{color:green} 已被访问过链接样式，绿色
A:hover {color:yellow} 鼠标悬浮在链接上时的样式，黄色
A:active {color:blue} 鼠标正在接下时的颜色

</head>

====================================================实现超链接效果
nClick="location.href='ss.jsp'"
------------------------------------
其中的"help"可以换成以下内容

hand 手形
crosshair 十字形
text 文本形
wait 沙漏形
move 十字箭头形
help 问号形
e-resize 右箭头形
n-resize 上箭头形
nw-resize 左上箭头形
w-resize 左箭头形
s-resize 下箭头形
se-resize 右下箭头形
sw-resize 左下箭头形

=======================================DOM编程－document对象 (JavaSript)======================

     doucment对象的常用属性和方法介绍：
                    document.bgColor=red;
                    document.getElementById();
                    document.getElementsByName();//此方法获得相同名称的控件 ;
   document.all["check"] //得到所有为check的复选框

document.getElementById("myDiv").style.pixelTop+=10; //pixelTop此时div的top值,不加px;

       //让层隐藏，显示:
       myDiv.style.display="block" 或="none"

     //窗口滚动事件
       window.οnscrοll=move;    // move:自已写的方法


     //判断是否为IE浏览器
       var NS = (document.layers) ? 1 : 0; //如果layers不为"undefined"( null ) 条件真
       var IE = (document.all) ? 1: 0;       //如果document.all null不为null 条件真

     //效果(隐藏行)
     var table=document.getElementById("mytable");
     table.rows[0].style.display="none";

//在javaScript中 if (1) 这个条件也为true

   //IE中，每隔1毫秒调用一个方法
    window.setInterval("move()",1);

//Math类
   Math.ceil(12.1) :13 返加>=这个数的最小整数
Math.floor(12.1) : 12 返加<=这个数的最大整数
Math.floor(-9.5) : -10
Math.ceil(-9.5) :-9

000000000000000000会浮动的广告000000000000000000000000000000000000000000000000
<html>
<head>
<title>
js效果
</title>

var s_w=document.body.offsetWidth;
var s_h=document.body.offsetHeight;

       var obj=document.getElementById("fly");
       var d_w=obj.style.pixelWidth;
       var d_h=obj.style.pixelHeight;
       var d_l =obj.style.pixelLeft;
       var d_t=obj.style.pixelTop;

       x=(d_l<=0||d_l>=s_w-d_w?!x:x);
       y=d_t<=document.body.scrollTop||d_t>=document.body.scrollTop+s_h-d_h?!y:y;
       obj.style.pixelLeft=x?(d_l+1):(d_l-1);
       obj.style.pixelTop=y?(d_t+1):(d_t-1);
       setTimeout("move()",10);
   }
   var tmp=0;
   window.οnscrοll=function scro()
   {
    document.getElementById("fly").style.pixelTop+=document.body.scrollTop-tmp;
  tmp=document.body.scrollTop;
   }
</script>
</head>
<body onLoad="move()">
<div id="fly" style="z-index:1;background:red;width=200px;height:50px;position: absolute; left:2px; top: 2px;"></div>

    <script language="javascript" type="text/javascript">
        for(var i=0;i<=100;i++){document.writeln(i+"<br>");}
   </script>
</body>
</html>

00000000000000000000000000000000动态增删表格0000000000000000000000000000000000000000

0000000000000000000000000000000000000实现全选项果00000000000000000000000000000000000

===========================================表单验证=============================

String 对象
创建String 对象 (String 对象只有一个属性length)
  var str="这也是String对象" ;
var str=new String("aaaa");
str.length;
     str.indexOf("子字符串",起始位置); 如果找到了，返回它的下标，否则没找到返回-1;
str.charAt(0);       返回指索引的字符
str.substring(index1,index2); 返回位index1 和 index2之间的字符串
str.substr("index",count) ;    返回从index开始，截取count个字符
str.toLowerCase()    ;小写
str.toUpperCase();    大写

创建数组
var provin=new Array("河北","山东","黑龙江");

动态为下拉列表加选项
var obj=document.myForm.selectDiFan;
var newE=document.createElement("option"); 创建的对象为 option 类型
newE.setAttribute("value",provin[0]);              //对象的value属性：河北
newE.innerText=provin[0];    //对象标签里的值:<option>河北</option>
obj.appendChild(newE);  //把对象加入obj（下接列表对象）中

//清空下拉列表里的所有选项        document.frm.selectDiFan.innerHTML="";

--------------------------------------- 动态为下拉加选项示例:-------------------

                  <select size="1" name="provins" οnchange="changeCity(this);"></select>
function changeCity(obj)
{
  document.frm.city.innerHTML="";
  var citys; //数组
  switch(obj.value)
  {
   case "河北":
    citys=hebei;      //hebei是数组
    break;
   case "山东":
    citys=shandong;
    break;
   case "黑龙江":
    citys=heilongjiang;
    break;
  }
  for(var i=0;i<citys.length;i++)
  {
   var e=document.createElement("option");
   e.setAttribute("value",citys[i]);
   e.innerText=citys[i];
   document.frm.city.appendChild(e);
  }

动态为下拉加选项示例:-------------------

文本框对象<input type="text" onBlur="move()" onFocues="move()" onChange="move()">:

事件: onBlur         失去焦点
onFocus       得到焦点
  onChange     文本框的值改变时
方法: focus()    让文本框得到焦点
  select()    选中文本框中的内容，突出显示输入区域
属性: value             设置或获得一个文本框中的值

表单
document.forms[0].txtName.value
document.forms[0].elements[0] //第0个表单，第0个元素

---------------制作按下回车键调用Tab键的效果

键盘事件：onKeyDown

  function checkName()
{
  //如果为13，就是按下回车（因为回车键的ASCII码是13）
  if(event.keyCode==13&&event.srcElement.type !="submit")    //event.srcElement.type得到按下键时有焦点的按键类型
  {
   event.keyCode=9;   (Tab键的ASCII码是 :9)
  }
}
1.<input type="text" name="txtName" onKeyDown="checkName()">

2.<script>document.onKeyDown= checkName    </script>                   //不用在<input >里写了，这会应用到整个页面

//修改标签里的值:
myDiv.innerHTML="<font color="red">用户名不能为空 </font>";
myDiv.innerText ="用户名不能为空 "

验证用户名是否有数字
         1. for(i=0;i<strName.length;i++)
{
   ch=strName.charAt(i);
   if(ch>=0){ alert("不能包含数字");}
   return false;

}
return true;

2. if(ch>='0'&&ch<='9') 这时进行决断时必须二个条件都写上，因为如果加引号，则进行ASCII比较，
有的字符的ASCII的大于'0'的ASCII码;

页面加载时让文本框得到焦点
<body onLoad="document.myForm.txtName.focus()">

---------------------------------------------------------------------------------------------------------------------------------
－－－－－－－－－－－<marquee> ... </marquee>

移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等

方向
<direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移！</marquee>

方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>

循环
<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>

速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

外观(Layout)设置

对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>

底色
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>

面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>

空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>

－－－－－－－－－－<iFrame>标签
<iframe src="http://www.sina.com" width="300" height="200"></iframe>用于包含一个网页，相当于框架

------------------------------在javaScript中使用正则表达式----------------------------------------
1.function checkName(obj)
{
//用户名必须以字母开头，最小6位

if(obj.value.length==0){alert('用户名不能为空');return ;}
if(obj.value.length<6){alert('用户名不能少于6位');return ;}
var regu = "^([a-zA-Z]+[_0-9a-zA-Z@.-]*)$"
var re = new RegExp(regu);
if( obj.value.search( re ) != -1 ){
  return true;
}else{
  window.alert( "请使用规范的会员名！" );
  return false;
}
}
2.function checkName(obj)
{
//以字母开头
var reg=/^[A-Za-z]+$/;
if(！reg.test(userName.value.charAt(0))){
  alert("会员名必须以字母开头");
}
}

-------------------js是获取日期如下:
<script language="javascript">
var dt = new Date();
m=dt.getMonth()+1;//获得月份
wk=dt.getDay(); //获取星期
d=dt.getDate()+1;//获取日
y=dt.getFullYear(); //获取年(四位)
document.write(m + "月" + d + "日星期" + wk + " " + y + "年" );
</script>

-----------------------------------------------------------------------this.setCapture() 和 this.releaseCapture()
web开发和windows开发最大的区别就是windows开发是有状态的,而web开发是无状态的,在windows中,一切操作都可以由程序来控制 ,除非强制执行ctrl+alt+del;但web操作就不一样了,即使执行很重要的操作,用户一点击浏览器关闭按钮,就将前面操作成果化为乌有.尽管可以在onunload事件中加些代码,让用户可以选择是否退出,但不能从根本上解决问题!
        前几天,从网上看到setCapture方法,了解了一下,大体是这样的意思,当在IE文档某个区域中使用了这个方法,并且写了onclick或者onmouse***等有关的鼠标事件方法,那么它就会监视相应的鼠标操作,即使你的鼠标移出了IE,它也一样能捕获到.如果你在某div中的onclick事件中写了一个alert命令,这时,你点击的关闭按钮,它也一样会弹出alert窗口.releaseCapture与setCapture方法相反,释放鼠标监控.
        利用这个特性,我们可以延缓IE的关闭窗口等破坏性操作,将一些重要的操作能够在破坏性操作执行之前得到处理.
        有一点遗憾:setCapture和releaseCapture 不支持键盘事件.只对onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout这样的鼠标事件起作用.

----------------------------------------------------------------系统时间-------------------------------
currdate=new Date();
currdate.getYear(); //得到年
currdate.getMonth(); //得到月份（＋1后是中国的月份）
currdate.getDate(); //得到日
currdate.getDay(); //得到今天星期几（如果星期二,输出：2）new Array('星期日','星期一','星期二');