1、相对地址与绝对地址
相对地址:相对于引用文件本身去定位被引用的文件地址
绝对地址:相对于磁盘的位置去定位文件的地址 ps:当整体文件迁移,顶层目录和盘符改变而找不到文件
2、列表标签
(1)有序列表
<ol>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ol>
(2)无序列表
<ul>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
(3)自定义列表
<dl>
<dt>列表标题</dt>
<li>子标题一</li>
<li>子标题二</li>
</dl>
3、列表技巧
1、列表的内容是可以链接的,点击链接到新闻或者文章的具体内容
<li><a href="#">列表标题一</a></li>
2、去掉样式(对i定义列表无效) list-style 去掉列表项的小圆点,比如:list-style:none
4、html表单
如果想要把页面的很多信息传递到后台去,那么需要使用表单标签form
1>action属性 定义表单数据提交的地址
2>method属性 定义表单提交的方式,一般有GET和POST方法
<form action="地址。。。" method="GET"></form>
input标签
(1)input标签(输入框标签)
type属性功能是: 决定input输入框是什么类型的。 text: 输入普通文本 password: 输入密码,会隐藏信息
value属性: 定义表单元素的值,
name属性: 定义表单元素的名称,此名称是提交数据时的键名
<input>
<input type="text">
<input type="password">
补充:空格
&emsp; -> 全角
&ensp; -> 半角
(2)
<label for="inp1">用户名:</label><input type="text" id="inp1"><br><br>
(3)radio 单选按钮 -> input的的type属性的值
单选按钮:(radio)如果两个或者多个只能选一个,name值必须相同
设置默认值:checked (H5新规定 当属性和值相同时,可以只写属性不写值)
<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女<br><br>
(4)checkbox 多选按钮 -> input的type属性的值
设置默认值 :checked
爱好:<input type="checkbox" checked>足球<input type="checkbox">篮球<input type="checkbox">乒乓球<br><br>
(5)file 上传文件 -> input的type属性的值
<input type="file">
(6)submit 上传文件 -> input的type属性的值
<input type="submit">
(7)reset 重置按钮 -> input的type属性的值
<input type="reset"> <!--reset需要写在form标签内-->
(8)button 普通按钮 -> input的type属性的值
<input type="button" value="按钮1">
非input标签
(1)textarea 文本框
禁止拖拽:resize: none;
去掉蓝色外边线 :outline-style: none;
(2)select标签
selected:可以设置默认选项
size: 可以显示多个选项
mutiple: 可以选择多个选项
(3)button普通按钮
<button disabled>普通按钮2</button> <!-- disabled: 禁用标签,标签变灰色,也可以禁用文本框-->
5、css选择器二
(4)id选择器
通过id名来选择元素,元素的id名称不能重复,id名一般给程序使用,所以不推荐使用id作为选择器。
#box{color:red}
-------------------------------
<p id="box">这是一个段落标签</p>
(5)组选择器
如果有同样的样式使用设置多个选择器
box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
---------------------------------------------
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
(6)伪类选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态。
.box1:hover{width:300px;}
6、CSS盒子模型
模型分为内外四层(内—>外):
(1)content
(2)padding
内边距:查看元素的时候,默认是绿色
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
四个方向:
padding: 10px; 四个方向
padding: 10px 100px; 上下 左右
padding: 10px 100px 200px; 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左
(3)border
边线:border:粗细 类型 颜色
border-top: 10px solid yellowgreen;
border-bottom: 10px solid yellowgreen;
border-left: 10px solid yellowgreen;
border-right: 10px solid yellowgreen;
ps:solid:直线 dashed:虚线 dotted:点线
(4)margin
外边距:查看元素的时候,默认时土黄色
块级元素:右侧或者空白的部分,都用margin补齐
7、其他
(1)body
body 默认有8px的margin,(很多标签在去除样式之后在使用)
box-sizing: border-box 盒子的宽高是在加上padding和border之后的值
(2)颜色
1>单词: red;
2>#ffffff; 0-9abcdef------如果两位两位i一样可简写如: aabbdd -> abd
3>单词;rgb(255,255,255); -> (0,0,0) 是黑色。
(3)盒子居中:
1>margin: auto;
2>margin:0 auto;
3>margin-left: auto;
4>margin-right: auto;
(4)文字居中
左右居中:text-align:center;
上下居中:line-height: 200px;
(5)css初始化
* {
padding: 0;
margin: 0;
list-style: none;
}
8、显示和隐藏盒子
(1)隐藏盒
display: none; -> 不占位
visibility: hidden; -> 占位
(2)显示盒子
display: block -> 占位
display: inline -> 一行显示,不能设置宽高
(3)css元素溢出
overflow属性:当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式
overflow的设置项:
1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 当超出时滚动条显示,没有超出不显示
(4)浮动
想让两个块级独占一行的元素在一行显示,可以使用浮动(float)或者定位
1、float: none 默认值。代表盒子本身没有浮动。
2、float: left 让填写代码的盒子以左侧为基准,对齐了浮动。
3、float: right 让填写代码的盒子以右侧为基准,对齐了浮动。
解决办法: 把浮动的盒子单独用包起来,父盒子设置高度或者设置overflow: hidden;
总结:
1、浮动的盒子不占位置,所以下面的盒子会顶上来,被浮动的盒子盖住。
2、一个盒子里的子盒子要么都浮动,要么都不浮动