• 项目知识点完善


                        项目知识点完善

    ,overfloat属性;

      1,四个值:

        visible 默认值。内容不会被修剪,会呈现在元素框之外。

        hidden     内容会被修剪,并且其余内容是不可见的。

        scroll     内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

        auto     如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

        inherit     规定应该从父元素继承 overflow 属性的值。

      2demo

         <body>

         <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>

         <div>

         这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll

         不论是否需要,用户代理都会提供一种滚动机制。

         因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible

         </div>

         </body>

         <style type="text/css">

    div

         {

           background-color:#00FFFF;

           150px;

           height:150px;

           overflow: inherit;

         }

      </style>

    ,显示效果(visibility);

       1visibility 属性规定元素是否可见;

       2visible:默认值,元素可见

          hidden:元素不可见,但是依然占据空间

          collapse:用在表格元素时,可删除一行或一列,且不影响表格的布局(后面学习JS再演示)

    三,opacity:属性(设置不透明度);

       1,特点:opacity 属性设置元素的不透明级别

       取值 opacity : value;

       value 规定不透明度,从 0.0 (完全透明)到 1.0(完全不透明)

       2demo

        <p id="p1">段落,opacity 值为 0</p>

        <p id="p2">段落,opacity 值为 0.5</p>

        <p id="p3">段落,opacity 值为 1</p>

        css

        p {border:1px solid black;}

        #p1 {opacity:0;}

        #p2 {opacity:0.5;}

        #p3 {opacity:1;}

    四,vertical-align 属性;

       1,特点:vertical-align 属性;

         1),设置单元格框中的单元格内容的垂直对齐方式

         2),对于行内块级元素,如 <img>,可设置垂直对齐方式

         定义行内元素的基线相对于该元素所在行的基线的垂直对齐

       2,常用取值

          baseline:默认,元素放置在父元素的基线上

          top:把元素的顶端与行中最高元素的顶端对齐

          bottom:把元素的顶端与行中最低的元素的顶端对齐

          middle:把此元素放置在父元素的中部

       3demo

        <div class="div_img">

    <img src="images/star_focus.png" id="img1">

    <img src="images/star_focus.png" id="img2">

    <img src="images/star_focus.png" id="img3">

        </div>

        css

        .div_img

        {

    400px;

        height:100px;    

        border:1px solid black;

        }

        #img1{

        vertical-align:middle;

        }

        #img2{

    vertical-align:top;

        }

        #img3{

    vertical-align:bottom;

        }

    五,几种常见的居中方式;

        1,文字的垂直居中

        <div style="line-height:50px;height:50px;background:red;">565656

        </div>

        2,层的水平居中:

          HTML

          <div class="parent_div">

      <div class="child_div ">1111111111</div>

          </div>

          CSS

          .parent_div{

       100%;

      

          }

          .child_div

          {

        580px;

       height: 35px;

       margin: 0 auto;

       background-color: red;

          }

        3/*3,层中文字水平居中*/

       text-align:center;

       在2中例子中CSS中加上:text-align:center;

    六,光标(cursor):

      可取值

      default

      pointer

      crosshair

      text

      wait

      help

    七,无序列表补充(list-style-type);

      1,无序列表取值

       none:无标记

       disc:实心圆,为默认值

       circle:空心圆

       square:实心方块

       decimal:数字(如 1,2,3,4,5),为默认值

       lower-roman:小写罗马数字(如  i, ii, iii, iv, v

       upper-roman:大写罗马数字(如 I, II, III, IV, V)

      2,图片:list-style-imageurl();

      3list-style-position列表项位置

         outside:标记位于文本的左侧,且放置在文本以外,为默认值

         inside:标记放置在文本以内

    八,下拉列表demo

        HTML:

        <body>

        <div>

        <div class="div_all" >

            <ul>

            <li id='li_one'><a href="webpage/about.htm">第一组</a>

                <div id="sub_div">

                <a href="https://www.baidu.com">刘吉祥</a>

                <a href="https://www.baidu.com">高伟超</a>

                <a href="https://www.baidu.com">任雨辉</a>

                <a href="https://www.baidu.com">王英杰</a>

                </div>

            </li>

            <li><a href="https://www.baidu.com">第二组</a></li>

            <li><a href="https://www.baidu.com">第三组</a></li>

            </ul>

        </div>

        </div>

        </body>

        CSS:

        <style type="text/css">

     *{padding: 0;margin:0;}

        li{ 100px;height: 30px;background: black;text-align: center;}

        a{text-decoration: none;color:#fff;margin-bottom: 10px;}

        .div_all li{float: left;}

        #sub_div{clear: both;}

        #sub_div a{color: black;padding: 8px;display: none;}

        #li_one:hover a{display: block;}

    </style>

  • 相关阅读:
    FlowPortal:流程节点定义有误,合流节点"合流"没有对应的聚焦节点
    FlowPortal 6.00c 使用xFormDesigner复制粘贴中文总是乱码
    SharePoint 2019 里安装FlowPortal6.00c报错
    与用户xxx一起提供的密码不正确。请确认输入的密码正确并重试
    SharePoint 2010 安装错误:请重新启动计算机,然后运行安装程序以继续
    SharePoint 2013: Workflow Manager Backend 服务意外地终止
    用户管理
    Linux及工具网站
    基于c开发的全命令行音频播放器
    Linux 下清空或删除大文件内容的 5 种方法
  • 原文地址:https://www.cnblogs.com/zhangzhen950702/p/5653393.html
Copyright © 2020-2023  润新知