CSS3-04样式3_html/css_WEB-ITnose

HTML 文档

                
        世俗孤岛    

CSS 文件

div{    margin: 100px 100px;    width: 120px;    height: 26px;    text-align: center;    font-size: 24px;    background-color:lightpink;}a:link {text-decoration: none;}a:hover {text-decoration: underline;}a:active {text-decoration: overline;}

效果图

、
）的 type 属性来设置列表的标记类型。在 CSS 中我们可以更加灵活的控制列表的标记。

• 可控制的列表项标记样式

  |属性|含义|
  |list-style-type|列表项标记的类型|
  |list-style-image|设置列表项的标记为图片|
  |list-style-position|列表项标记的位置|

• 示例
• 代码

• HTML 文档

                  
          
  First item
          
  Second item
          
  Third item
      
      
          
  First item
          
  Second item
          
  Third item
      

• CSS 文档

  #normal{    list-style-type: square;}#image{    list-style-image: url("item_tag.png");}

• 效果图

表格
• 概述
• CSS 赋予了表格更加多样的格式，使我们可以创造多种多样的表格。
• 可控制的表格样式
• “包装样式”
• 边框（Border）
• 语法：border: 1px solid blue;
• 注意：表格默认情况下，单元格之间会有一个间距。所以，若你只设置了 border 属性，那么你看到的将是一个双边框的表格。需要使用 border-collapse 来控制是否取消单元格之间的边距，即显示单边框。
• 填充（Padding）
• 语法：padding: 5px;
• 尺寸（width/height）
• 语法: width: 5px; height: 5px;
• 文本样式
• 文本颜色（color）
• 语法: color: orange;
• 文本对齐（text-align）
• 水平（text-align）
• 语法：text-align: center;
• 垂直（vertical-align）
• 语法：vertical-align: bottom;
• 标题
• 语法：caption-side: bottom;
• 示例
• 代码

• HTML 文档

                  
          
  Tabel 1-1
          
              
  属性
              
  含义
              
  备注
          
          
              
  border
              
  边框
              
  注意 border-collapse 属性
          
          
              
  padding
              
  填充
              
  随便玩
          
      

• CSS 文件

  table{    width: 450px;    height: 200px;}table,th,td{    border: 2px solid pink;    border-collapse: collapse;}th{    background-color: lightgray;}td{    padding-left: 30px;}.red {    color: red;    text-align: left;    vertical-align: top;}caption{    margin-top: 10px;    caption-side: bottom;}

• 效果图

导航栏
• 概述
• 说到导航栏，大家可能比较陌生；但是到目前为止，说到列表，大家应该很熟悉了。导航栏并不是 HTML 中的元素，它是设置了样式的 HTML 列表，其列表元素的内容为一个链接。
• 导航栏的种类
• 垂直导航栏
• 垂直导航栏就是具备指定样式的 HTML 列表
• 水平导航栏
• 使用 内联 实现
• 如：display:inline;
• 使用 浮动 实现
• 如：float:left;
• 示例
• 代码

• HTML 文档

                  
          
  客服管理
          
  财务管理
          
  产品管理
          
  预约管理
      

• CSS 文件

  ul    {        /*取消 HTML 列表的样式*/        list-style-type: none;        margin: 0;        padding: 0;        /*设置 导航栏 的样式*/        background-color: rgba(0,0,255,0.5);    }    li    {        /*使用 浮动 实现横向导航栏*/        float: left;    }    a:link,a:visited    {        /*增加可点击区域*/        display: block;        width: 150;        /*设置文本样式*/        font-size: 20px;        font-weight: bold;        text-align: center;        text-decoration: none;        color: orange;        /*设置 填充宽度*/        padding: 7px;    }    a:hover,a:active    {        background-color: blue;    }

• 效果图

下拉菜单
• 概述
• 不知大家看到 “下拉菜单” 这四个字时，想到的是不是表单中的下拉菜单，是不是还苦思冥想了一小会儿：“这下拉菜单还能有什么样式？”。不满告诉你，我的第一反应就是这样。那么我现在告诉你，这里的下拉菜单就是一个包含多个条目的块级元素（
  ），紧跟在要展示下拉菜单的元素后边，需要注意的是 展示下拉菜单的元素 和 下拉惨淡的内容需要位域一个

  。下拉菜单默认情况下是隐藏，当鼠标移动到展示下拉菜单的元素上时，使下拉菜单显示出来即可。
• 创建下拉菜单的方法
• 创建元素
• 创建最外侧
  ，包含 展示下拉菜单的元素，和下拉菜单的内容
• 创建展示下拉菜单的元素
• 创建下拉菜单的内容
• 设置元素属性
• 隐藏下拉菜单内容
• 设置在 展示下拉菜单的元素的 hover 状态下，展示下拉菜单的内容
• 示例
• 代码

• HTML 文档

                  
          
  客服管理
          
              
                  财务管理                
                      人员分支                    产品类型                    资金记录                
              
          
          
  产品管理
          
  预约管理
      

• CSS 文件

  ul{    /*取消 HTML 列表的样式*/    list-style-type: none;    margin: 0;    padding: 0;}li{    /*使用 浮动 实现横向导航栏*/    float: left;    /*设置 导航栏 的样式*/    background-color: rgba(0,0,255,0.5);}a:link,a:visited{    /*增加可点击区域*/    display: block;    width: 150;    /*设置文本样式*/    font-size: 20px;    font-weight: bold;    text-align: center;    text-decoration: none;    color: orange;    /*设置 填充宽度*/    padding: 7px;}a:hover,a:active{    background-color: blue;}/*默认隐藏下拉菜单*/.dropdown-content {    display: none;    background-color: lightgray;}/*显示下拉菜单*/.dropdown:hover .dropdown-content{    display: block;}

• 效果图

声明

关于 CSS 的介绍已经差不多了，但是总感觉还是很无力，还是不能随心所欲的控制 HTML 元素。是的，对于 HTML 元素的布局，我们还没涉及到，还不知道如何设置一个 HTML 元素的位置。还是不要着急的好，先回顾一下前几篇 Blog 中的知识，整理整理思路。在接下来的 Blog，我会介绍如何使用 CSS 布局 HTML 元素，敬请期待！Blog 中多有不足之处，望请大家多多指点。谢谢！