css
.title {
height: 50px;
background-color: green;
}
div h2 {
padding-top: 10px;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
font-size: 25px;
}
a:active {
color: blue;
}
#tip{
width: 50px;
height: 50px;
background-color: gray;
position: fixed;
right: 10%;
bottom: 10%;
padding-top: 25px;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web day_2</title>
<link rel="stylesheet" type="text/css" href="css/homework2.css" />
</head>
<body>
<h1>index</h1>
<div id="index">
<ul>
<li>
<a href="#title_input">input标签</a>
</li>
<li>
<a href="#title_form">表单标签</a>
</li>
<li>
<a href="#title_div">空白标签</a>
</li>
<li>
<a href="#title_css1">认识css</a>
</li>
<li>
<a href="#title_css2">css标签</a>
</li>
<li>
<a href="#title_noun">伪类选择器</a>
</li>
</ul>
</div>
<div id="title_input" class="title" align="center">
<h2>input标签</h2>
</div>
<div>
<ul>
<p>input标签(单标签) --- text (文本输入框)</p>
<ol>
<li>表单标签</li>
<li>type属性:text - 普通文本输入框</li>
<li>type属性：password --- 密文显示</li>
<li>name属性：必须设置</li>
<li>value属性：标签内容</li>
<li>placeholder属性：占位(提示信息)</li>
<li>maxlength:输入框最多输入的字符个数</li>
<li>readonly:不能输入内容</li>
</ol>
<p>input标签 --- 单选框</p>
<ol>
<li>type属性：radio</li>
<li>name属性：同一类型对应的多个选项的name相同</li>
<li>value属性：设置提交的值</li>
<li>checked属性：设置为checked，让按钮默认处于选中状态</li>
</ol>
<p>input标签 --- 多选按钮</p>
<ol>
<li>type：checkbox</li>
<li>name:同一类型对应的name也必须一样</li>
</ol>
<p>input标签 --- 普通按键</p>
<ol>
<li>disabled:让按钮处于失效状态</li>
<li>reset:让当前所在的form表单中所有的表单相关标签对应的值，回到最初的状态</li>
</ol>
<p>input标签 --- file文件选择器</p>
<ul>
<li>选择文件</li>
</ul>
</ul>
</div>
<div id="title_form" class="title" align="center">
<h2>表单标签</h2>
</div>
<div>
<ul>
<p>fieldset</p>
<ol>
<li>一个fieldset标签对应一个表单分组</li>
<li>legend标签：分组名</li>
</ol>
<p>select - 下拉菜单</p>
<ol>
<li>option:选项</li>
<li>selected:默认选中</li>
</ol>
</ul>
</div>
<div id="title_div" class="title" align="center">
<h2>空白标签</h2>
</div>
<div>
<ul>
<p>html中标签分为两大类:块级标签和行内标签</p>
<p>块级标签：一行只能有一个(不管标签的宽度是多少)</p>
<ol>
<li>h1-h6</li>
<li>p</li>
<li>hr</li>
<li>div</li>
<li>ul</li>
<li>ol</li>
<li>dl</li>
<li>li</li>
<li>table</li>
<li>form</li>
</ol>
<p>行内标签：一行可以多个</p>
<ol>
<li>a</li>
<li>img</li>
<li>input</li>
<li>select</li>
<li>textarea</li>
</ol>
<p>div标签 --空白标签</p>
<ul>
<li>没有任何特殊的意义(无语意标签)</li>
</ul>
</ul>
</div>
<div id="title_css1" class="title" align="center">
<h2>认识css</h2>
</div>
<div>
<ul>
<p>什么是css</p>
<ol>
<li>css是web标准中的表现</li>
</ol>
<p>写在哪儿</p>
<ol>
<li>内联样式表：将css代码写在标签的style属性中</li>
<li>内部样式表：写在head标签中的style标签的内容中</li>
<li>外部样式表：写在一个css文件中，通过head中的link标签进行关联</li>
</ol>
<li>怎么写</li>
<ol>
<li>选择器(属性：属性值；属性：属性值)</li>
<li>选择器：用来选中需要设置样式的标签</li>
<li>属性：css属性(css中的属性有两百多个)</li>
<li>属性值：如果属性值是数字、表示的是大小要在后面加px</li>
<li>注意：每个属性之间要用分号隔开，否则属性无效</li>
</ol>
</ul>
</div>
<div id="title_css2" class="title" align="center">
<h2>css标签</h2>
</div>
<div>
<ol>
<li>元素选择器(标签选择器)：标签名</li>
<ul>
<li>选中所有的标签名对应的标签</li>
</ul>
<li>id选择器：#id值</li>
<ul>
<li>每个标签都有一个id属性，整个html中，id的值必须唯一</li>
</ul>
<li>class选择器：.class属性值</li>
<ul>
<li>每个标签都有一个class属性</li>
</ul>
<li>通配符：*</li>
<ul>
<li>选中所有的标签</li>
</ul>
<li>层级选择器:选择器1 选择器2……</li>
<li>群组选择器：选择器1，选择器2，……</li>
</ol>
<ul>
<li>css中的颜色值：</li>
<ol>
<li>颜色名(英文)</li>
<li>16进制的颜色值</li>
<li>RGB值：rgb(红，绿，蓝)</li>
<li>rgba:rgba(红，绿，蓝，透明度) 透明度的值0-1</li>
</ol>
</ul>
</div>
<div id="title_noun" class="title" align="center">
<h2>伪类选择器</h2>
</div>
<div>
<ul>
<p>伪类选择器：选择器：状态</p>
<ol>
<li>link：初始状态(一次都没有访问成功的状态)</li>
<li>visited：超链接访问后的状态</li>
<li>hover：鼠标悬停在标签上的状态</li>
<li>active：鼠标按下的状态</li>
</ol>
<p>给同一个标签通过伪类选择器给不同状态设置不同的样式的时候要遵守爱恨原则(先要爱才有恨)
LoVe HAte</p>
</ul>
</div>
<div id="tip" align="center">
<a href="#">TOP</a>
</div>
</body>
</html>
网友评论