css案例学习之div ul li a 实现导航效果
2023-09-27 14:24:31 时间
效果
代码
<html> <head> <title>无需表格的菜单</title> <style> body{ background-color:#dee0ff; } #navigation { width:150px; font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #9F9FED; /* 添加下划线 */ } #navigation li a{ display:block; height:1em; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #151571; /* 左边的粗边 */ border-right:1px solid #151571; /* 右侧阴影 */ } #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:12px solid yellow; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </div> </body> </html>
改造一下
li加一个float属性
<html> <head> <title>无需表格的菜单</title> <style> body{ background-color:#dee0ff; } #navigation { /*width:150px;*/ font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #9F9FED; /* 添加下划线 */ float:left; } #navigation li a{ width: 120px; display:block; height:1em; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #151571; /* 左边的粗边 */ border-right:1px solid #151571; /* 右侧阴影 */ } #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:12px solid yellow; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </div> </body> </html>
效果
相关文章
- Google Earth Engine APPS(GEE)—乌干达地区土地分类案例分析!
- 【MATLAB教程案例66】基于Q-learning强化学习的智能体栅格地图路线规划matlab仿真
- 【MATLAB教程案例53】CNN卷积神经网络的MATLAB编程学习和实现,以手势识别为例进行仿真分析
- 【MATLAB教程案例52】SVM支持向量机学习——使用matlab实现基于SVM的数据二分类
- 【MATLAB教程案例51】传统神经网络学习——使用matlab神经网络工具箱实现BP、PNN、GRNN神经网络等
- 【MATLAB教程案例39】语音信号的PCM编解码matlab仿真学习
- 【MATLAB教程案例38】语音信号的去噪方法matlab仿真学习——LMS自适应滤波,谱减法去噪滤波及维纳滤波等
- 【FPGA教程案例100】深度学习1——基于CNN卷积神经网络的手写数字识别纯Verilog实现,使用mnist手写数字数据库
- 【FPGA教程案例78】通信案例4——基于FPGA的RLS自适应滤波算法实现
- 【FPGA教程案例55】深度学习案例2——基于FPGA的CNN卷积神经网络之ReLu激活层verilog实现
- 淘东电商项目(31) -SSO单点登录(XXL-SSO案例)
- 《深度学习导论及案例分析》一1.2深层网络的特点和优势
- 《深度学习导论及案例分析》一2.11概率图模型的推理
- 《深度学习导论及案例分析》一2.13玻耳兹曼机的学习
- 《例说8051:单片机程序设计案例教程》——第 1 章 轻松看8051 1-1 微型计算机与单片机
- 《R语言初学指南》一2.5 实际案例
- 大数据与机器学习:实践方法与行业案例.2.3 ETL
- 细致入微:Oracle RAC DRM引起性能问题案例一则
- Unity Shader 学习案例二:描边效果
- 【快应用】折叠屏展开与折叠判断案例
- Python 基础 之 多任务 gevent 协程应用的简单案例,简单实现下载网上文件的功能(urllib,gevent 等)
- 用户角色权限-数据库设计案例(转载)
- 《慕客网:IOS动画案例之会跳动的登入界面(下)》学习笔记 -Sketch的使用
- spring 手动写事物,案例