一个简单的响应式博客网页

简介：使用React搭建一个简单的响应式博客Demo；博客页面包含三个部分，头部，主体内容和底部；页面为响应式，可根据不同的设备环境进行相应布局。主要知识点，react开发，Html和CSS基础。

效果图：

PC端：

移动端：

环境：

window、Node.js、VScode；

部分代码：

import {Card, Image} from 'antd'
import Icon, {
    RocketTwoTone,
    PoundCircleTwoTone,
    FireTwoTone,
    CheckCircleTwoTone,
    createFromIconfontCN
  } from '@ant-design/icons';
  import mimg from '../img/codeComputer.jpg'
 
function content(){
   
    const number = [199,999,657];
    return (
        <div className="content">
            <Card>
                <div className='content_top'>
                    <div className='content_top_left'>
                        <div style={{marginTop:30}}>欢迎来到草莓文档</div>
                        <div style={{fontSize:24}}>一个简单的Demo， 仅供个人参考学习</div>
                        <div style={{fontSize:14,textAlign:"left",marginTop:10}}>
                            <p style={{textIndent:30}}>
                                 简介，一个响应式网站，页面的排版可智能地根据用户行为以及用户使用的设备环境进行相应布局。主要知识点是Html和CSS的页面布局，以及样式的设置；
                            具体知识点有页面布局，元素单位px,rem，re,vh，vw等viewPort设置；媒体元素；flex弹性布局,flex-warp；position:fixed 固定定位；calc() 动态计算长度值；-webkit-text-size-adjust的用法；
                            box-shadow属性等知识点。项目使用react脚手架创建，可用于当做博客开发的模板。
                            </p>
                        </div>
                    </div>
                    <div className='content_top_right'>
                        <Image src={mimg} preview={false} width='90%' height='90%' />
                    </div>
                </div>
                <div className='content_middle'>
                    <div className='content_middle_row'>
                        <div className='content_middle_row_card'>
                            <a href='#'><IconFont type="icon-python" /><span>  Python  </span><span>{number[1]}</span></a>
                        </div>
                        <div className='content_middle_row_card'>
                            <a href='#'><IconFont type="icon-java" /><span>  JAVA  </span><span>{number[2]}</span></a>
                        </div>
                        <div className='content_middle_row_card'>
                            <a href='#'><IconFont type="icon-javascript" /><span>  JAVASCRIPT  </span><span>{number[0]}</span></a>
                        </div>
                    </div>
                    <div className='content_middle_row'>
                        <div className='content_middle_row_card'>
                            <a href='#'><RocketTwoTone /><span>  CSS  </span><span>{number[1]}篇</span></a>
                        </div>
                        <div className='content_middle_row_card'>
                            <a href='#'><PoundCircleTwoTone /><span>  HTML  </span><span>{number[2]}篇</span></a>
                        </div>
                        <div className='content_middle_row_card'>
                            <a href='#'><FireTwoTone /><span>  PHP  </span><span>{number[0]}篇</span></a>
                        </div>
                    </div>
                    <div className='content_middle_row'>
                        <div className='content_middle_row_card'>
                            <a href='#'><IconFont type="icon-python" /><span>  C++  </span><span>{number[1]}篇</span></a>
                        </div>
                        <div className='content_middle_row_card'>
                            <a href='#'><PoundCircleTwoTone /><span>  C#  </span><span>{number[2]}篇</span></a>
                        </div>
                        <div className='content_middle_row_card'>
                            <a href='#'><FireTwoTone /><span>  C  </span><span>{number[0]}篇</span></a>
                        </div>
                    </div>
                </div>
                <div className='content_bottom'>
                       <div className='content_bottom_row'>
                            <div className='content_bottom_row_card'>
                                <PandaIcon />
                                <p className='content_font'>本网页为响应式布局，可随着设备显示窗口的大小而变化。</p>
                            </div>
                            <div className='content_bottom_row_card'>
                                <HeartIcon style={{color:'hotpink'}} />
                                <p className='content_font'>它规定了元素应占用的Flex容器内可用空间的大小。如果所有项都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间占用的空间是其他孩子的两倍(或者至少会尝试)，负数无效</p>
                            </div>
                            <div className='content_bottom_row_card'>
                                <CheckCircleTwoTone />
                                <p className='content_font'>flex-basis定义了在分配剩余空间之前元素的默认大小。它可以是长度(例如20％，5rem等)或关键字；如果设置为0，则不考虑内容周围的额外空间。如果设置为auto，则根据其flex-grow值分配额外空间。</p>
                            </div>
                        </div>
                </div>
            </Card>
        </div>
    )
}
 
export default content;

涉及详细知识点：

一个响应式网站，页面的排版可智能地根据用户行为以及用户使用的设备环境进行相应布局。主要知识点是Html和CSS的页面布局，以及样式的设置；具体知识点有页面布局，元素单位px,rem，re,vh，vw等viewPort设置；媒体元素；flex弹性布局,flex-warp；position:fixed 固定定位；calc() 动态计算长度值；-webkit-text-size-adjust的用法；box-shadow属性等知识点。项目使用react脚手架创建，可用于当做博客开发的模板。

知识点：

div  display
none 隐藏div
block 换行
inline 一行显示
 
 
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
 
box-shadow属性四个值:
1、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
 
2、offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
 
3、blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。
 
4、spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
 
-webkit-text-size-adjust的用法如下：
1、之前可以设置一个百分比然后可以在网页上（pc）显示小于12px的字体，但后来谷歌新版本已经不支持这个属性了。如果还想实现小于12px的字体，要用-webkit-transform:scale(0.8)
2、在移动设备上如手机和平板横屏会导致字体变大，-webkit-text-size-adjust: 100%可以禁止字体变化。
3、-webkit-text-size-adjust放在body上会导致页面缩放失效
4、body会继承定义在html的样式
5、用-webkit-text-size-adjust不要定义成可继承的或全局的
 
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
 
 
calc() 函数用于动态计算长度值。
 
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
 
calc(expression) 	expression必须，一个数学表达式，结果将采用运算后的返回值。
自动调整表单域的大小以适应其容器的大小
calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。
 
以下实例中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。
 
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}
 
#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
 
 
响应式布局：
ViewPort 可视窗口，显示内容的区域；窗口大小改变，可视窗口也会改变；
根据设备的宽度动态设置页面元素宽度；
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
在css标签内，再通过“:hover”定义鼠标悬停在a标签时span标签的样式
 
style="cursor:pointer"   手型鼠标；
 
position：fixed；固定定位 
1.实现某个元素在可视窗口的居中位置显示
　　　　1）给自身设置宽高；
　　　　2）给自身加position：fixed；
　　　　3）用margin向左移动自身宽度的一半，向上移动自身高度的一半；
　　或：
 
　　　　1）给自身设置宽高；
　　　　2）再设置position：fixed；
　　　　3）再给自身设置left：0；right：0；top：0；bottom：0；margin：auto；
 
 
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
默认值。规定灵活的项目不拆行或不拆列。
规定灵活的项目在必要的时候拆行或拆列。
规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
设置该属性为它的默认值。请参阅 initial。
从父元素继承该属性。请参阅 inherit。

注：要源码私信即可。