html不同样式的徽章_使用HTML5数据属性的菜单通知徽章

最新推荐文章于 2024-07-18 17:34:14 发布

daique1908

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量925

点赞数

文章标签：列表定位 css html html5

html不同样式的徽章

今天，我们将采用Orman Clark的菜单通知徽章设计，并使用HTML和CSS进行构建。我们将介绍几种实现效果的方法，包括使用您可能不熟悉HTML5数据属性。让我们潜入吧！

步骤1：HTML5基本标记

让我们从添加一些基本标记开始。在整个教程中，我们将使用HTML5文档类型。我们将通过首先添加一个主要的div以及随后将创建每个菜单链接的列表项来创建菜单本身。我们还在文档的头部包含了HTML5 shiv（或shim）脚本。这与旧版本的Internet Explorer一起使用，使他们能够识别和设置HTML5元素的样式。

<!DOCTYPE html>
<html>
	<head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title>Menu Notification Badges</title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="styles.css">

		<!--HTML5 Shiv-->
		<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

</head>
<body>







</body>
</html>

步骤2：选单标记

为了创建菜单的结构，我们将使用一个无序列表，其中包含4个列表项和一个锚定标记。您可能还希望将列表嵌套在<nav>标记中以进行部署。

为了进行演示，我们将在菜单周围创建一个带有包装类的div。这将仅用于将菜单移至页面中间。

您的标记应如下所示；

<!DOCTYPE html>
<html>
	<head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title>Menu Notification Badges</title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="styles.css">

		<!--HTML5 Shiv-->
		<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

</head>
<body>



<div class="wrapper">
	<ul class="menu">
		<li><a href="#">Profile</a></li>
		<li><a href="#">Setting</a></li>
		<li><a href="#">Notifications</a></li>
		<li><a href="#">Logout</a></li>
	</ul>	
</div>



</body>
</html>

步骤3：一些基本CSS

在开始设置菜单样式之前，我们将添加一些重置和页面样式。我们将首先进行一次重置，以从浏览器默认样式表中删除所有边距，填充等。接下来，我们将背景颜色应用于正文，并将字体大小设置为16px。固定的字体大小可确保演示的基本大小，但您可能更喜欢将其设置为100％，从而允许用户定义其浏览器字体大小。我们将70％的宽度应用于包装器，并以200px的边距顶部居中。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; backound: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; }

body { background:#ededed; font-size:16px; }



.wrapper {
	width: 70%;
	margin: 200px auto;
}

步骤4：菜单基本样式

要开始设置菜单样式，我们首先要关注菜单的基础。首先定位无序列表，该列表具有“菜单”类别。我们将向其显示内联块，使我们能够根据其内容（如块元素）确定其宽度/高度。

接下来，我们将应用带有所有浏览器前缀的渐变背景。然后添加一些边界半径，但是这些em是什么？我们使用ems（而不是像素）来调整边框半径相对于字体大小的大小。

最低0.47元/天解锁文章

daique1908

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html不同样式的徽章_使用HTML5数据属性的菜单通知徽章

今天，我们将采用Orman Clark的菜单通知徽章设计，并使用HTML和CSS进行构建。我们将介绍几种实现效果的方法，包括使用您可能不熟悉HTML5数据属性。让我们潜入吧！步骤1：HTML5基本标记让我们从添加一些基本标记开始。在整个教程中，我们将使用HTML5文档类型。我们将首先添加主div，然后添加将创建每个菜单链接的列表项，以创建菜单本身。我们还在文档的开头包含了...
复制链接

扫一扫