HTML5基础之代码入门--常用导航栏代码【工具代码】nav01
2023-09-14 09:04:07 时间
<!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 canvas基础10点
- 基于 HTML5 结合互联网+ 的 3D 隧道
- 制作html5微信页面的经验总结。
- HTML语义化:HTML5新标签——template
- 第八十九节,html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区
- html5.js
- 2015.9-17js(让所有的浏览器支持html5视频video)
- html5学习(三)
- html5学习(一) video字段
- html5--移动端视频video的android兼容,去除播放控件、全屏等
- [HTML5] Correctly Define Heading Levels of a Web Page
- HTML5 地理位置定位API(3)
- DHTMLX Diagram JavaScript/HTML5 Pro Library:5.0
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
- HTML5基础之代码入门--常用导航栏代码【工具代码】nav01