zoukankan      html  css  js  c++  java
  • 0909学习内容。

    一.框架:
     iframe:它可以嵌在普通的页面里面。
     
    iframe的属性有:src-框架里面要显示的页面地址。

      width-框架的宽度。
      
      height-框架的高度。

      frameborder-框架的边框。

      scrolling-框架的滚动条。

     frameset:它是框架集。如果页面要用frameset,当前页面里面不能有<body>标签。两者不能共存。

     它的属性有:cols="300,*"意思是将页面左右拆分,左边宽度为300,右边宽度为剩余的全部。

          rows="300,*"意思是将页面上下拆分,上页面的高度为300,下页面的高度为剩余的全部。

          frameboder--代表边框。

          frame:src--框架要显示的网页地址。

          scrolling--滚动条

     其他:1.marquee-滚动效果

      它的属性有:direction-改变滚动方向。

           <mark></mark>-做标记。(例如:<span>今天<mark>天气</mark>很好!</span>  网页输出的  天气  会变色。)

           <hr />--做分隔线。

           2.页面嵌入视频:

      嵌入过程:①找到视频②视频左下方点击分享③复制HTMl代码或复制通用代码④把复制的代码粘贴在网页里面。

    二.样式表:作用是美化页面

     样式表的分类:①内联--写在标签里面 style="样式"

       (优点:控制精确。缺点:代码重用性差)

            ②内嵌--它是嵌在页面的head里面。

       格式是:<style type="text/css"></style>(优点:代码重用性好。缺点:控制没有内联的精确。)

            ③外部样式表:它是单独的样式文件。

       引入方式为:①右键-css样式表-附加样式表

            ②手动写入<link herf="text.css" rel="stylesheet" type="text/ccs">

       优点:代码重用性是最好的。缺点:控制没有内联的精

    注意:它们的优先级是①外部样式表②内嵌③内联。后期主要用外部样式表
       
    三.选择器:这样式表里用来选取元素的。

      选择器分为三种:

     1.标签:根据标签名选中元素。


     2.class:符号是.(.代表class)根据class名来筛选元素。

     <style type="text/css">
      
      .a{ background:#CFF}
            </style>

     <body>

     <biv class="a">nihao</biv>

     </body>
     
     3.id: 符号是#(#代表id)根据id名来筛选出唯一元素。

     <style type="text/css">

             #b{background:#F0F}

             </style>

     <body>
      
     <biv id="b">tianqi</biv>

     </body>

    复合型:1.逗号并列:div,span{}

     
     <style type="text/css">

            div,span{background:#F0F}

             </style>
      
     <body>
      
     <biv id="b">tianqi</biv>
      
     <span>内容<span>

     </body>

     2.空格后代:#list li{}

     <style type="text/css">
      
      #list li{ background:#CFF}
            </style>

     <body>
      
     <biv id="list">

     <li>内容1</li>

     <li>内容2</li>

     </biv>

     </body>

     3.点筛选:div.s

    注意:优先级从高到底为id,calss,标签。

    四.样式

     1.大小:width-宽度 height-高度

     2.背景:①background-color 代表背景颜色
      
      ②background-image代表背景图片

      ③background-repeat代表背景图的平铺方式

      ④background-position代表背景颜色位置

      ⑤background-attachement设置背景图片是否滚动

      ⑥background-size代表背景图片的大小(200px 200px)前面的代表宽度。后面的代表高度。

     3.字体(前景):①font-family:字体样式

       ②font-size:字体大小(一般编程里面最小的字体为12px,正常字体为14px或16px)

       ③font-style:italic 倾斜(normal是不倾斜)

       ④font-weight:bold加粗(normal是正常的意思)

       ⑤text-decoration:underline下划线 ;overline上划线;line-through删除线;none用来去掉超链接的下划线

       ⑥color:字体的颜色

     4.对齐方式:    ①text-align:center代表水平对齐方式居中对齐。left是左对齐;right是右对齐;
       
       ②vertical-align:middle代表垂直对齐方式是居中对齐;top是顶部对齐;bottom是底部对齐(需要配合行高line-height来使用。)

       ③line-height代表行高

       ④text-indent首行缩进量(单位是px)

     5.边界边框: ①margin表示外边距margin:10px 10px 10px 10px 方向是上右下左(顺时针)需要配合float使用。简写方式:margin:①10px;设置对象四周。

       ②padding表示内边距方向同上。如果加了内边距,该元素会相应的变大. 简写方式跟margin一样。     margin:10px 5px;设置上下为10px;设置左右为5px;

    例如:<div style="height:250px; 250px; padding:50px 0px 0px 50px;">中,原来的高度和宽度为300px,padding的上和左加了50px,为了不影响大小。要从高和宽各减去50px。

       ③float:改变元素的流向;

       ④border:简写方式border:1px solid #60f(第一个是边框粗细,第二个是边框样式,第三个是边框颜色。)

      内容有点多,需要多练习.学习ing。

  • 相关阅读:
    Python day thirteen
    Python day twelve
    Python day eleven
    Python day ten
    Python day nine
    Python day eight
    Python day seven
    Python day six
    Python day five
    Python day four
  • 原文地址:https://www.cnblogs.com/zxl89/p/5858050.html
Copyright © 2011-2022 走看看