day6-html

来源：互联网发布：mac os dmg镜像下载编辑：程序博客网时间：2024/05/29 13:02

/*!--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;"onfocus="if(value=='手机/邮箱/用户名')value=''" onblur="if(!value)value='手机/邮箱/用户名'" name="keyword" />     <div id="column">    </div><input type="text" value="密码" style="width:180px;height: 30px;border: solid 1px;"onfocus="if(this.value==defaultValue) {this.value='';this.type='password'}" onblur="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:使用百分比，保证随页面大小变化

0 0