目录
一、页面的布局和表单的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" style="width: 600px; height: 500px;">
<div id="header" style="width: 600px;background-color:cyan">
<h1 style="text-align:center;color: white;font-family:宋体;margin:auto;;">Ryan的网站</h1>
</div>
<div id="menu" style="width: 130px;height: 370px;background-color:darkturquoise;float: left;">
<b>菜单</b><br><i>学习计划</i><br><i>学习目标</i>
</div>
<div id="content" style="width: 470px;height: 370px;background-color: darkgrey;float:right">
表单学习
<form action="/" method="get">
<fieldset style="width: 250px;background-color: red; float: left;">
<legend style="color: white;text-align: center;">个人信息</legend>
<label for="username">*用户名:</label>
<!-- required表示不能为空 -->
<input type="text" value="请输入用户名" size="23" required><br>
<label for="password">*密码:</label>
<input type="password" value="请输入密码" size="23" style="margin-left: 16px;" required><br>
<label for="email">Email:</label>
<input type="text" value="请输入Email" size="23" style="margin-left: 14px;"><br>
<label for="sex" style="margin-right: 13px;">*性别:</label>
<!-- checked表示默认选择哪一个 -->
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female<br>
<label for="city">*居住城市:</label>
<select name="city" id="">
<option value="北京">北京</option>
<!-- selected表示你选择哪一个列表内容 -->
<option value="天津" selected>天津</option>
<option value="上海">上海</option>
<option value="江苏">江苏</option>
</select><br>
<label for="hobbies">个人兴趣爱好:</label>
<input type="checkbox" checked>篮球
<input type="checkbox">足球
<input type="checkbox">象棋<br>
<label for="message">*自我介绍:</label>
<!-- rows设置文本对话框的高度，cols设置文本对话框的宽度 -->
<textarea name="hobbies" id="" rows="6" cols="35" required>请输入自我介绍内容...</textarea>
<div id="from" style="text-align: center;">
<input type="submit" value="提交">
<input type="reset" value="清除">
</div>
</fieldset>
</form>
<form action="/" method="post">
<fieldset style="float: right;width: 135px;background-color: rgb(7, 233, 158);">
<legend style="text-align: center;color: white;">邮件发送</legend>
<label for="name">Name:</label><br>
<input type="text" size="14" name="name" value="you name">
<label for="email">E-mail:</label>
<input type="text" size="14" name="email" value="you email"><br>
<label for="content">content:</label>
<textarea name="" id="" cols="16" rows="10">发送的内容...</textarea><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
<input type="hidden">
</fieldset>
</form>
</div>
<!-- ©版权符号 -->
<div id="footer" style="width: 600px; font-family: 宋体; background-color:black;color:white;text-align:center">©www.Ryan.com</div>
</div>
</body>
</html>二、canvas的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 利用脚本创建样式
document.createElement("myHero")
</script>
<!-- 创建样式里的效果 -->
<style>
myHero{
/* display: block;以块级标签显示 */
display: block;
background-color:rgb(43, 205, 226);
padding: 30px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<!-- iframe是让浏览器窗口中显示不止一个页面 -->
<!-- frameborder移除边框 -->
<iframe src="index.html" frameborder="0" width="700px"
height="500px" name="frame_a"></iframe><br>
<a href="http://www.baidu.com" target="frame_a">百度</a>
<p><h3>自定义标签:</h3></p>
<myHero style="color: white;">创建的第一个样式标签</myHero>
<p><h3>canvas画布的使用:</h3></p>
<!-- solid是表示定义实线边框 -->
<canvas id="myCanvas" width="300px" height="280px"
style="border: 1px solid red;"></canvas>
<canvas id="myCanvas1" width="200px" height="200px"
style="border: 1px solid blue;"></canvas>
</body>
<script>
// 获取元素
var c = document.getElementById('myCanvas');
var c1 = document.getElementById('myCanvas1');
// 由于canvas是一个二维网格，只支持2d
var ctx = c.getContext("2d");
var ctx1 = c1.getContext("2d");
// 绘制一个红色的矩形
ctx.fillStyle="red";
// 矩形坐标,前两个输入的值是起始坐标，后面两个输入的值是宽度和高度
ctx.fillRect(0,0,300,280);
// 在canvas中画对角线（绘制线条）
// moveTo这个是起始坐标，lineTo这个是结束坐标
ctx.moveTo(70,280);
ctx.lineTo(150,0);
// stroke绘图的画笔
ctx.strokeStyle="yellow";
ctx.stroke();
ctx.beginPath()
ctx.moveTo(150,0);
ctx.lineTo(230,280);
ctx.stroke();
ctx.beginPath()
ctx.moveTo(230,280);
ctx.lineTo(0,110);
ctx.stroke();
ctx.beginPath()
ctx.moveTo(0,110);
ctx.lineTo(300,110);
ctx.stroke();
ctx.beginPath()
ctx.moveTo(300,110);
ctx.lineTo(70,280);
ctx.stroke();
// 绘制一个圆形
ctx.beginPath();
// arc是用来绘制圆形的方法，第一个和第二个值是圆心的位置，第三个值是表示半径的值，
// 第四个和第五个是起始角和结束角，第六个值中true表示逆时针绘制，false表示顺时针绘制（默认）
ctx.arc(150,160,40,0,2*Math.PI,false);
ctx.strokeStyle="yellow";
ctx.stroke();
// 创建文本
ctx1.font="30px 宋体";
// fillText输入实心文本
// strokeText输入空心文本
ctx1.fillText("hello",0,30);
ctx1.strokeText("Vue.js",0,60);
// 创建线条渐变createLinearGradient(x,y,x1,y1):x y表示渐变的起始位置，
// x1 y1表示渐变的终止位置
// var grd = ctx1.createLinearGradient(0,0,200,0);
var grd1 = ctx1.createRadialGradient(75,120,5,90,130,100);
// grd.addColorStop(0,"red");
// grd.addColorStop(1,"green");
grd1.addColorStop(0,"red");
grd1.addColorStop(1,"green");
// 绘制线条渐变
// ctx1.fillStyle=grd;
// ctx1.fillRect(0,80,200,40)
// 绘制园渐变
ctx1.fillStyle=grd1;
ctx1.fillRect(10,80,150,80)
</script>
</html>
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
