sNav.js鼠标悬停背景滑动切换导航条

来源：互联网 2023-03-16 23:57:34 416

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

sNav.js鼠标悬停背景滑动切换导航条

1相关内容未经许可获取自百度经验

书写hmtl代码。div id="header"> img src="images/sNav.png" id="headImg"> h1>sNav/h1>/div>ul class="sNav"> a href="#">li>sNav/li>/a> a href="#">li>导入sNav.js/li>/a> a href="#">li>搭建结构/li>/a> a href="#">li>执行语句/li>/a> a href="#">li>简单使用/li>/a> a href="#">li>sNav.js/li>/a> a href="#">li>sNav.min.js/li>/a>/ul>

sNav.js鼠标悬停背景滑动切换导航条

书写css代码。.row { overflow: hidden; width: 80%; margin: 10px auto; }.row .left { float: left; width: 50%; text-align: center; }.row .left p { padding-right: 20px; }.row .left h4 { font-size: 18px; color: #FF7676; }.row .right { float: left; width: 50%; }.example2wrap { width: 420px; margin: -10px auto; }.example2 { margin-left: 20px; float: left; }.example2 .intro2 { background: #F08787; }.example2prev { margin-left: 0; float: left; width: 200px; height: 100px; background: #CCC; }.intro2prev { background: #F08787; }.footer { min-height: 300px; margin-top: 50px; background: #FFFDE2; padding-bottom: 50px; text-align: center; }.footer h1 { font-size: 60px; color: white; margin: 0; padding-top: 50px; text-align: center; text-shadow: 0 3px 5px #888; }.footer h2 { text-align: center; padding: 10px 0 0; color: #2D8AB1; }.footer h3 { text-align: center; padding: 0px; color: #555; font-weight: normal; }#gitHubIcon { width: 90px; height: 90px; }.downloadBtn button { padding: 8px; font-size: 18px; color: #26677B; font-weight: bold; font-family: "Arial"; background: powderblue; border: none; border-radius: 10px; border-bottom: 4px solid #62CBD8 }.downloadBtn button:hover { background: #99E1FF; }.downloadBtn a { font-weight: bold; font-family: "Arial"; font-size: 18px; text-decoration: none; color: #26677B; }

sNav.js鼠标悬停背景滑动切换导航条