这两天重新把前端的只是梳理了下，按照简约的设计理念做了几套样例，记录下，方便自己方便他人。先上结果图，一个很简单的网站导航，没有图片，没有JS
为了方便查看，css样式没有分开，下面是代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOME</title>
<style type="text/css">
* { margin: 0; padding: 0 }
a:link, a:visited { text-decoration: none; }
ul, li { list-style-type: none }
img { border: 0; }
body { font-size: 12px; }
.nav_ul{
float:left;
border:0
color:#fff;
}
.nav_ul h4{
display: inline;text-align: center;
background:#ff4040;
}
.nav_ul>h4>a{
display:inline-block;
line-height:60px;
width:120px;
}
.nav_ul a{color:#FFF ;
font-family:\5FAE\8F6F\96C5\9ED1;
text-align:center;
font-size:16px;
}
.nav_ul a:hover{
background-color:#ee4040;
cursor:pointer;
}
.nav_li{
list-style-type:none;
visibility:hidden;
background:#ff4040;
height:50px;
width:120px;
margin-top:-2px;
}
.nav_li a{
line-height:50px;
display:block;
}
.nav_ul:hover li{
visibility:visible;
}
footer{ background:#ff4040; height:40px; line-height:40px;margin-bottom:0}
footer p{ width:1200px; margin:auto; text-align:right;color:#FFF }
footer p a{color:#FFF}
footer p a:hover{ text-decoration:underline}
.content{
width:100%;
height:380px;
color:transparent;
font-weight:bold;
font-size:14px;
font-family:\5FAE\8F6F\96C5\9ED1;
text-shadow:0px 0px 1px #333, 0 0 1px #fff;
text-align:center
}
</style>
</head>
<body style=" text-align:center">
<div style="width:100%; height:60px;line-height:60px; background:#ff4040;text-align:center;">
<div style="width:840px;height:auto; margin:0 auto ">
<ul class="nav_ul">
<h4><a href="#">首页</a></h4>
</ul>
<ul class="nav_ul">
<h4><a href="#">前端</a></h4>
<li class="nav_li"><a>Html</a></li>
<li class="nav_li"><a>CSS</a></li>
<li class="nav_li"><a>CSS3</a></li>
<li class="nav_li"><a>JavaScript</a></li>
</ul>
<ul class="nav_ul">
<h4><a href="#">Java</a></h4>
<li class="nav_li"><a>Core_Java</a></li>
</ul>
<ul class="nav_ul">
<h4 ><a href="#">Java Web</a></h4>
<li class="nav_li"><a>Spring</a></li>
<li class="nav_li"><a>Hibernate</a></li>
</ul>
<ul class="nav_ul">
<h4><a href="#">Android</a></h4>
</ul>
<ul class="nav_ul">
<h4><a href="#">相册</a></h4>
</ul>
<ul class="nav_ul">
<h4><a href="#">联系</a></h4>
</ul>
</div>
</div>
<div class="content">
<div style="width:500px;height:100px;margin:200px auto;">
<p style=" margin-left:0px;line-height:30px">技术也可以很浪漫</p>
<p style=" margin-left:100px;line-height:30px">给生活增添不一样的色彩</p>
</div>
</div>
<footer>
<p>Design by <a href="http://user.qzone.qq.com/790321193/" target="_blank">Albert Zhang</a></p>
</footer>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
相关推荐
经典css网站导航代码： 代码： ('curTab',this)">首页</span></a> <div></div> ('curTab',this)">网站建设</span></a> <div></div> ('curTab',this)">软件开发</span></a> <div></div>...
UL、LI 无序列表实现纯CSS网站导航菜单! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
高亮红色的纯CSS网站导航菜单代码，默认状态下菜单是深灰色的，当鼠标放在任意一个菜单文字上时，该菜单背景变红色，高亮显示，变得光彩夺目，色彩对比强烈起来，高亮显示的菜单项也可很好的向用户指引当前的位置，...
纯CSS下拉导航菜单是一种基于CSS（层叠样式表）技术实现的网页导航栏，它无需依赖JavaScript或者其他脚本语言，就能实现动态效果，如下拉菜单的展开和收起。这种技术对于优化网页性能、提高网站加载速度以及增强移动...
一个用纯css做的无限极导航，只有一个页面，简单，简洁，演示里面已经添加到9级菜单导航，还可增加更多，但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度，而当浏览器...
在“导航菜单纯CSS”项目中，我们将完全依赖CSS来定义导航菜单的布局、颜色、字体等视觉效果，而无需JavaScript或图片来实现动态效果。 在`demo.html`文件中，你会看到HTML代码用于构建导航菜单的结构。常见的HTML...
纯CSS二级导航菜单是一种常见的网页设计技术，它利用CSS（层叠样式表）来实现页面上的多级导航结构，而不依赖JavaScript或者其他脚本语言。这种技术对于提高网站的加载速度和可访问性非常有利，因为它减少了对服务器...
在本主题中，我们将深入探讨“纯CSS的垂直导航菜单”这一技术，它旨在实现无需JavaScript或者其他编程语言，仅使用CSS（层叠样式表）来创建功能完善的垂直导航菜单。 首先，纯CSS垂直导航菜单的优势在于其简洁性...
本文将深入探讨如何使用纯CSS3技术来创建一个带有动画效果的质感二级导航菜单，无需JavaScript或图像辅助。 首先，CSS3引入了许多新的选择器、属性和功能，使得创建动态效果变得可能。在我们的例子中，“纯CSS3带...
【标题】中的“纯实现CSS3创意导航菜单特效”指的是使用CSS3的特性和功能来设计和构建一种创新且引人注目的网站导航菜单。这种菜单不仅提供了基本的导航功能，还利用CSS3的新特性增加了视觉吸引力和用户体验。 在...
【纯CSS垂直三级网站导航菜单】是一个用于网页设计的组件，它主要关注的是用户体验和页面的可导航性。这个菜单完全基于CSS3技术构建，不依赖JavaScript或其他编程语言，因此加载速度快，对浏览器的兼容性良好。以下...
至此，我们已经创建了一个基本的纯CSS导航菜单。然而，实际项目中可能还需要考虑其他因素，如下拉子菜单、汉堡菜单图标等。这需要更复杂的CSS选择器和布局技术，如伪类、相对定位和绝对定位等。 在"css"目录下，你...
而`色站导航.reg`文件可能是一个注册表文件，用于导入一些颜色相关的网站或资源，方便用户查找和参考颜色搭配。 总的来说，这款CSS网页导航栏样式制作软件对于初学者或者不熟悉CSS的人来说，是一个非常实用的工具，...
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
今天我们要讨论的是29款基于纯`DIV`和`CSS`的网站导航菜单源码，这些源码可以帮助开发者快速创建出美观且功能齐全的导航栏。 1. **响应式设计**：在现代网页设计中，响应式设计是必不可少的，这些源码通常会包含对...
本文将深入探讨如何使用纯CSS创建一个具有动感背景滑动变换的导航菜单特效。这个特效利用了CSS的背景定位和过渡属性，使得在HTML5兼容浏览器下的表现极具动态感。 首先，我们从HTML结构开始。在`index.html`文件中...
不用js就可以通过简单修改实现自己好看的导航滑出效果，不占资源，效率高
至此，一个基本的纯CSS二级导航下拉列表就完成了。你可以根据自己的需求调整颜色、大小、过渡效果等样式。这个方法的好处是代码简洁，易于理解和维护，同时也兼容各种现代浏览器。 需要注意的是，虽然这种方法在...
利用纯css制作的导航栏，随着鼠标的移动，每个栏目会变色，图标运用css sprite技术制作，减少了图片加载过多的烦恼，您指的拥有。利用纯css制作的导航栏，随着鼠标的移动，每个栏目会变色，图标运用css sprite技术...
### 纯CSS导航下拉菜单知识点解析 在现代网页设计中，导航栏是非常重要的组成部分之一，它不仅能够提升用户体验，还能帮助用户快速找到所需的信息。本次分享的是一个完全使用CSS实现的导航下拉菜单，这不仅可以减少...