挑战30个博客园美化小技巧——No1添加侧边栏公告头像

咱们直接上代码（代码添加到博客侧边栏公告，代码在网友基础上稍作了修改）：

我们一行一行来看（第一次讲得详细一点，内容偏简单，我对html语言也一窍不通，顺便学习）：

    <!-- 添加图片并指向CSDN -->
    <div align="center">
    <a href="https://www.cnblogs.com/tyylcs/">
    <img style=
    　　"width: 100px;
    　　　　height: 100px;
    　　　　　　border-radius: 50px;"
    　　　　　　　　src="https://images.cnblogs.com/cnblogs_com/tyylcs/1827659/o_200813134505IMG_2948(20200711-213817).JPG">
    </a>
    </div>

1. <!-- 添加图片并指向CSDN -->

　　1.1 <!--        -->表示的是html的注释

　　1.2 “添加图片并指向CSDN”表示的是注释的内容

2.<div align="center">

　　2.1 <>标志是html特有的，html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签，支持正确的嵌套

　　2.2 div指的是块级的标签，结尾处还有一个/div，首尾呼应（必须这样）

　　2.3 align=“center” 大部分标签有属性，其格式：属性=“属性值”（多个属性之间用空格隔开）

　　2.4 align指的是对齐方式

　　2.5 center指的是对齐方式的居中

3.<a href="https://www.cnblogs.com/tyylcs/">

　　3.1 a指的是链接标签，结尾处还有一个/a，首尾呼应

　　3.2 href:跳转页面地址

　　3.3 https://www.cnblogs.com/tyylcs/  是我本人的博客地址哈（是全部代码输入完全后点击图片跳转的网址）

4.<img style=

　　4.1 img指的是图形标签

　　4.2 style指的是属性规定元素的行内样式（inline style）

　　　　style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式

　　　　可用在标签内部使用（如本次的代码）

5,6,7"width: 100px; 　　　　height: 100px; 　　　　　　border-radius: 50px;"

　　5.1 width:宽度

　　5.2 height:高度

　　5.3 border:边框

　　5.4 border-radius用来设置边框圆角（四个尖角的圆润程度）

为了明确这个概念，三张图来解决

图一：border-radius: 50px

图二：border-radius: 15px

    

图三：border-radius: 0px

     

　　5.5 px：pixel（像素）是图像的基本采样单位

（批注：按照CSS规范的定义，CSS中的px是一个相对长度，它相对的，是viewing device的分辨率。这个viewing device，通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸（实际上，假设我们的显示器分辨率都与物理分辨率一致，而液晶点距其实是0.25mm到0.29mm之间，所以不太可能是正好1/96英寸，而只是接近）。）

8.src="https://......(此处省略部分代码，标题栏放不下）......JPG">

　　8.1 src 指的是图形地址

　　8.2 https://images.cnblogs.com/cnblogs_com/tyylcs/1827659/o_200813134505IMG_2948(20200711-213817).JPG是图片的地址

（批注：图片地址的获取方法后期更新，我目前使用的方法是将图片添加到相册，然后查看原图，会跳转到一个图片网址，复制下来就行了）

9,10 前文已经提过

 

新人第一篇，大家多多支持呀！