相册 - 代码天地

相册

其他 2018-08-30 21:45:06 阅读次数: 0

<style> body { background: #801638; } body, body > * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-weight: normal; } * { transition: all .3s ease 0s; } /* Background colours */ div + div article:nth-child(1) { background: #c22326; } div + div article:nth-child(2) { background: #f37338; } div + div article:nth-child(3) { background: #fdb632; } div + div article:nth-child(4) { background: #027878; } div + div article:nth-child(5), div + div { background: #801638; } /* Main layout */ html, body, div + div { width: 100vw; height: 100vh; } div + div { list-style: none; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; overflow: hidden; } /* Articles */ div + div article { flex: initial; width: 20%; height: 100%; text-align: center; color: #fff; text-decoration: none; vertical-align: bottom; box-sizing: border-box; padding: 2vh 1vw; position: relative; } /* Big Headings */ body > div:first-child { position: fixed; bottom: 8vh; background: #fff; width: 100%; text-align: center; padding: .5rem; z-index: 2; } body > div:first-child h1, body > div:first-child h2 { margin: 0; padding: 0; } /* Hover interaction */ div + div:hover article { flex: initial; width: 10%; } div + div article:hover { width: 60%; } article > div { opacity: 0; transition: opacity .2s ease 0; } div + div article:hover > div { opacity: 1; transition: opacity .3s ease .3s; } /* navigation */ div + div article > h2 { bottom: 2vh; position: absolute; text-align: center; width: 100%; margin: 0; font-size: 3vh; } /* Article layouts */ article div { text-align: left; width: 58vw; } article div p, article div div h2, article div h3 { margin: 0 0 1em 0; } article div p { width: 40vw; } @media (max-width: 900px) { div + div article { padding: 2vh 3vw; } div + div article > h2 { transform: rotate(90deg); bottom: 23vh; min-width: 12em; text-align: left; transform: rotate(-90deg); transform-origin: 0 0 0; opacity: 1; } div + div article:hover > h2 { opacity: 0; } article div p { width: 50vw; } article div { max-height: calc(72%); overflow-y: auto; } } </style> </head> <body> <div> <h1>丰顺古典家具</h1> <h2>15975052569</h2> </div> <div> <article> <h2&gt圆桌系列</h2> <div> <h3>七星伴月圆台</h3> <img src="https://www.cnblogs.com/images/cnblogs_com/caidupingblogs/767491/o_Snipaste_2018-08-22_16-25-31.jpg"> <p>尺寸118 128 138 153 158 178等</p> </div> </article> <article> 　　<h2>餐椅系列</h2> <div> <img src="https://www.cnblogs.com/images/cnblogs_com/caidupingblogs/767491/o_Snipaste_2018-08-22_16-25-18.jpg"> <p>象头椅</p> <p>国色天香餐椅</p> </div> </article> <article> <h2>餐边柜系列</h2> <div> <h3>餐边柜</h3> <img src="https://www.cnblogs.com/images/cnblogs_com/caidupingblogs/767491/o_4497710125_1327305389.jpg"> <p>围边餐边柜</p> </div> </article> <article> <h2>博古架系列</h2> <div> 　　<h3>博古架</h3> <p>五福博古架</p> <p>尺寸138*198*35</p> </div> </article> <article> <h2>其他</h2> <div> <h3>其他</h3> <p>未完待续</p> </div> </article> </div>

猜你喜欢

转载自www.cnblogs.com/caidupingblogs/p/9562765.html

相册

美女相册

相册剪裁

相机 == 相册

Jquyer相册

动态相册

相机、相册

相机相册

画廊/相册

buuctf 相册

buu 相册

相册展示

苹果相册推送_苹果相册推吧

iOS图片保存相册

jQuery pgwslideshow 空间相册

相册翻页效果

Android从相册获取图片

UIScrollView 自动滚动相册

图片相册Panoramio详解

Github相册博客搭建

iOS读取本地相册

（三）制作相册边框

电子相册

调用系统相机与相册

相册管理类

WebView调用拍照与相册

保存图片到相册

Hexo 相册实践

javaScript移动端相册

调用系统相机,相册

今日推荐

基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！

美国拟限制 AI 大模型出口中国和俄罗斯

苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone

openKylin 社区生态委员会第六次会议圆满召开

阿里云正式发布通义千问 2.5

Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器

Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号

Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作

《2024 年一季度互联网投融资运行情况》研究报告

报告：Django 仍然是 74% 开发者的首选

15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？

TIOBE 5 月榜单：Fortran “复活”进入 Top 10

周排行

记一下去大梅沙的准备（2018-05-26）

Spring 注解事务

基于HTTP协议的客户端缓存

阿里云rds 备份和还原

[PHP] 几个拖慢 PHP 程序/API 运行速度的点

python 代码风格------------PEP8规则

js控制json生成菜单——自制菜单（一）

将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}

微信小程序转支付宝小程序

Qt551.窗口滚动条

每日归档

更多

2024-05-13(18)

2024-05-12(0)

2024-05-11(38)

2024-05-10(38)

2024-05-09(35)

2024-05-08(42)

2024-05-07(14)

2024-05-06(40)

2024-05-05(0)

2024-05-04(7)