day6-html

Antja_fung

于 2017-04-23 15:42:08 发布

阅读量234

点赞数

分类专栏：前端-html

本文链接：https://blog.csdn.net/zqzb1111/article/details/70503901

版权

前端-html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

/*!--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:使用百分比，保证随页面大小变化

Antja_fung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day6-html

/*!--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;}/*#pictur
复制链接

扫一扫

专栏目录