代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}#m{background-color: antiquewhite;width: 100%;height: 50px;}#i{float: left;width: 100px;height: 50px;line-height: 50px;text-align: center;color: black;position: relative;}#i:hover{background-color: aqua;}#c{width: 720px;margin: auto;}#d{background-color: aqua;display: none;position: absolute;}#i:hover>#d{display: block;width: 100px;} </style></head><body><div id='m'><div id="c"><div id="i">原神<div id="d"><div>下载</div><div>运行</div></div> </div><div id="i">崩坏3<div id="d"><div>下载</div><div>运行</div></div></div><div id="i">星铁<div id="d"><div>下载</div><div>运行</div></div></div><div id="i">第五人格<div id="d"><div>下载</div><div>运行</div></div></div><div id="i">千恋万花<div id="d"><div>下载</div><div>运行</div></div></div><div id="i">魔女的夜宴<div id="d"><div>下载</div><div>运行</div></div></div></div></div></body>
</html>
效果
相关参数介绍
文本相关属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 150px;height: 150px;border: 5px solid red;/* 字体大小 */font-size: 20px;/* 字体粗细 */font-weight: 100;/* 字体类型 */font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;/* 字体风格 */font-style: italic;/* 文字布局 */text-align: left;/* 字体颜色 */color: green;/* 设置文字划线 *//* text-decoration: underline; *//* 隐藏超出部分 */overflow: hidden;/* 不能完整显示的部分用省略号代替 */text-overflow: ellipsis;/* 第一个参数控制 阴影在 x轴上的偏移量 *//* 第一个参数控制 阴影在 y轴上的偏移量 */ /* 第三个参数用来控制 阴影的模糊度 *//* 第四个参数控制阴影的颜色 *//* text-shadow: 2px 2px 2px purple,-2px -2px 2px red,-2px 2px 2px green,2px -2px 2px blue; *//* 标签的阴影 *//* box-shadow: 5px 5px 2px purple,-5px -5px 2px green; *//* 设置段落的缩进 */text-indent: 100px;}</style></head><body><div>鲲>鲲>鲲>鲲>鲲>鲲>鲲</div></body>
</html>
定位参数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}.parent {width: 100px;height: 100px;border: 5px solid blue;text-align: center;/* line-height: 100px; *//* position: fixed; *//* 当页面是固定定位 绝对定位的时候 可以使用 left right top bottom 属性 表示标签距离页面的长度*//* top: 100px;left: 100px; */}/* 当使用绝对定位的时候，此时标签不在受dom的拘束，它可以漂浮在整个页面布局之上 *//* 当使用绝对定位时要：子绝父相 */#child {width: 100px;height: 100px;border: 1px solid red;position: absolute;display: none;/* top: 200px;left: 200px; */}#second_div:hover>div {display: block;top: 0px;left: 105px;position: relative;}</style></head><body><div class="parent"> 上边的div</div><div id="second_div" class="parent"><div id="child">12312321</div></div><div class="parent"> 下边的div</div></body>
</html>
