分类目录归档：CSS技巧

CSS技巧

html中如何使用css让div中超过宽度部分的字符(文字)采用点点显示呢？


摘要:
下文讲述使用css代码，设置div的样式，使其超出部分，使用点点显示，如下所示；

主要使用以下属性:
1.overflow设置隐藏部分的显示方式
2.text-overflow的显示样式

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
 
  div{
      width:60px; /*必须设置宽度*/
      overflow:hidden; /*溢出隐藏*/
      text-overflow:ellipsis; /*以省略号...显示*/
      white-space:nowrap; /*强制不换行*/
  }
 
</style>
</head>

<body>
<div>
   测试一个div,超出宽度部分，采用点点显示的方法
 </div>

</body>
</html>

css 如何制作一个水平的导航栏(导航菜单)呢？


摘要:
下文讲述css 制作一个水平导航栏的方法分享，如下所示:

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

实现思路:
1.使用ul li 生成列表
2.使用css 设置ul 列表样式
3.设置li子项向左漂浮
4.使用css 设置li 中链接样式
5.使用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{
   float:left;
}
 
li a {
    display: block;
    color: white;
    padding: 10px 18px;
    text-decoration:none;
}
 
li a:link{
     background-color:black;
     color:white;
 }

 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color:red;
    color: white;
}

li a:visited{
     background-color:black;
    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 列表样式设置方法分享

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 列表样式设置方法分享