表单练习：
先来看效果：
CSS层叠样式表
再来看代码
<html>
<head>
<title>马哈哈的个人主页</title>
</head>
<body background="HTML\主页背景.jpg" >
<h1><p align="center"><font color="black" face="楷体">自我介绍</font></p></h1>
<hr size="3px" color ="red">
<center>  <a href="马哈哈.html">首页</a>
            <a href="我的相册.html">我的相册</a>
            <a href="我的计划.html">我的计划</a>
            <a href="我的家乡.html">我的家乡</a>
            <a href="我的故事.html">我的故事</a></center>
<!--<embed height="50" width="300" src="HTML\初见.mp3" />-->
</br>
</br>
</br>
</br>
<form>
账号：</br>
<input type="text" name="zhanghao" value="" size=10px maxlength=15></br>
昵称：</br>
<input type="text" name="nicheng" value="" size=15px></br>
账号密码：</br>
<input type="password" name="zhanghaomima" value=""></br>
</br>
<!--单选按钮-->
<input type="radio" name="grade" value="本科">本科
<input type="radio" name="grade" value="硕士">硕士
<input type="radio" name="grade" value="博士">博士
</br>
</br>
<!--复选框-->
<input type="checkbox" name="habit" value="听歌">听歌
<input type="checkbox" name="habit" value="画画">画画
<input type="checkbox" name="habit" value="跑步">跑步
<input type="checkbox" name="habit" value="刷剧">刷剧
</br>
</br>
自我介绍</br>
<!--多行文本域-->
<textarea name="" rows="" cols="" value=""></textarea>
</br>
<!--提交按钮-->
<input type="submit">
<!--重置按钮-->
<input type="reset">
</br>
</br>
<!--普通按钮-->
<button οnclick="alert('Hello World!')">Click Me!</button>
</br>
</br>
<!--菜单下拉列表域-->
喜欢的明星:
<select name="赵丽颖" size="">
<option value="1" selected>林俊杰</option>
<<option value="1" selected>赵丽颖</option>
<option value="1" selected>关晓彤</option>
<option value="1" selected>薛之谦</option>
</select>
</br>
</br>
<!--date属性 可以指定输入的数值大小-->
birthday：
<input type="date" name="birthday">
</br>
</br>
<!--number属性 可以指定输入的数值大小-->
幸运数字：
<input type="number" name="day" min="1" max="7">
</br>
</form>
</body>
</html>
<html>
<head>
<title>我的计划</title>
<!--CSS层叠样式表-->
<style type="text/css">
body{
<!--背景-->
/*background-color:rgb(100,255,200);
<!--background-image:url("HTML\主页背景.jpg");
background-repeat:repeat;
background-position:right;-->*/
<!--简写-->
background:rgb(100,255,200) url("HTML\主页背景.jpg") repeat right;
}
<!--class-->
.p1{
<!--font-family:"楷书";-->
font-size:20px;
color:rgb(255,0,0);
}
.p2{
font-family:"宋体";
font-weight:bolder;
}
.p3{
font-family:"宋体";
font-size:10px;
color:rgba(255,50,100,1);
border-style:ridge;
border-color:red;
border-width:5px;
border-color:blue,yellow,black,green;
}
<!--id-->
#i1{
color:blue;
}
#i2{
color:green;
}
.p2,div,h2{
font-family:"楷书"
}
div{
<!--文本属性-->
width:400px;
height:100px;
text-align:left;
font-size:15px;
text-indent:30px;
line-height:200%;
}
.div1{
<!--边框属性-->
background-color:red;
margin-bottom:20px;
border-style:solid;
border-width:10px;
border-color:blue green yellow red;
}
</style>
</head>
<body>
<h2><p align="center"><font color="blue" face="黑体">我的计划</font></p></h2>
<hr size="1px" color="black" widt"500px">
<!--class定义 id定义-->
<p class="p1">大三计划</p>
<p class="p2" id="i1">1、拿到计算机二级证书</p>
<p class="p2" id="i1">2、准备2021年英语六级考试</p>
<p class="p3">(1)每天背30个单词</p>
<p class="p3">(2)一周至少听两次英语听力</p>
<p class="p3">(3)后期每天做一篇阅读理解</p>
<p class="p2" id="i1">3、坚持上和讯的课程</p>
<p class="p2" id="i1">4、坚持学习编程</p>
<p class="p2" id="i1">5、争取大三暑期能够去实习</p>
<div>一切都是最好的安排一切都是最好的安排一切都是最好的安排一切都是最好的安排一切都是最好的安排一切都是最好的安排一切都是最好的安排一切都是最好的安排</div>
<p class="p1">大四计划</p>
<p class="p2" id="i2">1、找到好工作</p>
<p class="p2" id="i2">2、顺利毕业</p>
<p class="p2" id="i2">3、来一场毕业旅行</p>
<div class="div1">第一</div>
<div class="div1">第二</div>
<div class="div1">第三</div>
<div class="div1">第四</div>
</body>
</html>
7097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
