下拉菜单
- 下拉菜单的制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> </head> <body> <div class="dropdown"> <button>下拉菜单</button> <div class="content"> <a herf="">首页</a> <a herf="">学习中心</a> <a herf="">考试中心</a> <a herf="">考试动态</a> </div> </div> </body> </html>
.dropdown{ display:inline-block; position:relative; } button{ background-color:pink; color:white; border:none; margin:6px; padding:5px; font-size:16px; } /*下拉内容，绝对定位，初始不显示，背景颜色为pink*/ .content{ display:none; position:absolute; background-color:pink; min-width:160px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; } /*下拉内容a链接样式*/ .content a{ display:block; color:white; padding:12px 16px; text-align:center; } /*鼠标移到下拉菜单a链接时背景变为灰色*/ .content a:hover{ background-color:gray; } button:hover{ background-color:gray; } /*鼠标点击盒子区域，显示下拉菜单！*/ .dropdown:hover .content{ display:block; }
字体图标
- 字体图标的复习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器使用场景-字体图标</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?6m2w13'); src: url('fonts/icomoon.eot?6m2w13#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?6m2w13') format('truetype'), url('fonts/icomoon.woff?6m2w13') format('woff'), url('fonts/icomoon.svg?6m2w13#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } div { position: relative; width: 200px; height: 35px; border:1px solid red; } div::after { position: absolute; top: 10px; right: 10px; content: ""; font-family: 'icomoon'; color: red; font-size: 18px; } </style> </head> <body> <div> </div> </body> </html>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)