zoukankan      html  css  js  c++  java
  • 【2017-3-24】框架、标题栏小图标、锚点、插入视频、插入音频、简单的滚动效果

     1.框架iframe  

    <iframe src="显示的网页地址" width="" height="" name="设置name属性"></iframe> 

      <a href="http://www.baidu.com" target="123">百度</a>  ---- target 打开新的网页显示在iframe中
      <a href="http://www.qq.com" target="123">新浪</a>
      <iframe width="100%" height="500px" src="http://www.qq.com" name="123">
      </iframe>

      在框架中显示百度网或腾讯网

    2.标题栏小图标

      <link rel="shortcut  icon" type="image/x-icon" href="图片的相对路径" media="screen"  /> 

    3.锚点

        目标位置的标题处 添加id="???"
      使用一个超链接,href里面填 "#???"

      <a href="#aaa">第一行</a>
      <a href="#bbb">第二行</a>
      <a href="#ccc">第三行</a>

      跳转的内容设置好id,href直接跳转到内容id上,并且在网页的浏览窗口最上面显示跳转的内容

    4.插入视频

    在优酷等视频网站,找到分享位置,复制html代码,贴入网页中

    <embed src='http://player.youku.com/player.php/sid/XMjY0NTkwMjEzMg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

    设置自动播放的在视频html代码.swf后面加上?VideoIDS=XNDA3OTM4NA=&isAutoPlay=true&isShowRelatedVideo=false&embedid=-&showAd=0

    5.插入音频

    <embed src="音频文件相对路径" hidden="true" autostart="true" loop="true">

    hidden是否显示控制面板   autostart自动播放   loop循环

    6.简单的滚动效果:
    <marquee direction="right" behavior="alternate" scrollamount="50">啦啦啦啦啦</marquee>


    direction 滚动方向left,right,up,down
    behavior 滚动方式scroll循环滚动,默认效果slide只滚动一次alternate来回交替
    scrollamount 滚动速度,以像素为单位
    scrolldelay 滚动延迟,以毫秒为单位
    loop 滚动循环,默认为1一直循环,=2则只循环两次
    width、height滚动范围
    bgcolor 滚动背景色

     样式表的简单了解

    -----------------------------------------------------------------
    css:层叠式样式表

    内联样式:样式优先级最高的

    以属性的方式 style=""
    宽度: 300px;
    高度: height:
    背景色:background-color:red/#303030;

    加粗: font-weight:blod;
    倾斜: font-style:italic;
    下划线:text-decoration:underline/line-through(删除线);

    颜色: color:red;
    字号: font-size:12~18px;
    字体: font-fimaly:黑体;

    float:left; - 流式布局(横向排列)
    最小宽度min-300px;

    背景图片:background-image:url(路径);
    背景图片排列方式:background-repeat:round;

    position:absolute;

  • 相关阅读:
    JAVA应用程序占用CPU、内存过高分析过程
    html和css问题?
    html跳动的心实现代码
    css知识点总结
    html注册栏网页练习代码
    前端开发单词大全
    html常用代码合集
    html背景图星际导航图练习
    html迪士尼网页实现代码
    html阿里云网页练习实现代码
  • 原文地址:https://www.cnblogs.com/hanqi0216/p/6618532.html
Copyright © 2011-2022 走看看