作业1：用网页来写笔记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>笔记整理</title>
<style type="text/css">
a{
text-decoration: none;
font-size: 18px;
color: black;
}
a:link{
color: black;
}
a:visited{
color: black;
}
a:hover{
color: red;
}
a:active{
color: red;
}
.t1{
background-color: greenyellow;
border-radius: 7px;
text-align: left;
font-size: 20px;
color: black;
height: 35px;
}
#a_1{
position: fixed;
left:90%;
top:85%;
}
</style>
</head>
<body>
<div>
<div id="top1" align="center" style="color: black; font-size: 20px;">day02_html和css总结</div>
<a href="#top1" id="a_1"><img src="img/top_1.png"/></a>
<div>
<ol>
<li><a href="#form1">表单标签</a></li>
<li><a href="#input1">input标签</a></li>
<li><a href="#select1">下拉列表标签</a></li>
<li><a href="#fieldset1">表单分组</a></li>
<li><a href="#none1">空白标签</a></li>
<li><a href="#css1">认识css</a></li>
<li><a href="#css2">css选择器</a></li>
<li><a href="#css3">伪类选择器</a></li>
</ol>
</div>
<div>
<div class="t1" id="form1">
一.表单标签:form
</div>
<div>
<p>
1.可以提交表单中收集的信息<br />
action属性：设置提交信息的位置<br />
method属性：提交方式 -- post/get <br />
</p>
</div>
<div class="t1" id="input1">
二.input标签
</div>
<div>
<p>
<strong>input标签（单标签） -- text（文本输入框）</strong><br />
1.是表单标签<br />
2.type属性<br />
text -- 普通的文本输入框<br />
3.name属性必须设置（a.用于提交信息）<br />
4.value属性：标签内容<br />
5.placeholder属性：输入框提示信息<br />
6.maxlength:输入框最多能输入的字符个数<br />
7.readnoly:readonly -- 输入框只读（不能往里面输入内容）
</p>
<p>
<strong>input标签 -- password(密文输入)</strong><br />
1.type属性：password --- 输入的值是密文显示
</p>
<p>
<strong>input标签：单选按钮</strong><br />
1.type属性：radio ---单选<br />
2.name属性：同一类型对应的name值必须一样<br />
3.value属性：设置选中按钮提交的值<br />
4.checked:设置为checked，让按钮默认处于选中状态
</p>
<p>
<strong>input标签：多选按钮</strong><br />
1.type属性：checkbox
2.name属性：同一类型对应的name值必须一样
</p>
<p>
<strong>input标签：普通按钮</strong><br />
1.type属性：button
2.disabled:disabled -- 按钮不能点击
</p>
<p>
<strong>input标签：重置按钮</strong><br />
1.type:reset -- 将当前所在form中的所有表单相关标签对应的值，回到最初的状态
</p>
<p>
<strong>input标签：文件域</strong>
1.type:file
</p>
</div>
<div class="t1" id="select1">
三.下拉列表标签:select-option
</div>
<div>
<p>
select:select -- 默认选中<br />
</p>
</div>
<div class="t1" id="fieldset1">
四.表单分组:fieldset
</div>
<div>
<p>
一个fieldset标签对应一个表单分组<br />
legend标签：设置分组名<br />
</p>
</div>
<div class="t1" id="none1">
五.空白标签:div和span
</div>
<div>
<p>
div标签：是空白标签，没有任何特殊的意义(无语义标签) <br />
span标签：是空白标签<br />
</p>
</div>
<div class="t1" id="css1">
六.认识css
</div>
<div>
<p>
<strong>1.什么是CSS</strong><br />
css是web标准中的表现标准，用来设置网页上标签的样式（什么样，在哪）<br />
css代码/css文件，我们叫样式表<br />
目前我们使用的是css3。还是标记语言
</p>
<p>
<strong>2.写在那</strong><br />
内联样式表：将css代码写在标签的style属性中<br />
内部样式表：写在head标签中的style标签的内容中<br />
外部样式表：写在一个css文件中，通过head中 的link标签来关联<br />
优先级：内联的优先级最高，内部和外部没有绝对的优先，主要看同一属性那个最后赋值，那个就优先级高
</p>
<p>
<strong>3.怎么写</strong><br />
选择器{属性：属性值；属性：属性值；} <br />
选择器：用来选中需要设置样式的标签<br />
属性：css属性<br />
属性值：如果属性值是数字，表示的是大小要在后面加px <br />
注意：每个属性之间用分号隔开，否则属性无效<br />
补充属性：color：设置字体颜色 background-color:设置背景颜色 width：标签宽度 height：标签的高度
</p>
</div>
<div class="t1" id="css2">
七.css选择器
</div>
<div>
<p>
1.元素选择器（标签选择器）：标签名{} <br />
选中所有的标签名对应的标签<br />
2.id选择器：#id{} <br />
每个标签都有一个id属性，整个html中id的值必须唯一<br />
3.class选择器：.class属性值<br />
每个标签都有一个class属性，<br />
4.通配符：*{} <br />
选中所有的标签<br />
5.层级选择器：选择器1 选择器2,...{} <br />
6.群组选择器：选择器1，选择器2,...{} <br />
</p>
</div>
<div class="t1" id="css3">
八.伪类选择器
</div>
<div>
<p>
伪类选择器：选择器：状态<br />
link：超链接的初始状态； -- 一次都没有访问成功的时候的状态<br />
visited：超链接的访问后的状态； -- 已经访问成功后的状态<br />
hover：鼠标悬停在标签上的时候对应的状态<br />
active：鼠标按住时的状态<br />
给同一个标签通过伪类选择器给不同状态设置不同样式的时候，要遵守爱恨原则<br />
LoVe HAte <br />
</p>
</div>
</div>
</div>
</body>
</html>
作业2：登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
.d1{
width: 100%;
height: 500px;
background-image: url(img/bg.jpg);
background-size: 100% 100%;
z-index: -10;
}
.d1 .d1_1{
width: 20%;
height: 270px;
z-index: 10;
background-color: #eeeeee;
position: relative;
left: 70%;
top: 20%;
font-size: 20px;
}
</style>
</head>
<body>
<div style="height: 100px;">
</div>
<div class="d1">
<div class="d1_1">
<span style="position: relative; top: 20px; left: 30px;">密码登录</span><br />
<span style="position: relative; top: 50px; left: 30px; height: 40px;">用户名：<input type="text" width="100px" height="40px"/></span><br />
<span style="position: relative; top: 80px; left: 27px; height: 40px;">密 码：<input type="password" width="100px" height="40px"/></span><br />
<div style="position: relative; top: 110px; left: 30px;background-color: red;width: 250px;height: 40px;text-align: center;">
<button style="width: 250px; height: 40px; background-color: red;"><font size="4">登录</font></button>
</div>
</div>
</div>
</body>
</html>
登录.png
网友评论