2017年05月_甲戌天火

原创 html5第九课时，js表达式

html>html>head lang="en"> meta charset="UTF-8"> title>表达式title> script> //字面量 var a=10; var b='abc'; //变量 var d=10; var e=d; var c

2017-05-23 14:47:09 282

原创 html5第九课时，js常用的输入输出方法

html>html>head lang="en"> meta charset="UTF-8"> title>常用的输入输出方法title> script type="text/javascript"> alert('一般用于输出提示信息。');//alert没有返回值。 var name=prompt('用于获取用户输入的文本内容','1

2017-05-23 14:46:42 433

原创 html5第九课时，number数据类型

html>html>head lang="en"> meta charset="UTF-8"> title>number数据类型title> script type="text/javascript"> /*var a='123'; alert(typeof a); //parseInt函数：把字符串转换成number数据

2017-05-23 14:46:09 381

原创 html5第九课时，声明变量

html>html>head lang="en"> meta charset="UTF-8"> title>声明变量title> script> /*var width1=11,width2=12;//声明变量，并且赋值。 alert(width1); alert(width2); width1=666;

2017-05-23 14:45:24 3121

原创 html5第九课时，变量交换

html>html>head lang="en"> meta charset="UTF-8"> title>变量交换title> script> /* document.write('输出手中的纸牌：'); var a=10,b= 8,c; document.write('左手的纸牌:'+a+''); doc

2017-05-23 14:45:03 276

原创 html5第九课时，循环输出

html>html>head lang="en"> meta charset="UTF-8"> title>循环输出title> script type="text/javascript"> document.write('使用javascript循环输出HellowWorld') for(var i=0;i5;i++){

2017-05-23 14:44:37 550

原创 html5第九课时，3.外部js

html>html>head lang="en"> meta charset="UTF-8"> title>js使用方式3.外部jstitle> script src="../../js/test.js" language="JavaScript"> script>head>body>input type="button" value="第三种js方式"

2017-05-23 14:44:07 198

原创 heml5第九课时，js使用方式2.内部js

html>html>head lang="en"> meta charset="UTF-8"> title>js使用方式2.内部jstitle> script> //声明一个函数。 function surprise(){ alert('嘻嘻，惊喜不惊喜？') } script>head>

2017-05-23 14:43:33 201

原创 html第九课时，js使用方式1.行内js

html>html>head lang="en"> meta charset="UTF-8"> title>js使用方式1.行内jstitle>head>body>input type="button" value="点击有惊喜" onclick="javascript:alert('惊不惊喜？刺不刺激？')"/>点击之后后弹出一个框。-->body>

2017-05-23 14:43:02 267

原创 html第九课时，js显示helloworld

html>html>head lang="en"> meta charset="UTF-8"> title>js显示hellowwerldtitle> script type="text/javascript"> document.write('HellowWorld') script>head>body>body>html>

2017-05-23 14:42:36 698

原创 html第九课时，圆柱体体积

html>html>head lang="en"> meta charset="UTF-8"> title>圆柱体体积title> script> var r=prompt('请输入半径'); var h=prompt('请输入高度'); r=parseInt(r); h=parseInt(h);

2017-05-23 14:41:47 814

原创 html第九课时，水仙花数

html>html>head lang="en"> meta charset="UTF-8"> title>水仙花数title> script type="text/javascript"> var zhi1=prompt('请输入一个数'); var length=zhi1.length;//得到位数可以计算幂数。 va

2017-05-23 14:41:20 1652

原创 html5第八课时，flex的基础应用

html>html>head lang="en"> meta charset="UTF-8"> title>flextitle> style> #content{ display: flex; /*flex-direction: row-reverse; 设置显示的顺序，倒序，从做

2017-05-13 09:56:18 262

原创 html5第八课时，灵活布局，flex

html>html>head lang="en"> meta charset="UTF-8"> title>灵活布局,flextitle> style> #div1{ width: 400px; height: 400px; background-color: red;

2017-05-13 09:55:21 293

原创 html5第八课时，移动的飞机

html>html>head lang="en"> meta charset="UTF-8"> title>飞机title> style> img{ width:150px ; -webkit-animation: plane 15s ease-in-out 1s; -o-anima

2017-05-13 09:54:32 307

原创 html5第八课时，图片放大溢出解决

html>html>head lang="en"> meta charset="UTF-8"> title>图片放大溢出的解决title> style> div{ width: 160px; height: 180px; border: 1px red solid;

2017-05-13 09:53:42 878

原创 html5第八课时，变形效果

html>html>head lang="en"> meta charset="UTF-8"> title>变形效果title> style> img{ /*transform: translate(500px,100px); /!*以左上角为中心点，向右和向下移动*!/*/ /*t

2017-05-13 09:52:29 353

原创 html5第八课时，长度单位

html>html>head lang="en"> meta charset="UTF-8"> title>长度单位title>head>body style="font-size: 62.5%">针对于em来改变，对于rem没有作用。-->div style="font-size: 12px"> 第一层 div style="font-size: 2e

2017-05-13 09:50:26 335

原创 html5第八课时，属性前缀

html>html>head lang="en"> meta charset="UTF-8"> title>属性前缀title> style> div{ width: 200px; height: 200px; background-color: #cccccc;

2017-05-13 09:50:00 818

原创 html5第八课时，关系选择器

html>html>head lang="en"> meta charset="UTF-8"> title>关系选择器title> style> #li3 + li{/*相邻选择器，选择相邻的变化, 即为，列表项4，处理当前元素以后的相邻的一个元素。*/ color: red;

