CSS 和HTML注意事项
2020-02-22 本文已影响0人
Mr_Editor
目录
- HTML常用标签
- CSS使用规范
HTML常用标签
<div></div>
<button></button>
<a></a>
<ul></ul>
<ol></ol>
<li></li> /可以单独或者配合ul ol标签使用/
<form></form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style text="text/css">
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="TB.webp"></li>
<li><img src="TB.webp"></li>
<li><img src="TB.webp"></li>
<li><img src="TB.webp"></li>
</ul>
<button class="left-button">left</button>
<button class="right-button">right</button>
<ol>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>
CSS使用规范
css样式可以单独文件（使用<link>标签连接到html文件里），也可以和标签写在一起
css规则 子绝父相 即子标签position属性为absolute 父标签position的属性为relative
<style type="text/css">
<!-- 子绝父相-->
* {/*去除默认边框*/
margin: 0px;
padding: 0px;
}
.box {
/*相对定位 相对自己的起始位置*//*相对自己的起始位置进行偏移，起始位置依然占用，别人不能用*/
position: relative;
width: 100%;
height: 50px;
background-color: #01204f;
}
ul {
position: absolute; /*absoulute：相对于父对象进行位置设置*//*绝对定位，按照已经定位父亲元素进行偏移*/
left: 20%;
width: 80%;
height: 50px;
list-style: none;/*取消默认列表样式*/
}
li {
float: left;/*和 position 属性有冲突*/
color: white;
width: 60px;
height: 50px;
line-height: 50px; /*行高 设置为与ul hieght同高 则文本上下居中*/
cursor: pointer;/*鼠标变小手*/
text-align: center;
}
li:hover {/*鼠标悬停动作*/
background-color: aqua;
}
</style>
盒子模型
margini->border->padding->content
