/*!--css--*/
#box
{
position:absolute;
top:30%;
left:30%;
background: white;
width: 400px;
height: 300px;
float:left;
text-align: left;
padding-left: 20px;
border: solid 1px grey;
}
/*#picture{
position:relative;
top:40%;
left:40%;
width: 400px;
height:300px;
background: black;
float:left;
}*/
#columns{
width:300px;
height: 150px;
background: white;
text-align: center;
position:relative;
left:50px;
}
#column{
width:300px;
height: 30px;
background: white;
text-align: center;
}
<!--html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!--此条必加-->
<title>登录</title>
<script src="myjs.js" type="text/javascript" ></script>
<link href="log.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="box">
<h4>登录百度账号</h4>
<div id="columns">
<form >
<input type="text" value="手机/邮箱/用户名" style="width:180px;height: 30px;border: solid 1px;"οnfοcus="if(value=='手机/邮箱/用户名')value=''" οnblur="if(!value)value='手机/邮箱/用户名'" name="keyword" />
<div id="column">
</div>
<input type="text" value="密码" style="width:180px;height: 30px;border: solid 1px;"οnfοcus="if(this.value==defaultValue) {this.value='';this.type='password'}" οnblur="if(!value) {value=defaultValue; this.type='text';}" />
<div id="column">
</div>
<input type="button" value="登录" style="background: blue; width:180px;height: 30px"/ >
</form>
</div>
</div>
</body>
</html>
效果图如下:
note:输入提示语使用js还需进一步学习.
课程笔记:
js课程:
网站根目录run httpserver
<scripttype="text/javascript">
document.write()
script 不允许自闭合
console.log()
缩进:table,回退缩进:shift+table
常量变量:
var ,全大写变量名通常默认为常量,js无常量定义。
字符串使用常量保存。
大小写敏感
数据类型:
boolean number string object function
typeof
class prototype constructor 原型链(继承链结构)
内置数据类:
Math:数字,静态类Math.random():0-1间随机数 Math.round():四舍五入 Math.max.apply(this,数组)
Date:获取时间 本身为object,无参数初始化返回当前时间。new Date() ;可执行加减,getmonth起始为0.
Array:数组 splice影响本身 ~"abc".index("b") 判断b存在与否。
=== :判断大小和数据类型是否一样
&& 与
http-server -p xxx 换端口号
CSS 课程:
选择器权重
Text-align:left,right,center
无文本垂直居中属性
上中下居中:padding or line-height
Span:不带换行标签
Display:block:强制换行;inline:强制不换行;none 隐藏盒子(位置不保留)
Visibility:hidden(位置保留但盒子隐藏)
Overflow:hidden;scroll;auto(超出才出现滚动条)
Float:在同一层,决定空间大小 left;right
Clear:left ; right ;both某一边没有浮动块
Position:使用百分比,保证随页面大小变化