CSS3打造Win8风格方格导航菜单实例

68 浏览量更新于2024-08-28 收藏 48KB PDF 举报

本文将详细介绍如何使用CSS3技术来实现Windows 8风格的方格导航菜单效果。首先，我们通过HTML结构设置页面的基本框架，定义一个`<html>`元素，并在头部添加`<head>`标签，其中包含`<meta>`标签来指定字符集和`<title>`标签来命名页面。CSS部分则主要集中在`.menu`类的选择器上，它定义了菜单的样式，包括宽度、居中、字体、边框、阴影和圆角等。 `.menu`类设置了菜单的整体样式，如宽度为620px，有15像素的内边距，背景色为浅灰色，以及使用CSS3的盒模型阴影和圆角来增强视觉效果。通过`counter-reset:li`属性，为列表项设置计数器，以便实现自定义的数字标识。接着是`.menuli`类，这是菜单中的单个方块导航项。它定义了每个导航项的样式，如`position: relative`使其定位为相对定位，`float: left`使其水平排列，高度为120px，宽度为200px。鼠标悬停或聚焦时，`.menuli:hover`和`.menuli:focus`选择器会应用背景图像变化，这可能是为了模仿Win8风格的切换效果。文章还可能涉及`nth-child`伪类，用于根据导航项在列表中的位置应用不同的样式，比如更改数字标识的颜色。`transition`属性则可以用来平滑地过渡背景颜色或其他CSS属性的变化，提升用户体验。在CSS代码中，还有一些注释区域（`/*——————————–*/`），这部分可能是对代码逻辑的分隔或者后续可能添加的其他样式规则的占位。总结来说，这篇文章将指导读者利用CSS3的`position`, `float`, `background`, `transition`, `nth-child`, 和`box-shadow`等功能，结合HTML结构，创建出具有Windows 8风格的方格导航菜单，提升网站设计的现代感和交互性。通过学习这些内容，开发人员可以更好地控制网页布局和视觉呈现，以适应当前流行的设计趋势。

用用CSS3实现实现Win8风格的方格导航菜单效果风格的方格导航菜单效果

代码如下所示：代码如下所示：

复制代码代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

<head>

<title>用CSS3实现Win8风格的方格导航菜单效果</title>

<style>

#about {

color: #999;

text-align: center;

font: 0.9em Arial, Helvetica;

}

#about a {

color: #777;

}

.menu {

width: 620px;

margin: 100px auto;

padding: 15px;

list-style: none;

counter-reset: li;

background: #eee;

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;

box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

.menu:before, .menu:after {

content: “”;

display: table;

}

.menu:after {

clear: both;

}

.menu {

zoom:1;

}

/* ——————————– */ </p>

<p>.menu li {

position: relative;

float: left;

cursor: pointer;

height: 120px;

width: 200px;

margin: 10px 0 0 10px;

color: #fff;

}

.menu li:hover, .menu li:focus {

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, 0)));

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));

background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));

background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));

background-image: linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));

}

.menu .cover {

z-index: 2;

}

.menu .cover:focus {

outline: 0;

下载后可阅读完整内容，剩余9页未读，立即下载

weixin_38507208

粉丝: 5
资源: 893

CSS3打造Win8风格方格导航菜单实例

html5 WebOS仿Win8桌面管理界面模板源码.zip

仿win8界面的导航网站（html+js+css）

超美的html模板--win8风格

CSS3与jQuery实现Windows 8方格导航菜单效果

div+css实现蓝色vista风格css导航菜单效果

纯CSS3实现带动画效果导航菜单无需js

CSS实现带阴影效果的黑色导航菜单效果

纯CSS3实现的迷你图标导航菜单效果(无js).zip

CSS3实现的蓝色淡雅风格立体3D菜单效果源码.zip

jQuery实现Win8风格垂直四级导航菜单特效源码.zip

最新资源