2017-05-13 09:49:34 249

原创 html5第八课时，状态伪类选择器

html>html>head lang="en"> meta charset="UTF-8"> title>状态伪类选择器title> style> input:checked{ margin-left: 20px; } input:enabled{ outline: red

2017-05-13 09:48:51 494

原创 html5第八课时，结构伪类选择器

html>html>head lang="en"> meta charset="UTF-8"> title>结构伪类选择器title> style> /*li:nth-child(2n){ color: red;/!*偶数行*!/ } li:nth-child(2n+1){

2017-05-13 09:47:48 354

原创 html5第八课时，属性选择器

html>html>head lang="en"> meta charset="UTF-8"> title>属性选择器title> style> img[alt="123"]{ /*alt也可以没有值，如果只有alt代表所有带alt属性的都会变化，*/ margin: 30px; }

2017-05-13 09:45:54 255

原创 html5第七课时，双飞翼布局，理解注释！！

html>html>head lang="en"> meta charset="UTF-8"> title>双飞翼布局title> style> #parent{ width: 600px; height: 600px; } #main{ height

2017-05-01 12:12:32 292 1

原创 html5第七课时，内边距应用。

html>html>head lang="en"> meta charset="UTF-8"> title>内边距title> style> #div1{ width: 500px; margin: 0 auto; border: 10px dashed red;

2017-05-01 11:02:38 410

原创 html5第七课时，div居中

html>html>head lang="en"> meta charset="UTF-8"> title>DIV居中title> style> #div1{ width: 300px; height: 300px; border: 1px dashed red;

2017-05-01 11:01:57 299

原创 html5第七课时，固定定位

html>html>head lang="en"> meta charset="UTF-8"> title>固定定位title> style> #back{ width: 100px; height: 100px; text-align: center; li

2017-05-01 11:01:27 738

原创 html5第七课时，辽宁陆海定位

html>html>head lang="en"> meta charset="UTF-8"> title>辽宁陆海定位title> style> #container{ height: 300px; background-color: #42668f; position: rela

2017-05-01 11:00:43 312

原创 heml5第七课时，绝对定位（absolute）

html>html>head lang="en"> meta charset="UTF-8"> title>绝对定位（absolute）title> style> #child1,#child2,#child3{ float: left; } #child1{ width:

2017-05-01 10:38:29 210

原创 heml5第七课时，相对定位

html>html>head lang="en"> meta charset="UTF-8"> title>相对定位relativetitle> style> #parent{ width: 700px; height: 200px; background-color: rosybr

2017-05-01 10:37:56 288

原创 html5第七课时，页面作业

html>html>head lang="en"> meta charset="UTF-8"> title>页面作业title> style> #left,#left2,#left3,#left4{ float: left;/*并集选择器*/ text-align: center;

2017-05-01 10:34:18 390

原创 html5第七课时，用overflow解决下方child中的margin-top中的父类子类都移动的现象

html>html>head lang="en"> meta charset="UTF-8"> title>title> style> #parent{ width: 300px; height: 300px; background-color: #42668f;

2017-05-01 10:31:25 425

原创 html5第七课时，块级盒子的垂直外边距合并

html>html>head lang="en"> meta charset="UTF-8"> title>块级盒子的垂直外边距合并title>head>body>div style="margin-bottom: 50px;border: 2px solid black">块元素1div>div style="margin-top: 30px;border: 2px

2017-05-01 10:18:17 482

甲戌天火的博客