zoukankan      html  css  js  c++  java
  • 3.排版

    1.标题
    <h1>到<h6>
    还有.h1类到.h6类
    给内联属性的文本赋予标题的样式
    标题内添加<small>标签或赋予.small类元素,标记副标题
     
    <h1>这是一个标题,<small>副标题</samll></h1>
     
    2.页面主题
    <p>
    bootstrap将全局font-size设置为14px,line-height设置为1.428。
     
    3.中心内容突出显示
    通过添加 .lead 类让段落突出显示
     
    <p class="lead">突出显示该行文字</p>
     
    4.内联文本元素
    高亮显示 : <mark>高亮显示</mark>  浅黄色背景
    被删除的文字(文字中间加横线):<del>被删除的文字样式</del>或者<s>没用的文本</s>   一样的效果
    插入文本(带有下划线的文本):<ins>文字添加了下划线</ins>或者<u>给文本添加下划线</u>  展示一样的效果
    小号文字:<small>小号文字</small> small标签内字体的font-size是父容器字体的85%
    字体加粗:<strong>字体加粗</strong>
    斜体:<em>字体倾斜<em>
     
    5.文本对齐方式
    .text-left     左对齐
    .text-center     居中
    .text-right     右对齐
    .text-justify    两侧对齐
    text-nowrap     不换行
     
    6.改变大小写
    .text-lowercase   全部小写显示   hello world
    .text-uppercase     全部大写显示   HELLO WORLD
    .text-capitalize     每个单词的首字母大写     Hello World
     
    7.首字母缩略语
     
    <abbr title="她很漂亮">她很...</abbr>
    会有一个问号的图标,然后会在问号右下方显示完整的字体。
     
    8.地址
     
    <address>
         <strong>小白</strong><br/>
         中国北京大兴区明春西苑<br/>
         <abbr title="Phone">P:</abbr>(123)456-7890
    </address>
    <address>
         <strong>小贝</strong><br/>
         <a href="mailto:#">first.last@example.com</a>
    </address>
     
    9.引用,(在文档中引用其他来源的内容)
    <blockquote></blockquote>
    <blockquote>
         <p>世上本无路,走的人多了遍成了路。</p>
         <footer>出自<cite title="鲁迅文集">鲁迅文集</cite></footer>
    </blockquote>
     
    设置引用内容右对齐
    <blockquote class="blockquote-reverse"></blockquote>
     
     
    10.列表
    无序列表
    <ul>
         <li></li>
         <li></li>
         <li></li>
    </ul>
    有序列表
    <ol>
         <li></li>
         <li></li>
         <li></li>
    </ol>
    无样式列表
    <ul class="list-unstyled">
         <li></li>
         <li></li>
         <li></li>
    </ul>
    内联列表
    <ul class="list-inline">
         <li></li>
    <li></li>
    <li></li>
    </ul>
    描述(带有描述的短语列表)
    <dl>
         <dt>《北京遇上西雅图之不二情书》</dt>
         <dd>
              是一部有关爱情和人生的文艺电影,里面有很多的思考的点,有关于老年的情感的,有关于离家闯荡社会的,有关于面对挫折的,很棒的电影,值得一看。
         </dd>
    </dl>
    水平排列描述
    <dl class="dl-horizontal">
          <dt></dt>
    <dt></dt>
    <dt></dt>
    </dl>
     
     
  • 相关阅读:
    Python基础学习参考(四):条件与循环
    Python基础学习参考(三):内置函数
    Python基础学习参考(二):基本语法
    2011的最后一篇博文 写给我自己也写给你们
    前端开发面试题
    常用js操作:
    两个嵌套for循环执行顺序
    在寻找学习js的途中,又发现了好的东西!
    arcgis api for js初学
    解决为什么arcgis api for js的first map里不显示arcgis地图
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6495355.html
Copyright © 2011-2022 走看看