网页内嵌

代码以及演示如下

代码

<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的更多相关文章

  1. HTML初学者小知识

    引用js <script src="链接/js代码位置" type="text/javascript"></script> 引用css ...

  2. 在VC6.0下运行C语言程序，以及编程入门必备的常识类小知识！

    今天给大家分享在VC6.0环境下编写C语言程序的基本步骤,为初学者打开学习C语言的第一道门.具体步骤如下(如果需要软件资源,可以留言): 1)新建工作区 依次点击 文件--新建--工作区 或是Ctrl ...

  3. 蓝牙Bluetooth技术小知识

    蓝牙Bluetooth技术以及广泛的应用于各种设备,并将继续在物联网IoT领域担任重要角色.下面搜集整理了一些关于蓝牙技术的小知识,以备参考. 蓝牙Bluetooth技术始创于1994年,其名字来源于 ...

  4. HTML+CSS中的一些小知识

    今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...

  5. iOS APP开发的小知识(分享）

          亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...

  6. Unix系统小知识（转）

    Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...

  7. salesforce 零基础开发入门学习（十）IDE便捷小知识

    在这里介绍两个IDE的便捷开发的小知识. 一) 本地调试 由于salesforce代码只能提交以后才能调试,所以很多时候调试代码很麻烦.新版增加了一个特性:即可以在本地调试相关的代码或者查看相关代码运 ...

  8. Jquery:小知识；

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

  9. HTML小知识---Label

    今天知道了一个html小知识: <input type="checkbox" id="chkVersion" />                 ...

随机推荐

  1. Linux切换中英文输入

    使用xshell登录Linux服务器后,输入的命令正确但是提示命令不存在,这是什么鬼. 通过移动光标可以发现两种字体的宽度不一样 解决方法 shift + 空格 进行切换

  2. python之多进程and多线程

    图文来自互联网 一.什么是进程和线程 (https://jq.qq.com/?_wv=1027&k=rX9CWKg4) 进程是分配资源的最小单位,线程是系统调度的最小单位. 当应用程序运行时最 ...

  3. meet in the middle 复习笔记

    前言 若干年前看过现在又忘了.这么简单都忘 所以今天来重新复习一下. 正题 考虑这样的问题: 给定 \(n\) 个物品的价格,你有 \(m\) 块钱,每件物品限买一次,求买东西的方案数. \(n\le ...

  4. 使用docker buildx打包发布多平台镜像

    2022-07-07 个人比较喜欢影视作品,下载了大量的剧集视频,有些文件的命名不规范,就需要重新命名,之前是用的一款 renamer 客户端软件,用起来不太爽就自己做了个 bs 架构的重命名软件并开 ...

  5. 【python】自动更新pu口袋校园活动

    [python]自动更新pu口袋校园活动 脚本目标: 1. 自动爬取pu口袋校园活动,筛选出需要的活动,此处我的筛选条件是线上活动,因为可以不用去就可以白嫖学时 2. 自动发送邮件到QQ邮箱,每次只发 ...

  6. day07 聊天室-1_集合

    聊天室(续) 实现服务端发送消息给客户端 在服务端通过Socket获取输出流,客户端获取输入流,实现服务端将消息发送给客户端. 这里让服务端直接将客户端发送过来的消息再回复给客户端来进行测试. 服务端 ...

  7. 题解 $UVA$ 11825【$Hackers$' $Crackdown$】

    本题的数学模型是:把\(\mathcal{n}\)个集合\(\mathcal{P1,P2,...,Pn}\)分成尽量多组,使得每组中所以集合的并集等于全集.这里集合\(\mathcal{Pi}\)就是 ...

  8. Neo4j应用

    CQL函数 1. 字符串函数 功能 描述 UPPER 将所有字母改为大写 LOWER 将所有字母改为小写 SUBSTRING 将获取指定范围的子字符串 REPLACE 替换一个字符串的子字符串 mat ...

  9. python在执行命令时添加环境变量或指定执行路径

    cwd: 命令的执行路径,相当于os.chdir('/home')提前切换到对应路径 env: 环境变量,某些执行路径需要添加必须的环境变量,例如fastboot依赖与adb路径下的环境变量 impo ...

  10. 题解【AtCoder - CODE FESTIVAL 2017 qual B - D - 101 to 010】

    题目:https://atcoder.jp/contests/code-festival-2017-qualb/tasks/code_festival_2017_qualb_d 题意:给一个 01 串 ...