作业
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
#目录{
background-color: white;
font-size: 70px;
}
.内容{
font-size: 60px;
color: fuchsia;
}
.具体{
font-size: 50px;
color: #000000;
}
.小标{
font-size: 40px;
color: #008000;
}
p{
font-size: 30px;
color: maroon;
}
</style>
</head>
<body>
<h1 style="font-size: 80px;">目录</h1>
<div id="目录">
<div id="">
<span>1.</span><a href="#1">表单标签</a>
</div>
<div id="">
<span>2.</span><a href="#2">表单标签(下拉菜单和多行文本域)</a>
</div>
<div id="">
<span>3.</span><a href="#3">空白标签</a>
</div>
<div id="">
<span>4.</span><a href="#4">认识CSS</a>
</div>
<div id="">
<span>5.</span><a href="#5">CSS选择器</a>
</div>
<div id="">
<span>6.</span><a href="#6">伪类选择器</a>
</div>
</div>
<div id="1" class="内容">
<fieldset id="">
<legend>表单标签</legend>
<ol class="具体">
<li class="小标">text(文本输入框)
<div id="">
<p>(1).是表单标签</p>
<p>(2).type属性：text--普通的文本输入框</p>
<p>(3).name属性：必须设置（a.用于提交信息）</p>
<p>(4).value属性：标签内容</p>
<p>(5).placeholder属性：占位符</p>
<p>(6).maxlength:输入框最多能输入的字符个数</p>
<p>(7).readonly:readonly--输入框只读（不能往里面输入内容）</p>
</div>
</li>
<li class="小标">密码输入框
<p>(1).type属性：password-----输入的值是密文显示的</p>
</li>
<li class="小标">单选按钮
<div id="">
<p>(1).type属性：radio</p>
<p>(2).name属性：同一类型对应的name值必须一样</p>
<p>(3).value：设置选中按钮提交的值）</p>
<p>(4).checked:设置为checked，让按钮默认处于选中状态</p>
</div>
</li>
<li class="小标">多选按钮
<div id="">
<p>(1).type：checkbox</p>
<p>(2).name：同一类型对应的name值必须一样</p>
<p>(3).value：设置选中按钮提交的值</p>
<p>(4).checked:设置为checked，让按钮默认处于选中状态</p>
</div>
</li>
<li class="小标">普通按钮
<p>(1)disabled:disabled--让按钮不能点击</p>
</li>
<li class="小标">重置按钮
<p>(1)让当前所在的form中的所有表单相关的标签的值回到最初的状态</p>
</li>
<li class="小标">文件选择器</li>
</ol>
</fieldset>
</div>
<div id="2" class="内容">
<fieldset id="">
<legend>表单标签(下拉菜单和多行文本域)</legend>
<ol class="具体">
<li class="小标">下拉菜单
<p>(1).select:创建一个下拉菜单</p>
</li>
<li class="小标">多行文本域（多行文本输入框）
<p>(1).textarea:创建一个多行文本输入框</p>
</li>
</ol>
</fieldset>
</div>
<div id="3" class="内容">
<fieldset id="">
<legend>空白标签</legend>
<ol class="具体">
<li class="小标">块级标签：一行只能有一个（不管标签的宽度是多少）
<p>h1-h6,p,hr,列表标签，table,form</p>
</li>
<li class="小标">行内标签：一行可以有多个
<p>a,img,input,下拉列表（select）,textarea</p>
</li>
<li class="小标">div标签：空白标签，没有任何特殊的意义（无语义标签）</li>
<li class="小标">span标签：空白标签，占据的大小根据内容的大小而定</li>
</ol>
</fieldset>
</div>
<div id="4" class="内容">
<fieldset id="">
<legend>认识CSS</legend>
<ol class="具体">
<li class="小标">什么是CSS：专门负责处理标签的布局和样式
<p>(1).CSS是web标准中的表现标准，用来设置网页上的标签的样式（长什么样，在哪儿）</p>
<p>(2).CSS代码/CSS文件，我们叫样式表</p>
</li>
<li class="小标">写在哪儿
<p>(1).内联样式表：将CSS代码写在标签的style属性中，每个标签都有，都是有效的</p>
<p>(2).内部样式表：写在head标签中的style标签的内容中</p>
<p>(3).外部样式表：写在一个css文件中，通过head中的link标签来关联</p>
<p>(4).优先级：（在多个地方对同一个属性进行设置）内联的优先级最高，内部和外部没有绝对的优先，主要看同一个属性谁最后赋值，谁就有效</p>
</li>
<li class="小标">怎么写（css语法）
<p>(1).选择器{属性：属性值;属性：属性值;}</p>
<p>(2).选择器：用来选中需要设置样式的标签</p>
<p>(3).属性：css属性（css2中的属性有两百多个）</p>
<p>(4).属性值：如果属性值是数字，如果表示的是大小要在后面加px</p>
<p>(5).注意：每个属性之间要用分号隔开（;），否则属性无效</p>
</li>
<li class="小标">补充属性
<p>(1).color--设置字体颜色 background-color：设置背景颜色 width：标签的宽度 height：标签的高度 </p>
</li>
</ol class="具体">
</fieldset>
</div>
<div id="5" class="内容">
<fieldset id="">
<legend>CSS选择器</legend>
<ol class="具体">
<li class="小标">(1).元素选择器（标签选择器）：标签名
<p>选中所有的标签名对应的标签</p>
</li>
<li class="小标">(2).id选择器：#id属性值
<p>每个标签都有一个id属性，整个html中，id的值必须唯一</p>
</li>
<li class="小标">(3).class选择器：.class属性值
<p>每个标签都有一个class属性</p>
</li>
<li class="小标">(4).通配符：*
<p>选中所有的标签</p>
</li>
<li class="小标">(5).层级选择器：选择器1 选择器2....</li>
<li class="小标">(6).群主选择器：选择器1,选择器2,.....</li>
</ol>
</fieldset>
</div>
<div id="6" class="内容">
<fieldset id="">
<legend>伪类选择器</legend>
<ol class="具体">
<li class="小标">伪类选择器 选择器：状态
<p>(1).link：超链接的初始状态------一次都没有访问成功的时候的状态</p>
<p>(2).visited:超链接访问后的状态----已经访问成功后的状态</p>
<p>(3).hover:鼠标悬停在标签上的时候对应的状态</p>
<p>(4).active：鼠标按住的状态</p>
</li>
<li class="小标">爱恨原则
<p>(1).同一个标签通过伪类选择器给不同的状态设置不同样式的时候，要遵守爱恨原则（先要爱才能恨）</p>
<p>(2).LoVe HAte（如果要同时写多个，一定要遵守先写LV，再写HA---LoVe HAte</p>
</li>
</ol>
</fieldset>
</div>
<h1 align="center"><a href="#" style="font-size: 100px;">返回顶部</a></h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
body{
background-size: 2000px 980px;
background-image: url(img/登录图片.jpg);
}
</style>
</head>
<body>
<div id="1">
<form action="" method="post">
<table align="right" cellspacing="30" style="background-color: #FFC0CB;">
<tr height="50">
<td colspan="3" width="400" style="border-color: #FFC0CB;"><span style="font-size: 30px;">
密码登录
</span></td>
</tr>
<tr height="50" bgcolor="#FFFF00" style="border-color: #FFC0CB;">
<td colspan="3" width="400">
<input type="text" name="账户名" id="" value="" style="width: 500px; height: 50px; background-color: #FFFF00; font-size: 30px;"/>
</td>
</tr>
<tr height="50" bgcolor="#FFFF00" style="border-color: #FFC0CB;">
<td colspan="3" width="400">
<input type="password" name="密码" id="" value="" style="width: 500px; height: 50px; background-color: #FFFF00; font-size: 30px;"/>
</td>
</tr>
<tr height="50" bgcolor="red" style="border-color: #FFC0CB;">
<td colspan="3" width="400">
<input type="submit" name="" id="" value="登录" style="width: 500px; height: 50px; background-color: red; font-size: 30px;"/>
</td>
</tr>
<tr height="50" style="border-color: #FFC0CB;">
<td width="150">
<input type="submit" name="" id="" value="微信登录" style="width: 180px; height: 50px; background-color: #FFC0CB; font-size: 30px;"/>
</td>
<td width="150">
<input type="submit" name="" id="" value="支付宝登录" style="width: 180px; height: 50px; background-color: #FFC0CB; font-size: 30px;"/>
</td>
</tr>
<tr height="50" style="border-color: #FFC0CB;">
<td width="70">忘记密码</td>
<td width="70">忘记会员名</td>
<td width="70">免费注册</td>
</tr>
</table>
</form>
</div>
</body>
</html>
运行效果.png
网友评论