作者归档:maomao2014

css 如何制作一个垂直的导航栏呢?


摘要:
下文讲述css 制作一个垂直导航栏的方法分享,如下所示:

导航栏被广泛应用于网站及各种系统中,下文讲述使用css 制作html导航的方法,如下:

实现思路:
1.使用ul li 生成列表
2.使用css 设置ul 列表样式
3.使用css 设置li 中链接样式
4.使用css 设置li 中链接样式hover信息

例:
设置一个下拉列表样式

   <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    background-color:blue;
}
 
li a {
    display: block;
    color: white;
    padding: 10px 18px;
    text-decoration:none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color:red;
    color: white;
}
</style>
</head>

<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">教程</a></li>
</ul>

<p></p>
<p>li全部都为点击区域</p>
</body>
</html>
 

css_菜单样式应用举例

css_菜单样式应用举例


相关阅读:
CSS 列表样式设置方法分享

CSS3 伪类:lang选择器简介说明


摘要:
下文讲述 css 伪类:lang的功能简介及举例,如下所示:


css 伪类:lang功能说明

:lang选择器,为设置了lang(**)属性的元素,设置其样式信息


css 伪类:lang举例应用

例:
lang(maomao)设置样式信息

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>  
div:lang(maomao)
{  
	background-color:black;
	color:white;
	font-weight:bold;
}
</style>
</head>
<body>
  
 
<div  lang ='maomao' >
   设置了lang =maomao 
</div>
   
<div lang ='maomao365' >
  未设置lang =maomao 属性
</div> 
 

 <div >
  未设置lang  属性
</div> 
 

</body>
</html>
css 伪类:lang应用举例

css 伪类:lang应用举例

CSS3 伪类:after选择器简介说明


摘要:
下文讲述 css 伪类:after的功能简介及举例,如下所示:


css 伪类:after功能说明

:after选择器,向当前匹配的元素中 后面插入相应的内容,并为其插入内容设置相应的样式信息

注意事项:
:after选择器 拥有特殊的属性content


css 伪类:after举例应用

例:
向所有的匹配对象div后面加入content中的内容,并将其背景设置为黑色,字体设置为白色

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>  
div:after
{ 
    content:"使用css伪类after插入的相应信息:";
	background-color:black;
	color:white;
	font-weight:bold;
}
</style>
</head>
<body>
  
 
<div >
  第一个 div元素
</div>
   
<div >
  第二个 div元素
</div> 
 
</body>
</html>
css 伪类:after应用举例

css 伪类:after应用举例