图片文字模拟漫画书的布局效果

栏目: Html · 发布时间: 5年前

核心属性

display: flex + justify-content: space-between + align-items: center 图片居中水平排列

border-image 图片和文字的动画边框效果

@media 根据不同的页面大小，图片呈现不同的布局方式

相关知识

<base href="https://pics.codecolor.cn/graphic-novel/">

```
<div id="strip">
```
```
<figure id="panel1">
```

<img src="pleading-man.jpg" alt="A photograph of a man kneeling in a parking garage, pleading for his life">

<figcaption>“等等…”</figcaption>

```
</figure>
```

<img src="car-strip.jpg" alt  id="panel2">

```
<figure id="panel3">
```

<img src="gunman.jpg" alt="A backlit photograph of a man holding a gun">

```
<figcaption>砰！！！</figcaption>
```
```
</figure>
```
```
</div>
```

```
#strip {
```
```
display: flex;
```
```
justify-content: space-between;
```
```
align-items: center;
```
```
max-width: 820px;
```
```
margin: 0 auto;
```
```
}
```
```
#strip img {
```

border-image: url(https://pics.codecolor.cn/graphic-novel/comic-frame.png) 22 16 16 22;

```
background: #000;
```
```
border-width: 12px;
```
```
border-style: solid;
```
```
}
```
```
#panel1 {
```
```
width: 40%;
```
```
position: relative;
```
```
}
```
```
#panel3 {
```
```
width: 35%;
```
```
position: relative;
```
```
}
```
```
#panel1 img, #panel3 img {
```
```
width: 100%;
```
```
}
```
```
#strip figcaption {
```
```
position: absolute;
```
```
top: 2rem;
```
```
right: -2rem;
```
```
padding: 1rem;
```
```
background: #fff;
```
```
background-clip: padding-box;
```
```
font-size: 1.2rem;
```

font-family: Comic Sans MS, Comic Sans, cursive;

border-image: url(https://pics.codecolor.cn/graphic-novel/lettering-frame.png) 11 10 14 12;

```
border-width: 6px;
```
```
border-style: solid;
```
```
}
```
```
#panel1 figcaption {
```
```
letter-spacing: .3rem;
```
```
top: 1rem;
```
```
right: -4rem;
```
```
}
```
```
#panel3 figcaption {
```
```
left: -2rem;
```
```
width: 4rem;
```
```
font-style: italic;
```
```
}
```
```
@media screen and (max-width: 60rem) {
```
```
#panel2 {
```
```
display: none;
```
```
}
```
```
#strip img {
```
```
width: 100%;
```
```
}
```
```
#panel1 figcaption {
```
```
top: -1rem;
```
```
}
```
```
}
```
```
@media screen and (max-width: 50rem) {
```
```
#panel1 figcaption {
```
```
top: 10rem;
```
```
}
```
```
}
```
```
@media screen and (max-width: 30rem) {
```
```
#strip {
```
```
flex-direction: column;
```
```
}
```
```
#panel1 {
```
```
order: 3;
```
```
}
```
```
#panel1,#panel3 {
```
```
width: 60%;
```
```
}
```
```
#panel3 {
```
```
align-self: flex-end;
```
```
}
```
```
#panel3 figcaption {
```
```
display: none;
```
```
}
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

同伦方法纵横谈

王则柯 / 大连理工大学 / 2011-5 / 25.00元

《走向数学丛书07-同伦方法纵横谈》，在本书里读者会看到许多人物故事，作为一本普及读物，我们有时候甚至觉得，对于不少读者来说，书中所写的科学研究中的人物故事，可能比书中介绍的具体的研究成果更有价值，这些人物故事，许多都出自我们个人之间的交往，这是从一个侧面了解科学研究的规律，了解科学家之成为科学家的珍贵记录。一起来看看《同伦方法纵横谈》这本书的介绍吧!

码农工具

图片文字模拟漫画书的布局效果

核心属性

相关知识

同伦方法纵横谈

JSON 在线解析

RGB转16进制工具

SHA 加密