1.三角形
用html css展现三角形
三角形利用的是边框:把盒子宽高设置为零,留下边框,这时候边框有四个三角形形成,利用transparent(透明色)隐藏掉整个边框,利用border给一边(top,bottom ,left right)上色。
<style>
div {
width: 0;
height: 0;
/* transparent 透明色 */
border: 10px solid transparent;
border-top-color: red;
}
</style>
<body>
<div>
</div>
</body>
2.鼠标样式
鼠标停留文本,鼠标样式
<style>
li{
/*取消无序列表样式*/
list-style: none;
}
</style>
<body>
<ul>
<li style = "cursor: default">鼠标默认样式</li>
<li style = "cursor: pointer">鼠标小手样式</li>
<li style = "cursor: mobe">鼠标移动样式</li>
<li style = "cursor: text">鼠标文本样式</li>
<li style = "cursor: no-allowed">鼠标禁止样式</li>
</ul>
</body>
3.图片,表单,文本对齐
1.顶线对齐
2.中间对齐
3.底线对齐
<style>
tp1{
/*顶线对齐*/
vertical-align: top;
}
tp2{
/*中间对齐*/
vertical-align: middle;
}
tp3{
/*底线对齐*/
vertical-align: bottom;
}
</style>
<body>
<div>
<img class = "tp1"src ="图片"alt = "">
<span>文本</span>
</div>
<div>
<img class = "tp2"src ="图片"alt = "">
<span>文本</span>
</div>
<div>
<img class = "tp3"src ="图片"alt = "">
<span>文本</span>
</div>
</body>
4.z-index属性
z-inder 属性:指定一个元素的堆叠顺序。
拥有最高堆叠顺序的元素总是出于堆叠顺序较低的元素的前面,元素可以拥有负的z-indx属性值。
z-index仅能在定位元素上奏效。
<style>
img {
width: 200px;
height: 150px;
position: absolute;
z-index: 49;
}
h1 {
position: absolute;
z-index: 50;
}
</style>
<body>
<h1>This is a heading</h1>
<img src="图片"
alt="">
<p>该吃饭了</p>
</body>