HTML初学者小知识2
网页内嵌
代码以及演示如下
代码
<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;
}
}
效果图
HTML初学者小知识2的更多相关文章
- HTML初学者小知识
引用js <script src="链接/js代码位置" type="text/javascript"></script> 引用css ...
- 在VC6.0下运行C语言程序,以及编程入门必备的常识类小知识!
今天给大家分享在VC6.0环境下编写C语言程序的基本步骤,为初学者打开学习C语言的第一道门.具体步骤如下(如果需要软件资源,可以留言): 1)新建工作区 依次点击 文件--新建--工作区 或是Ctrl ...
- 蓝牙Bluetooth技术小知识
蓝牙Bluetooth技术以及广泛的应用于各种设备,并将继续在物联网IoT领域担任重要角色.下面搜集整理了一些关于蓝牙技术的小知识,以备参考. 蓝牙Bluetooth技术始创于1994年,其名字来源于 ...
- HTML+CSS中的一些小知识
今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...
- iOS APP开发的小知识(分享)
亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...
- Unix系统小知识(转)
Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...
- salesforce 零基础开发入门学习(十)IDE便捷小知识
在这里介绍两个IDE的便捷开发的小知识. 一) 本地调试 由于salesforce代码只能提交以后才能调试,所以很多时候调试代码很麻烦.新版增加了一个特性:即可以在本地调试相关的代码或者查看相关代码运 ...
- Jquery:小知识;
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
- HTML小知识---Label
今天知道了一个html小知识: <input type="checkbox" id="chkVersion" /> ...
随机推荐
- pycharm相关介绍
一.settings设置 1.搜font 设置字体 2.Keymap------快捷键 二.常用快捷键 1.Ctrl + Enter:在下方新建行但不移动光标: 2.Shift + Enter:在 ...
- 什么是工业仿真?工业3D仿真有什么样的市场价值?
什么是工业仿真? 工业仿真是对实体工业的一种虚拟,它将实体工业中的各个模块转化成数据整合到一个虚拟的体系中去.这个体系会模拟现实工业作业中的每一项工作和流程,并与之实现各种交互. 工业仿真技术作为目前 ...
- HDLBits->Circuits->Arithmetic Circuitd->3-bit binary adder
Verilog实例数组 对于一个定义好的简单module,例如加法器之类,如果我们要对其进行几十次几百次的例化,并且这些例化基本都是相同的形式,那么我们肯定不能一个个的单独对其进行例化,此时我们就可以 ...
- Nginx+Keepalived+VIP漂移实现HA高可用技术之详细教程
https://www.cnblogs.com/zcc666/p/13141626.html 这个是nginx安装教程地址 https://www.cnblogs.com/zcc666/p/1313 ...
- SpringBoot之MongoDB附件操作
前言 近期自己针对附件上传进一步学习,为了弥足项目中文件上传的漏洞,保证文件上传功能的健壮性和可用性,现在我将自己在这一块的心得总结如下: 一.pom.xml依赖的引入 <dependency& ...
- ESP分区重建,解决各种引导问题
电脑装了双系统,win7和win10,每次重启都进入不同系统,郁闷至极,索性把不常用的Win7盘格式化,但依旧解决不了问题.所以有了以下方法. 1.进PE删除ESP分区(先备份). 2.新建ESP分区 ...
- day05 Java网络编程socket 与多线程
java网络编程 java.net.Socket Socket(套接字)封装了TCP协议的通讯细节,是的我们使用它可以与服务端建立网络链接,并通过 它获取两个流(一个输入一个输出),然后使用这两个流的 ...
- Solution -「Luogu 5170」类欧几里得算法
推柿子大赛了属于是. 题目要求三个柿子,不妨分别记为: \[\begin {align} f (a, b, c, n) &= \sum \limits _{i = 0} ^{n} \lfloo ...
- 求广义表深度(严5.30)--------西工大noj
#include <stdio.h> #include <stdlib.h> #include <string.h> typedef enum{ATOM, LIST ...
- dockerfile操作
简介 Dockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明. 上下文路径 如下是一个简单的基于dockerfile创建镜像的命令,我们注意到启动处理镜像名和 ...