• Javaweb之HTML,CSS的详细解析

    新浪新闻-正文实现

    2.3.2.1 正文排版
    2.3.2.1.1 分析

    整个正文部分的排版，主要分为这么四个部分：

    1). 视频 (当前这种新闻页面,可能也会存在音频)

    2). 文字段落

    3). 字体加粗

    4). 图片

    2.3.2.1.2 标签

    1). 视频、音频标签

    • 视频标签:

      • 属性:

        • src: 规定视频的url

        • controls: 显示播放控件

        • width: 播放器的宽度

        • height: 播放器的高度

    • 音频标签:

      • 属性:

        • src: 规定音频的url

        • controls: 显示播放控件

    2). 段落标签

    • 换行标签:

      • 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

    • 段落标签:

      • 如:

        这是一个段落

    3). 文本格式标签

    效果标签标签(强调)
    加粗bstrong
    倾斜iem
    下划线uins
    删除线sdel

    前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

    2.3.2.1.3 实现

    在上述的正文排版实现中，还用到了几个CSS属性：

    • text-indent: 设置段落的首行缩进

    • line-height: 设置行高

    • text-align: 设置对齐方式, 可取值为 left / center / right

    注意事项:

    • 在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符（ ；）来生成空格，如果需要多个空格，就使用多次占位符。

    • 那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下：

      • 显示结果描述占位符
        空格 
        <小于号<
        >大于号>
        &和号&
        "引号"
        '撇号'

    2.3.2.2 页面布局

    目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部分，都是铺满了整个浏览器。 而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居中展示的，左边、右边都是一定的边距的。

    那接下来呢，我们就需要按照这个效果，来完成页面布局。 而要想完成这样一个页面布局，我们就需要介绍一下CSS中的盒子模型 。

    2.3.2.2.1 盒子模型

    • 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

    • 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

    CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：

    盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。

    2.3.2.2.2 布局标签

    • 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

    • 标签：

    • 特点：

      • div标签：

        • 一行只显示一个（独占一行）

        • 宽度默认是父元素的宽度，高度默认由内容撑开

        • 可以设置宽高（width、height）

      • span标签：

        • 一行可以显示多个

        • 宽度和高度默认由内容撑开

        • 不可以设置宽高（width、height）

    测试：

     

     

    浏览器打开后的效果:
     

    1). div会独占一行，默认宽度为父元素 body 的宽度
     

     

     

    2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度
     

     

     

    2.3.2.2.3 盒子模型代码
     

    代码如下:
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>盒子模型title>
    8.     <style>
    9.         div {
    10.             width: 200px;  /* 宽度 */
    11.             height: 200px;  /* 高度 */
    12.             box-sizing: border-box; /* 指定width height为盒子的高宽 */
    13.             background-color: aquamarine; /* 背景色 */
    14.             
    15.             padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
    16.             border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
    17.             margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
    18.         }
    19.     style>
    20. head>
    21. ​
    22. <body>
    23.     
    24.     <div>
    25.         A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    26.     div>
    27. ​
    28. body>
    29. html>
     

     

    代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距)：
     

     

     

    我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：
     

     

     

    2.3.2.2.3 布局实现
     

    在实现新闻页面的布局时，我们需要做两部操作：
     

    •  
      第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。
       
    •  
      第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。
       
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
C++ Qt零基础入门进阶与企业级项目实战教程与学习方法分享                            
    
Push rejected: Push to origin/master was rejected                            
    
高德地图API使用教程                            
    
Python - 面向现实世界的人脸复原 GFP-GAN 简介与使用                            
    
神经元细胞属于什么细胞,人体有多少神经元细胞                            
    
【882. 细分图中的可到达节点】                            
    
基于springboot的教材预定系统平台                            
    
Python正则表达式- 正向零宽度查找断言（positive lookbehind assertion）                            
    
C++算法：图中的最短环                            
    
数据结构--第八章--图                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/qq_69748833/article/details/134224770
                
    •