css 链接导航样式

最新推荐文章于 2020-05-20 16:38:31 发布
最新推荐文章于 2020-05-20 16:38:31 发布
阅读量235 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fonyer/article/details/83119248
版权

css 链接导航样式 - 截拳道 - The future is in my

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
 a{
  font-family:Arial, Helvetica, sans-serif;
  font-size:.8em;
  text-align:center;
  margin:3px;
 }
 a:link,a:visited{
  color:#A62020;
  padding:4px 10px 4px 10px;
  background-color:#ecd8db;
  text-decoration:none;/*去掉下划线*/
  border-top:1px solid #EEEEEE;
  border-left:1px solid #EEEEEE;
  border-bottom:1px solid #717171;
  border-right:1px solid #717171;
 }
 a:hover{
     color:#821818;
  padding:5px 8px 3px 12px;
  background-color:#e2c4c9;
  border-bottom:1px solid #EEEEEE;
  border-right:1px solid #EEEEEE;
  border-top:1px solid #717171;
  border-left:1px solid #717171;
 }
</style>
<body>
 <a href="">首页</a>
 <a href="">日志</a>
 <a href="">相册</a>
 <a href="">音乐</a>
</body>
</html>

css 链接导航样式 - 截拳道 - The future is in my

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
   background-color:#dee0ff;
  
}
#nav{
    /*width:150px;   */
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   text-align:right;     
}
#nav ul{
    list-style-type:none;/*不显示项目符号*/
 margin:0px;
 padding:0px;
 }
#nav li{   
     border-bottom:1px solid #999999;/*添加下划线*/  
   float:left;
    }
#nav 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;/*右边阴影*/
} 
#nav li a:link,#nav li a:visited{
 background-color:#1136c1;
 color:#FFFFFF;
}
#nav li a:hover{
    background-color:#002099;
 color:#ffff00;
 border-left:12px solid yellow;
}
</style>
<body>
<div id="nav">
  <ul>
  <li><a href="">首页首页</a></li>
  <li><a href="">日志日志</a></li>
  <li><a href="">相册相册</a></li>
  <li><a href="">音乐音乐</a></li>
 </ul>
</div>
</body>
</html>

