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

栏目: 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;
```
```
}
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

SNS网站构建

Gavin Bell / 张卫星、李占波、徐静 / 机械工业出版社 / 2011-2 / 69.00元

过去的十年里，Web成为了非常重要的社交工具。社会活动已经超出了BBS这个概念，而指范围更广的互联网。大多数人对Facebook、MySpace以及Twitter并不陌生，事实上，现在很多人在网络上都有个人档案。社会媒体已经成为我们生活的一部分，它可以让我们的生活更加美好，也可以使其更糟糕，像公民新闻这样的表达已变得很常见。仅仅Facebook就有两亿注册用户。那么在这个新领域中到底有什么奥秘呢......一起来看看《SNS网站构建》这本书的介绍吧!

码农工具

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

核心属性

相关知识

SNS网站构建

Markdown 在线编辑器

正则表达式在线测试

RGB CMYK 转换工具