HTML初学者小知识2
2024-09-08 15:42:07
网页内嵌
代码以及演示如下
代码
<div id="tab_1">
<iframe src="div.html"
height="500"
width="1200"
frameborder="0"
scrolling="0"
></iframe>
</div>
演示
php页面代码如下
<p><iframe src="链接" style="width:100%;height:465px;"></iframe></p>
HTML+CSS实现简单的相册自适应UI
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css实现图片排版效果</title>
<link rel="stylesheet" href="css的位置">
</head>
<body>
<div class="centent">
<div class="main">
<div class="img">
<img src="链接" >
</div>
</div>
<div class="main">
<div class="img">
<img src="链接" >
</div>
</div>
<div class="main">
<div class="img">
<img src="链接" >
</div>
</div>
<div class="main">
<div class="img">
<img src="链接" >
</div>
</div>
</div>
</body>
</html>
css代码
body {
padding: 15px;
min-width: 320px;
}
.img>img {
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}
.img {
display: flex;
width: 90%;
height: 90%;
align-items: center;
border-radius: 5px;
}
.main {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
height: 250px;
max-width: 25%;
}
.centent {
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
min-height: 320px;
}
@media screen and (max-width: 1000px) {
.main {
display: flex;
justify-content: center;
align-items: center;
width: 33.3%;
height: 250px;
max-width: 33.3%;
}
body {
padding: 5px;
}
}
@media screen and (max-width: 756px) {
.main {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 250px;
max-width: 50%;
}
body {
padding: 8px;
}
}
@media screen and (max-width: 500px) {
body {
padding: 3px;
}
}
@media screen and (max-width: 350px) {
body {
padding: 0px;
}
}
效果图
最新文章
- 特殊文件: /dev/null和/dev/tty
- AMD高级应用(翻译)
- ThinkCMF-首页Nav部分菜单配置详解
- noi题库(noi.openjudge.cn) 1.7编程基础之字符串T31——T35
- scala + intellij idea 环境搭建及编译、打包
- PMP 第十章 项目沟通管理
- torch7安装
- NOI2014 全国互测Round2
- 分享SVN的钩子代码[借鉴学习]pre-commit-post 钩子
- HDU4742----Pinball Game 3D(三维LIS、CDQ分治)
- HttpContext.Current.Cache 过期时间
- 采用HTML5之";data-";机制自由提供数据
- float和position
- Oracle创建表sql语句
- mybatis教程6(逆向工程)
- Thymeleaf使用bootstrap及其bootstrap相关插件(二)
- Spark应用HanLP对中文语料进行文本挖掘--聚类详解教程
- 【xsy2272】 与运算 状压dp
- android View未渲染时获得高度
- GDI+ DrawString字间距问题