• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例2-3 交互元素〈summary〉与<details>的结合使用

实例2-3 交互元素〈summary〉与<details>的结合使用

1.功能描述

在新建的页面中分别加入一个<details>元素和一个〈summary〉元素,当显示<details>元素内容时,其子元素<summary〉以字体加粗的形式展示在页面中。

2.实现代码

在DreamweaverCS5中新建一个HTML页面2-3.html,加入代码如代码清单2-3所示。

代码清单2-3 交互元素〈summary〉的使用

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>交互元素<summary>的使用</title>
	<style type="text/css">
	  body{
	    padding:5px
	    font-size:12px
	   }
	   summary{
	     font-weight:bold;
	   }
	   ...省略部分实例重复样式代码
	  </style>
	  </head>
	  <body>
	    <details open="open">
	     <summary>页面说明</summary>
	     本页面生成于 2011-03-17
	 </details>
	</body>
	</html>

3.页面效果

该页面在Chrome 10浏览器下执行的页面效果如图2-3所示。

图2-3使用交互元素<summary>的页面效果

4.源码分析

在页面样式文件中,为了突出显示<summary>元素,增加了一个加粗的字体效果,如上面的加粗代码所示。从代码的结构中不难看出,<summary>元素包含在<details>元素中,是<details>元素的子元素,在摆放位置时尽量放在第一个。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101