作业1：课堂笔记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style type="text/css">
#main{
width:780px ;
background-color: antiquewhite;
}
.m1 a{
text-decoration: none;
}
.m1 a:link{
color: black;
}
.m1 a:visited{
color: black;
}
.message{
background-color: green;
text-align: center;
}
#d1{
width:820px ;
background-color: antiquewhite;
}
#img{
position: fixed;
right: 300px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="" align="center" >
<div id="d1" >
<h2 align="center" id="top">课堂笔记</h2>
<div id="main" align="left">
<a href="#top" id="img"><img src="img/get.JPG"/></a>
<h3 >目录</h3>
<div id="" class="m1"><a href="#message1">1.表单</a></div>
<div id="" class="m1"><a href="#message2">2.下拉框和文本域</a></div>
<div id="" class="m1"><a href="#message3">3.空白标签</a></div>
<div id="" class="m1"><a href="#message4">4.认识CSS</a></div>
<div id="" class="m1"><a href="#message5">5.CSS选择器</a></div>
<div id="" class="m1"><a href="#message6">6.伪类选择器</a></div>
<div id="message1" class="message">1.表单</div>
<div id="">
<h4>表单标签---form</h4>
可以提交表单中收集的信息<br />
action属性：设置提交信息的位置<br />
method属性：提交方式-post/get
<h4>input标签 ---文本输入框</h4>
是表单标签<br />
type属性：text普通的文本输入框<br />
name属性：必须设置(提交信息)<br />
value属性：标签内容<br />
placeholder:提示语言，当用户输入值时，会自动消失
<h4>input-密码输入框</h4>
type属性：password---输入的值是密文显示<br />
name属性：必须设置(提交信息)<br />
placeholder:提示语言，当用户输入值时，会自动消失
<h4>input-单选按钮</h4>
type属性：radio<br />
name属性：同一类型对应的name值必须一样<br />
value：设置选中按钮提交的值<br />
checked:设置checked，让按钮默认处于选中状态
<h4>input---多选按钮</h4>
type属性：checkbox<br />
name:同一类型对应的name值必须一样<br />
value：设置选中按钮提交的值<br />
checked:设置checked，让按钮默认处于选中状态
<h4>input---普通按钮</h4>
type属性：button<br />
value属性：显示按钮名称
<h4>input---重置按钮</h4>
type:reset,让form中所有表单标签对应的值，回到最初状态<br />
value属性：显示按钮名称
<h4>input---文件选择器</h4>
type属性：file
<h4>maxlength标签:输入框最多能输入的字符个数</h4>
<h4>readonly标签：让输入框只读(不能往里面输入内容)值readonly</h4>
<h4>disabled标签：让按钮不能点击</h4>
<h4>input-提交</h4>
type属性：submit<br />
value属性：显示按钮名称<br />
</div>
<div id="message2" class="message">2.下拉框和文本域</div>
<div id="">
<h4>下拉菜单</h4>
select标签<br />
name属性：<br />
size属性：设置最多显示，其他滑动<br />
option标签<br />
sizevalue属性：
<h4>多行文本域(多行文本输入框)</h4>
textarea标签<br />
placeholder属性：默认提示<br />
maxlength属性：最多输入<br />
rows属性：行<br />
cols属性：列<br />
readonly属性：只读<br />
disabled属性:禁止点击
<h4>fieldset标签，对表单内容进行分组</h4>
logend标签：设置分组名
</div>
<div id="message3" class="message">3.空白标签</div>
<div id="">
<h4>HTML中的标签分为两大类</h4>
块级标签：一行只能有一个div(不管标签的宽度是多少)<br />
h1-h6,p,hr,列表标签，table，form <br />
行内标签：一行可以有多个span<br />
a,img，inp，select(下拉列表)，textarea(多文本域)
<h4>div标签</h4>
是空白标签，没有任何特殊的意义(无语义标签)<br />
块级标签：一个div独占一个整行，不管内容大小，一行只能有一个div
<h4>span标签</h4>
是空白标签，没有任何特殊的意义(无语义标签)<br />
行内标签：一行可以有多个span
</div>
<div id="message4" class="message">4.认识CSS</div>
<div id="">
<h4>CSS是什么</h4>
CSS是web标准中的表现标准，用来设置网页上标签的样式(长什么样，在哪儿)<br />
CSS代码或文件，也叫样式表<br />
使用版本：CSS3
<h4>写在哪儿</h4>
内联样式表：将CSS写在标签的style属性中<br />
内部样式表：写在head标签中的style标签的内容中<br />
外部样式表：写在一个css文件中，通过head中的link标签来关联<br />
三种样式表的优先级：内联样式最高，内部样式表与外部样式表没有绝对的优先，主要看同一个属性
谁在后面赋值，谁的优先级高(谁就有效)
<h4>格式：</h4>
选择器(属性：属性值；属性：属性值)--内部和外部样式<br />
选择器：用来选中需要设置样式的标签<br />
属性：css属性(css2中的属性有两百多个)位置随意<br />
属性值：如果属性值是数字，表示的是大小要在后面加px<br />
<h4>注意：</h4>每个属性之间要使用分号隔开，否则属性无效
<h4>补充属性：</h4>color-设置字体颜色 background-color：设置背景颜色 width：标签宽度
height：标签的高度
</div>
<div id="message5" class="message">5.CSS选择器</div>
<div id="">
<h4>元素选择器(标签选择器)：标签名</h4>
选中所有的标签名对应的标签
<h4>id选择器：#id属性值</h4>
每个标签都有一个id属性，整个HTML中，id的值必须是唯一的
<h4>class选中器：.class属性</h4>
每个标签都有一个class属性
<h4>通配符：*</h4>
选中所有的标签
<h4>层级选择器：选择器1 选择器2...</h4>
<h4>群组选择器：选择器1，选择器，...</h4>
<h4>css中的颜色值：</h4>
颜色英语单词<br />
16进制的颜色值 0-255--00-ff(#ff0000红色)<br />
rgb值：rgb(红，绿，蓝)，rgb(红，绿，蓝，透明度)-透明度0-1
</div>
<div id="message6" class="message">6.伪类选择器</div>
<div id="">
<h4>伪类选择器格式</h4>
伪类选择器---选择器：状态
<h4>link：初始状态---一次都没有访问成功时的状态</h4>
<h4>visited：超链接访问后的状态---已经访问成功后的状态</h4>
<h4>hover：鼠标悬停在标签上对应的状态</h4>
<h4>active：鼠标按住的状态</h4>
<h4>注意：</h4>
给同一个标签的不同状态用伪类选择器设置不同的样式时，要遵守爱恨原则(先爱才能恨)
LoVe HAte
</div>
</div>
</div>
</div>
</body>
</html>
结果：
作业.JPG
作业2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
#img1{
width: 1330px;
height: 650px;
}
#f{
position: absolute;
right: 78px;
bottom: 140px;
width: 390px;
height: 390px;
background-color: bisque;
}
#s{
width: 390px;
height: 390px;
}
#img2{
right: 0px;
top: 5px;
position: absolute;
}
#te{
text-align: center;
width: 120px;
height: 20px;
right: 50px;
top: 5px;
position: absolute;
}
#s1{
left: 25px;
top: 30px;
position: absolute;
}
#person{
height: 35px;
top: 80px;
left: 25px;
position: absolute;
}
#person img{
width: 41px;
height: 41px;
float: left;
}
#person input{
width: 295px;
height: 37px;
float: left;
border: 0px;
background-color: #F5DEB3;
}
#key{
top: 151px;
left: 25px;
position: absolute;
}
#key img{
width: 41px;
height: 41px;
float: left;
}
#key input{
width: 295px;
height: 37px;
float: left;
border: 0px;
background-color: #F5DEB3;
}
#b{
width: 340px;
height: 40px;
top: 221px;
left: 25px;
border: 0px;
position: absolute;
background-color: tomato;
}
#p{
width: 295px;
top: 291px;
left: 25px;
height: 20px;
position: absolute;
}
#p img{
width: 20px;
height: 20px;
}
#img3{
float: left;
}
#a4{
float: left;
text-decoration: none;
}
#img4{
left: 110px;
position: absolute;
}
#a5{
left: 132px;
position: absolute;
text-decoration: none;
}
#a{
width: 340px;
top: 341px;
left: 25px;
height: 20px;
position: absolute;
}
#a3{
float: right;
text-decoration: none;
}
#a2{
right: 80px;
position: absolute;
text-decoration: none;
}
#a1{
right: 160px;
position: absolute;
text-decoration: none;
}
</style>
</head>
<body>
<div id="">
<img id="img1" src="img/image.JPG"/>
<div id="f">
<form action="" method="post" id="s">
<input id="te" type="text" name="" value="" disabled="disabled" placeholder="扫码登录更安全"/>
<span id="s1">
<b>密码登录</b>
</span>
<img id="img2" src="img/jiao.JPG"/><br />
<br />
<br />
<div id="person">
<img src="img/person.JPG"/>
<input type="text" name="" value="" placeholder="请输入账号"/>
</div>
<div id="key">
<img src="img/key.JPG"/>
<input type="text" name="" value="" placeholder="请输入密码"/>
</div>
<input type="button" name="" id="b" value="登 录" />
<div id="p">
<img src="img/wei.JPG"/ id="img3"><a href="" id="a4">微博登录</a>
<img src="img/zhi.JPG"/ id="img4"><a href="" id="a5">支付宝登录</a>
</div>
<div id="a">
<a href="" id="a1">忘记密码</a>
<a href="" id="a2">忘记会员</a>
<a href="" id="a3">免费注册</a>
</div>
</form>
</div>
</div>
</body>
</html>
结果：
作业.JPG
网友评论