fonyer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式
weixin_29405191的博客
08-03 1364
1、案例css代码.divcss5a:link{color:#F00}/*链接默认为红色*/.divcss5a:hover{color:#000}/*鼠标悬停黑色*/.divcss5a:active{color:#03F}/*鼠标点击与释放时蓝色*/.divcss5a:visited{color:#F0F}/*访问过为粉红*//*divcss5对象内a超链接设置...
外联式css样式
JQG的博客
09-17 1万+
外联式css样式03              引入css样式表有两种方式:(面试)         1.link标签引入  推荐使用         2.@import引入     -->              link标签引入,该标签写在head标签里(与文档配置有关,不需显示)     -->                    @import引入,需要写在st
css设置超链接样式和css设置列表样式
热门推荐
qq_40135955的博客
04-09 2万+
<style type="text/css"> a:LINK { color: red; text-decoration: none; } a:VISITED { color: green; text-decoration: none; } a:HOVE...
CSS导航设计
zld19840110的专栏
11-21 293
 好困，趁着天还没黑先总结了。用CSS设计导航首先要对一些html结构了解一下。至于以前的table布局导航的方法大可抛弃不用了。在强调一点选择CSS布局是因为CSS能够帮助我们把表现与内容分离。首先内容部分的代码如下：HomeWorksMusicPhotoaBBS这段代码里的“ul”元素描述表型结构。而“li”则是“ul”中的每一个列表数据。好了，再来就是编写css文件，
外联css及js的使用
weixin_34191845的博客
03-13 298
结构图如下： html如下： <!DOCTYPE html> <html> <head> <title>button test</title> <link rel="stylesheet" type="text/css" href="css/1.css"> </head> &lt...
CSS3 3D样式导航菜单代码
06-05
【CSS3 3D样式导航菜单代码】是一种利用现代浏览器对CSS3的支持，构建出具有三维立体视觉效果的网页导航菜单的技术。这种技术为网页设计带来了丰富的动态效果和交互体验，使得用户在浏览网站时能感受到更为生动和引...
纯css3淘宝右侧固定导航样式代码
11-21
在本案例中，我们关注的是"纯css3淘宝右侧固定导航样式代码"，这是一种实现类似淘宝网站右侧导航栏的视觉效果的技术。 首先，让我们来解析这个标题和描述。"纯css3"强调了完全依赖CSS3技术，不使用JavaScript或者...
div css个人博客网站导航样式表
11-21
总的来说，`div css个人博客网站导航样式表`涉及的核心知识点包括：`<div>`元素的使用，CSS基础样式设置（如颜色、字体、布局），交互效果的实现（如`:hover`伪类），以及响应式设计和CSS3新特性。熟练掌握这些技巧...
360官网CSS导航样式
09-06
本项目名为“360官网CSS导航样式”，旨在模仿360官方网站的导航栏样式，提供了一套简单且实用的解决方案。下面将详细介绍这个项目中的相关知识点。 首先，导航样式是网页设计中必不可少的部分，它帮助用户在网站的...
33种CSS经典导航样式下载
02-25
"33种CSS经典导航样式下载"是一个集合，包含了多种经过精心设计的CSS导航栏样式，适用于各种类型的网站，以提升用户体验和界面美观度。这些导航样式不仅体现了设计师的创新思维，也展现了CSS的强大功能。 首先，...
HTML和CSS实现内部导航（锚链接）
weixin_44011306的博客
05-20 1434
HTML和CSS实现内部导航代码HTMLcss 代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书签链接</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="m
在CSS中定义【导航栏】超链接样式
weixin_30446613的博客
04-26 682
1、案例css代码 <style> .divcss5a:link{color:#F00}/*链接默认为红色*/ .divcss5a:hover{color:#000}/*鼠标悬停黑色*/ .divcss5a:active{color:#03F}/*鼠标点击与释放时蓝色*/ .divcss5a:visited{color:#F0...
前端页面所需要的css样式-导航条
小武的博客
08-01 1001
1. 导航条左边文字和图片布局     display:inline-block跟float的效果一样，不独占一行的块状元素，     float:left center right 是不独占一行，在一行中的左 中 右，但是不是块状元素     vertical-align:center是垂直居中，     text-align:center是水平居中， &lt;a class="na...
内联外联CSS和JS
Bab的博客
03-13 1万+
内联CSS 代码示例： &lt;p style="color:red;font-size:18px"&gt;这里文字是红色。&lt;/p&gt; 内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。 外联CSS 外部式...
精通 CSS+DIV 网页样式与布局 83
相濡以沫si
12-08 174
</div> </body> </html> <html> <head> <title> 菜单的横竖转换 </title> <style> <!– body{ background-color:#ffdee0; }navigation {font-family:Arial; }navigation ul {list-style-type:none; /* 不显示项目符号 */
CSS超链接美化
天明的博客
09-09 9065
在之前的HTML学习中我们知道超链接标签&lt;a&gt;，对于超链接反映给客户端的肯定不只是单一的一行字的链接，小编这篇文章就来先说一下CSS对超链接的美化功能。 1.伪类 在介绍操作前先说一个概念，伪类：根据用户不同状态会有不同的样式，&lt;a&gt;标签就是一个很好的伪类例子，客户端在触碰超链接时当然有交互才会更加美观，这里CSS对超链接的美化实现了相应功能。超链接有自己的伪类表述不具...
CSS——超级链接 伪类
sleepwalker_1992的专栏
05-12 2291
超级链接就是a标签。2.1 伪类也就是说，同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。类就是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。伪类用冒号来表示。a标签有4种伪类，要求背诵：1  a:link{2  color:red;3  }4  a:visited{5...
CSS设置导航栏跳转链接
最新发布
08-10
要在 CSS 中设置导航栏跳转链接，你可以使用 `a:link` 选择器来指定未访问链接的样式，使用 `a:visited` 选择器来指定已访问链接的样式，使用 `a:hover` 选择器来指定鼠标悬停在链接上时的样式，以及使用 `a:active`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值