15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > web开发源代码案例8

web开发源代码案例8

时间:2023-07-22 02:06:01 | 来源:网站运营

时间:2023-07-22 02:06:01 来源:网站运营

web开发源代码案例8:




一个网站最基本的就是导览航,现在就开始教大家做上图这个效果的

看着舒服,鼠标移动过去还是可以有其他效果的

1、先把页面内容做出来就是<div>里面的内容

2、先把整体的框架做出来,比如说.nav 里面的内容,这个就是做框架的,这个就是管理整个框架样式

3、再根据a的需求来设置 .nav a 这个大家可以看到主要是导航链接的样式

4、鼠标移动到该导航链接的样式

我们就可以从大到小,从默认到触碰的到的思路一步步做下去

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>web开发源代码案例8</title> <style> .nav { height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; line-height: 41px; background-color: #fcfcfc; } .nav a { display: inline-block; color: #4c4c4c; font-size: 12px; text-decoration: none; padding: 0 20px; } .nav a:hover { background-color: #eee; color: #ff8500; } </style></head><body> <div class="nav"> <a href="#">首页</a> <a href="#">导航栏</a> <a href="#">关于我们</a> <a href="#">你是最帅的</a> </div></body></html>

关键词:发源

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