html和css.docx
- 文档编号:6130685
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:24
- 大小:201.28KB
html和css.docx
《html和css.docx》由会员分享,可在线阅读,更多相关《html和css.docx(24页珍藏版)》请在冰豆网上搜索。
html和css
position:
absolute.
position:
relative相对定位.
1.从原来的位置开始偏移.
2.相对定位的内容也会漂浮起来。
但是还会占着原来的位置。
如下
DOCTYPEhtml>
无标题文档div{
width:
100px;
height:
100px;
}
.d1{
background-color:
#FF0000;
}
.d2{
background-color:
#00FF00;
position:
relative;
top:
20px;
left:
20px;
}
.d3{
background-color:
#FFFF00;
}
1
2
3
position:
fixed,将内容固定住,同时也会漂浮起来。
DOCTYPEhtml>
无标题文档div{
width:
100px;
height:
100px;
}
.d1{
background-color:
#FF0000;
}
.d2{
background-color:
#00FF00;
position:
fixed;
top:
20px;
left:
20px;
}
.d3{
background-color:
#FFFF00;
}
1
关闭
3
margin属性,控制容器的外边据.被加上margin属性的容器不会漂浮,所以移动后,会将其它内容排开。
DOCTYPEhtml>
无标题文档div{
width:
100px;
height:
100px;
float:
left;
}
.d1{
background-color:
#FF0000;
}
.d2{
background-color:
#00FF00;
margin-left:
10px;
}
.d3{
background-color:
#FFFF00;
}
1
2
3
Margin是margin-left、margin-right、margin-top、margin-bottom的综合。
Margin的取值顺序为:
上右下左。
并且当这四个值一样时,可以简写为一个:
DOCTYPEhtml>
无标题文档div{
width:
100px;
height:
100px;
float:
left;
}
.d1{
background-color:
#FF0000;
}
.d2{
background-color:
#00FF00;
margin:
20px;
}
.d3{
background-color:
#FFFF00;
}
1
2
3
当margin取值为auto时,容器会水平居中:
DOCTYPEhtml>
无标题文档div{
width:
100px;
height:
100px;
}
.d1{
background-color:
#FF0000;
}
.d2{
background-color:
#00FF00;
margin:
auto;
}
.d3{
background-color:
#FFFF00;
}
1
2
3
Padding控制内遍距。
DOCTYPEhtml>
无标题文档div{
width:
100px;
height:
100px;
}
.d1{
background-color:
#FF0000;
}
.d2{
background-color:
#00FF00;
padding:
15px;
}
.d3{
background-color:
#FFFF00;
}
1
2
3
在网页上,尽量不要使用alert.因为alert需要让用户点击一下,对用户体验不好。
我们自己给自己制作一个工具,以后凡是要用到alert的地方,就用这个工具。
(这叫做封装。
)
方法一:
DOCTYPEhtml>
无标题文档加入购物车
functionshowMsg(msg,w,h){
varelt=document.createElement("div");
elt.id="msg";
elt.style.border="solidblack5px";
elt.style.backgroundColor="yellow";
elt.style.width=w+"px";
elt.style.height=h+"px";
elt.innerHTML=msg;
elt.style.textAlign="center";
elt.style.lineHeight=h+"px";
elt.style.fontSize="30px";
elt.style.fontWeight="bold";
elt.style.position='absolute';
elt.style.top=200+"px";
elt.style.left=(document.body.offsetWidth-w)/2+"px";
document.body.appendChild(elt);
functionshutdown(){
varmsg=document.getElementById("msg");
document.body.removeChild(msg);
}
setTimeout(shutdown,1000);
}
方法二,让提示框是震动地。
步骤一
DOCTYPEhtml>
无标题文档加入购物车
functionshowMsg(msg,w,h){
varelt=document.createElement("div");
elt.style.border="solidblack5px";
elt.style.backgroundColor="yellow";
elt.style.width=w+"px";
elt.style.height=h+"px";
elt.innerHTML=msg;
elt.style.textAlign="center";
elt.style.lineHeight=h+"px";
elt.style.fontSize="30px";
elt.style.fontWeight="bold";
elt.style.position='absolute';
elt.style.top=200+"px";
elt.style.left=(document.body.offsetWidth-w)/2+"px";
document.body.appendChild(elt);
varstart=newDate();
varA;
functionanimate(){
varnow=newDate();
varlast=now-start;
elt.style.left=last+"px";
if(last>=2000){
document.body.removeChild(elt);
clearInterval(A);
}
}
A=setInterval(animate,1);
}
插播知识点:
Math.sin();度数有360种,所以sin(度数)的返回值也有360种,以下就是将这360种度数对应的sin返回值输出。
观察输出的结果,会发现:
范围-1~~1之间。
不是匀速渐变。
方法2:
先把上面的sin看懂
DOCTYPEhtml>
无标题文档加入购物车
functionshowMsg(msg,w,h,t){
varelt=document.createElement("div");
elt.style.border="solidblack5px";
elt.style.backgroundColor="yellow";
elt.style.width=w+"px";
elt.style.height=h+"px";
elt.innerHTML=msg;
elt.style.textAlign="center";
elt.style.lineHeight=h+"px";
elt.style.fontSize="30px";
elt.style.fontWeight="bold";
elt.style.position='absolute';
elt.style.top=200+"px";
elt.style.left=(document.body.offsetWidth-w)/2+"px";
document.body.appendChild(elt);
varstart=newDate();
varA;
functionanimate(){
varnow=newDate();
varlast=now-start;
vard=Math.PI/180*50;
varjl=Math.sin(last*d)*10+(document.body.offsetWidth-w)/2;
elt.style.left=jl+"px";
if(last>=t){
document.body.removeChild(elt);
clearInterval(A);
}
}
A=setInterval(animate,1);
}
复习java.
1.7过
表驱动式,猜拳游戏。
importjava.util.Scanner;
publicclassFoo{
publicstaticvoidmain(String[]args){
String[]quan={"剪刀","石头","布"};
String[][]jieguo={
//刀石布
{"平局","胜利","失败"},//第一行代表剪刀
{"失败","平局","胜利"},//第一行代表石头
{"胜利","失败","平局"}//第一行代表布
};
inta,b;//a是电脑(行)b是用户(列)。
a=((int)Math.random()*1000)%3;
System.out.println("请出拳:
0剪刀\t1石头\t2布");
Scannersc=newScanner(System.in);
b=sc.nextInt();
System.out.println("电脑出:
"+quan[a]);
System.out.println("你出:
"+quan[b]);
System.out.println("结果:
"+jieguo[a][b]);
}
}
杨辉三角
importjava.util.Scanner;
publicclassFoo{
publicstaticvoidmain(String[]args){
int[][]a=newint[10][10];
for(inti=0;ia[i][0]=1;
a[i][i]=1;
}
for(inti=2;ifor(intj=1;j
a[i][j]=a[i-1][j]+a[i-1][j-1];
}
}
for(inti=0;ifor(intj=0;j<=i;j++){
System.out.print(a[i][j]+"\t");
}
System.out.println();
}
}
}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
html
css
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。