HTML5基础之代码入门--常用导航栏代码【工具代码】nav01
2023-09-14 09:13:44 时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body {
background-color: #212121;
}
.nav {
margin-top: 300px;
font-size: 20px;
text-align: center;
/* letter-spacing 属性增加或减少字符间的空白(字符间距) */
letter-spacing: 1px;
}
.nav * {
/* css3,box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。 */
box-sizing: border-box;
/* 所有属性都将获得过渡效果/持续时间/ ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 */
transition: all 0.35s ease;
}
.nav li {
/* 不独占一行的块级元素 */
display: inline-block;
/* list-style-position 属性设置在何处放置列表项标记。
外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。 */
list-style-position: outside;
/* margin:4个:上右下左;3个:上、右和左、下;2个:上和下、右和左;1个:4边距离全都一样 */
margin: 8px 16px;
}
.nav a {
padding: 8px 12px;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
position: relative;
}
/*
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。 */
.nav a::before,
.nav a::after {
width: 14px;
height: 14px;
content: "";
position: absolute;
transition: all 0.35s ease;
opacity: 0;
}
.nav a:hover {
color: #ffffff;
}
.nav a::after {
right: 0;
top: 0;
border-right: 3px solid #1e90ff;
border-top: 3px solid #1e90ff;
transform: translate(-100%, 50%);
}
.nav a::before {
left: 0;
bottom: 0;
border-left: 3px solid #1e90ff;
border-bottom: 3px solid #1e90ff;
transform: translate(100%, -50%);
}
.nav a:hover::before,
.nav a:hover::after {
transform: translate(0%, 0%);
opacity: 1;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">博客</a></li>
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">音乐</a></li>
<li><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</body>
</html>
效果:
来自:
相关文章
- HTML5_ScrollInToView方法「建议收藏」
- html5 canvas线条合成的爱心动画特效
- html5 最小化,当前界面最小化快捷键 窗口最小化和全屏化的快捷键是什么?
- 手机刮刮乐HTML5代码详解编程语言
- Html5响应式设计实现九宫格详解编程语言
- HTML5 表单元素详解编程语言
- html5 canvas抠图的方法详解编程语言
- HTML5微信长按图片不会弹出菜单的解决方法详解编程语言
- 利用HTML5和MySQL实现数据交换(html5连接mysql)
- HTML5 Input
- 如何使用HTML5连接MySQL数据库:同步数据更加高效和安全。(html5连接mysql数据库)
- HTML5 定位
- HTML5 <keygen> 标签
- Android的webview支持HTML5的离线应用功能详细配置