• 前端基础知识学习笔记


    1、<blockquote>标签

    定义块引用,<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

    可选属性cite,cite属性规定引用的来源。

    2、<hr>标签

    <hr> 标签在 HTML 页面中创建一条水平线。

    3、target属性

    target 属性规定在何处打开页面上的所有链接。

    属性值为_blank时,在新窗口中打开被链接文档。

    属性值为_self时,默认。在相同的框架中打开被链接文档。

    属性值为_parent时,在父框架集中打开被链接文档。

    属性值为_top时,在整个窗口中打开被链接文档。

    属性值为framename 时,在指定的框架中打开被链接文档。

    4、translate属性

    <p translate = "no">请勿翻译本段。</p>

    yes表示翻译

    5、Bootstrap超大屏幕(Jumbotron)

    Bootstrap支持的特性,该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:

          创建一个带有 class .jumbotron. 的容器 <div>。

          除了更大的 <h1>,字体粗细 font-weight 被减为 200。

    例如:

    <div class="container">
    <div class="jumbotron">
    <h1>欢迎登陆页面!</h1>
    <p>这是一个超大屏幕(Jumbotron)的实例。</p>

    </div>

    如果jumbotron放在container样式内,则显示圆角;如果不放在里边,则不会显示圆角。

    6、Bootstrap缩略图

    大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:

         在图像周围添加带有 class .thumbnail 的 <a> 标签。

         这会添加四个像素的内边距(padding)和一个灰色的边框。

         当鼠标悬停在图像上时,会动画显示出图像的轮廓。

        例如:<div class="row">

                <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </a> </div>

                </div>

    如果想添加自定义的内容,可以在上面的基本缩略图上添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:

           把带有 class .thumbnail 的 <a> 标签改为 <div>。

           在该 <div> 内,可以添加任何想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。

           如果想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。

       例如:<div class="row">

              <div class="col-sm-6 col-md-3">

              <div class="thumbnail"> <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图">

              <div class="caption">

              <h3>缩略图标签</h3>

              <p>一些示例文本。一些示例文本。</p>

              </div>

              </div>

              </div>

              </div>

    Just do it!
  • 相关阅读:
    微信小程序UI自动化: minium文档部署02
    微信小程序UI自动化: 选择工具/框架01
    gitalb学习:02gitlab runner安装
    gitlab学习: 01安装gitlab
    01.Python中一切皆对象
    Prometheus+Noe Expoter+Grafana:资源监控初体验(基于cenots7,没使用docker)
    01. 判断三角形的函数
    Locust性能测试:上手初体验
    史上最全的邮箱测试方法!
    使用 Python 处理非对称加密,竟然如此简单
  • 原文地址:https://www.cnblogs.com/betterself/p/6760721.html
Copyright © 2020-2023  润新知