html中文字怎么显示到图片的中正中间

方案一：文字浮动定位到图片上

<div class="img_wd">

   <div class="c_img"><img src="test.jpg" width="100px" height="100px"/></div>

   <div class="c_words">测试文字</div>

</div>

<style>

.c_img{position:relative}

.c_words{position:absolutetop:35pxheight:30pxline-height:30px}

</style>

如要文字居中显示：top值=(图片高度-文本div高度)/2

如需要求水平居中：left=(图片宽度-文本div宽度)/2

方案二：用图片做文字图层背景

<div class="img_wd">测试文字</div>

<style>

.img_wd{

background:url(test.jpg) top center no-repeat

width:100pxheight:100pxline-heiht:100px

text-align:center}

</style>

1、先将网页另存到本机，假设文件名为ABC.HTM，保存在C盘根目录下；

2、用VB读取存好的ABC.HTM文件的全部内容到一个变量或文本框；

3、用搜索函数InStr()和取字串的函数Mid()来抽取出介于“>”和“</A>”之间的文本，就是超链接的文字；抽取“href=”和空格之间的内容，就是链接的URL。

代码如下：（在窗体添加一个按钮Command1，一个文本框Text1，将Multiline属性设置为True，ScrollBars设置为Virtical）

Private Sub Command1_Click()

Dim htmltext As String, aLine As String

Dim linkText As String, linkURL As String

Open "C:\ABC.HTM" For Input As #1

Do While Not EOF(1)

Line Input #1, aLine

htmltext = htmltext &aLine

Loop

htmltext = LCase(htmltext)

Close

Open "C:\links.csv" For Output As #1

Dim pos1 As Integer, pos2 As Integer

pos1 = InStr(1, htmltext, "href=")

Do While pos1 >0

htmltext = Mid(htmltext, pos1 + 5)

pos1 = 1

pos2 = InStr(pos1, htmltext, " ")

linkURL = Mid(htmltext, pos1, pos2 - pos1)

If InStr(linkURL, ">") >0 Then

pos2 = InStr(pos1, htmltext, ">")

linkURL = Mid(htmltext, pos1, pos2 - pos1)

End If

linkURL = Replace(linkURL, """", "")

linkURL = Replace(linkURL, "'", "")

pos1 = InStr(pos2, htmltext, ">")

pos2 = InStr(pos1, htmltext, "</a>")

linkText = Mid(htmltext, pos1 + 1, pos2 - pos1 - 1)

If Left(linkText, 4) = "<img" Then linkText = "图片链接"

Text1.Text = Text1.Text &linkText &" ---- " &linkURL &vbCrLf

Print #1, linkText &"," &linkURL

pos1 = InStr(pos2, htmltext, "href=")

Loop

Close

MsgBox "在C盘根目录下找到 links.csv ，双击即可看到你想要的。", , "提取完毕"

Unload Me

End Sub

咦,感觉这个层次示意图,比较值钱! 单独放一下.

触发怪异模式的条件

如果想设置滚动条样式怎么办?

三列布局

第一种 绝对定位

html

css

利用 vw 和 calc()?

float方式,

要注意html的顺序

html

scss

参考 三列布局实现4种方法

双侧翼,还真是学习了.

这样能够保证先加载中间的主要内容

html

scss

不用float 用display : inline-block行不行?

这才发现 float 和 inline-block 有个挺大的区别

float 时, left 通过 margin-left 向左移动时, right 会被 mid卡主.

inline-block 时, left通过margin-left 向左移动时, right会跟着left 一起移动.

双侧翼很巧妙!

css每个单句都不怎么难, 但复合使用不太好掌握.

圣杯模式

html

scss

这个就更巧妙了,我真实佩服的五体投地.

首先, width 和 margin 的百分比都是 针对父级的宽度, 这个宽度是 content-width

不包括padding部分.

所以根据padding 预留出左右的空间.

根据float 的特性, 左右会折行到下一行,

通过margin-left 可以让float元素 之间重叠, 让他们回到同一行.

但重要的是, left 的移动,right不会跟着移动,这和inline-block 不同.

最后用relative最后再调一次位置.

实在是精妙.

css3 关于position 感觉非常坑人

关于 百分比的基准值,这里有写.

用flex

html

scss

确实很方便, 问题来了, 如果我想让mid 先加载怎么办?

利用order

html

scss

设置在子元素,伸缩项目上.

多余的部分会进行拉伸填充,

每个子元素的默认是为0, 默认是不会拉伸填充,不变形.

如果设置,则按照比例,分割空间分配.

也就是会经过变形不超出父级.

默认值为 1, 按照该比例,切割子元素,

如果我们想让他们不变形且不换行,

可以把子元素的shrink 值都设置为0

这就是视频和文字的差异了,

因为用文字表达要准确,所以只能说的不是人话,

实际上核心逻辑非常简单.

刚开始,我不明白这个属性有什么用处,

后来发现三列布局时,通过html顺序和 order配合可以调整加载顺序.

默认值为 0

如果我们想设置子元素的主轴方向的属性,

可以用 grow, shrink, base ,order, 可以调整主轴的大小和位置

如果想谁知子元素的侧轴方向的属性,

可以用aline-item,

父元素上的 flex-direction flex-wrap justify-content aline-item aline-content

这几个属性,都是用来进行布局的.

非常的,,嗯强大.

我们讲主轴设为 x轴, 设定多行的情况,

讨论一下 aline-item 和 aline-content的效果区别.

之前我只是笼统的知道 aline-item 作用在侧轴只有一行的情况.

aline-content 作用在侧轴多行的情况.

而实际上 aline-item 对 侧轴多行的情况也是有效果的,只是不一样.

html

当值为strech时, 两个效果是一样的.

注意strech 如果想要有效果, 就必须让heigth(侧轴宽度) 不是固定宽度,否则失效.

除了这三个之外, aline-content 还有两个属性,

与justify-content 非常类似,

如果父级 relative 子级当中有 absolute的元素,

则该子元素不受到 flex布局的影响.

flex布局时会排除该元素进行布局

至此,我觉得flex进行布局,那是真的强.

主轴和侧轴的各自控制属性基本就全了.

侧轴唯一比主轴差的属性,应该就是 shink 和 order属性了.

好课外思考就到这里, 继续看视频

---