HTML(4)

最新推荐文章于 2024-08-11 02:49:42 发布
最新推荐文章于 2024-08-11 02:49:42 发布
阅读量37 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74120587/article/details/131648178
版权

盒子模型

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding-left: 4px;
            border: 3px solid red;
            margin: 50px;
        }
    </style>

 

内边距

<style>
        div {
            width: 600px;
            height: 600px;
            background-color: pink;
            /* padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px; */
            padding: 30px;
            padding: 30px 50px;
            padding: 10px 60px 90px;
            /* 上，左右，下 */
            padding: 10px 30px 60px 90px;
            /* 上    右     下         左 */
        }
    </style>

外边距

<style>
        ul li {
            list-style: none;
            background-color: pink;
            margin-bottom: 30px;
        }

        span {
            display: inline-block;
            width: 50px;
            background-color: pink;
            margin-right: 5px;
            margin: 40px;
            margin: 40px 30px;
            margin: 40px 30px 23px;
            margin: 40px 2px 34px 40px;
        }
    </style>

外边距塌陷问题

<style>
        .father {
            width: 800px;
            height: 800px;
            background-color: aquamarine;
            /* border: 1px solid red; */
            padding: 5px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* margin-bottom: 20px; */
            overflow: hidden;
        }

        .son2 {
            margin-top: 10px;
        }

        .son3 {
            margin-top: 10px;
        }

        .son1 {
            margin-top: 300px;
        }

        /* margin塌陷问题
        父元素的第一个子元素的margin-top值会被父元素抢走
        给父元素添加边框
        overflow:hidden;  -------偏方
        */
        /* padding: 10px 20px 40px 50xp   顺时针 */
    </style>

文本溢出

<style>
        div {
            width: 800px;
            height: 800px;
            background-color: pink;
            /* overflow: auto; */
            /* overflow: hidden; */
            /* overflow: visible;s */
        }
    </style>

样式继承

<style>
        a {
            text-decoration: none;
            color: #807474;
        }

        /* div,
        div span,
        div a {
            font-size: 40px;
        } */

        div {
            font-size: 50px;
            color: #807474;
            /* padding: 13px; */
        }

        /* css样式的继承性
        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
        a链接最好在自身更改样式
         */
    </style>

解决padding影响盒子大小的问题

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 40px;
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>

flex布局

<style>
        .father {
            width: 800px;
            height: 800px;
            background-color: pink;
            display: flex;
            /* 排列方式 */
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
            flex-direction: row;
            /* 让flex布局变为多行 */
            flex-wrap: wrap;
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap; */
            /* 主轴上的布局 */
            justify-content: center;
            justify-content: end;
            justify-content: space-around;
            justify-content: space-evenly;
            justify-content: space-between;

            /* 侧轴 */
            /* align-items   单行的   align-content：多行的*/
            align-items: center;
            /* align-items: end; */
            align-items: start;

            align-content: start;
            align-content: end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: space-evenly;




        }

        .son {
            width: 170px;
            height: 200px;
            background-color: aqua;
        }
    </style>
<style>
        .father {
            display: flex;
            width: 800px;
            height: 800px;
            background-color: pink;
            justify-content: space-between;
        }

        .son {
            width: 300px;
            background-color: aqua;
        }

        .son2 {
            /* order   值越小，排列在越靠前的位置 */
            order: -3;
        }
    </style>

定位补充

<style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {

            width: 100px;
            height: 100px;
        }

        .son1 {
            position: absolute;
            /* z-index  定位中显示的优先级 */
            z-index: 5;
            top: 100px;
            left: 50px;
            background-color: aqua;

        }

        .son2 {
            position: absolute;
            z-index: 3;
            top: 110px;
            left: 80px;
            background-color: blueviolet;
        }
    </style>

浮动

<style>
        img {
            width: 100px;
            float: left;
        }
    </style>

float讲解

<style>
        .father {
            width: 1000px;
            /* height: 1000px;  */
            background-color: pink;
        }

        .son {
            float: left;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .son2 {
            background-color: blue;
            float: left;
            /* 浮动，会脱离文档流   不再保留原来位置  会造成在其下方的兄弟元素位置发生变化  */
            /* 当子元素发生浮动时，其父元素的高度发生塌陷 */

        }

        .son3 {
            width: 400px;

            background-color: black;
        }
    </style>

float问题解决方法

<style>
        /* ul { */
        /* height: 300px; */
        /* overflow: hidden; */

        /* } */

        ul li {
            /* float: left; */
            float: right;
            list-style: none;
            margin-right: 20px;

        }

        /* div {
            clear: both;
        } */
        p {
            /* clear  清楚浮动 */
            clear: both;
        }
    </style>

渐变

<style>
        div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, green, pink, yellow, red);

        }
    </style>

字体图标

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font_3931265_h8zi8uedfw8/iconfont.css">
    <script src="../font_3931265_h8zi8uedfw8/iconfont.js"></script>
    <!-- <style>
        span {
            color: pink;
        }

        .icon-a-008_huoguo {
            font-size: 400px;
        }
    </style> -->
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .icon {
            font-size: 70px;
        }
    </style>
</head>

媒体查询

<style>
        div {
            background-color: pink;
        }

        /* @media only screen and (max-width:699px) and(min-width:550px){
            div{
                background-color: pink;

            } 
        } */

        @media screen and (min-width: 900px) {
            div {
                background-color: green;
            }
        }


        @media only screen and (min-width: 320px) and (max-width: 700px) {
            div {
                background-color: blue;
            }
        }
    </style>

默认外边距

<body>
    woshinsaxnsj

    <ul>
        <li>cnidsjkjcdscndskcm</li>
    </ul>


</body>

2d转换

<style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;

        }

        .son {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 平移 */
            /* transform: translate(-40px, 40px); */
            /* transform: translateX(70px); */
            /* transform: translateY(-60px); */
            /* 旋转 */
            /* transform: rotateZ(40deg); */
            /* 复合写法  旋转永远放在最后一个 */
            /* transform: translate(100px) rotateZ(45deg); */
            /* transform: rotateZ(45deg) translate(100px); */
            /* transform: scale(1.5); */
            /* transform: scaleX(2); */
            /* transform: scaleY(2); */
            /* transform: skew(40deg); */
            /* 向右下移动100px   旋转45度    缩放1.5 */
            transform: translate(100px, 100px) scale(1.5) rotate(45deg);

        }
    </style>

3d

<style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */

        }

        .son {

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            transform: rotateX(45deg);
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            backface-visibility: hidden;
            transform-origin: bottom;
        }
    </style>

过渡

<style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */

        }

        .son {
            /* transition   谁变化给谁加 */
            transition: all 5s;

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            /* backface-visibility: hidden; */

        }

        .son:hover {
            width: 800px;
            transform: rotateX(45deg);

        }
    </style>

动画

<style>
        @keyframes myMovie {
            from {
                width: 200px;
                background-color: pink;
            }

            to {
                width: 800px;
                background-color: aqua;
            }

        }

        @keyframes myfirst {
            0% {
                width: 200px;
                background-color: pink;
            }

            20% {
                width: 400px;
                background-color: green;
            }

            80% {
                width: 800px;
                background-color: red;
            }

            100% {
                width: 1200px;
                background-color: aquamarine;
            }
        }

        div {
            width: 200px;
            height: 50px;
            background-color: aqua;
            animation: myMovie 5s infinite alternate steps(4);
            animation: myfirst 5s infinite alternate steps(400);

        }
    </style>

自律哥布林
关注
js拼接html
dai_yanxia的博客
10-09 5532
项目中我们经常需要用js来拼接html,于此同时我们也会经常拼写错误，今天就来给大家总结一下，怎么拼写才不容易出错。 1.把我们需要拼接的html先在页面里面写好 <li class="listIteam" onclick='changeId("标题")'>标题</li> 2.观察这个html内容用的是单引号（’ '）多，还是双引号(" ")多，如果用的单引号多，我们就用双引号把这段html内容括起来，同时对html里面的双引号进行转义。同理，如果用的双引号多，我们就用单引号把这
HTML 页面实现A4纸样式 显示效果
11-01
在网页设计中，有时我们需要创建一个HTML页面，使其在视觉上呈现出类似A4纸张的效果，这在制作电子手册、报告或模拟打印预览时非常有用。本篇将详细讲解如何利用HTML和CSS技术实现这样的效果。 首先，HTML...
前端学习——HTML4和HTML5设定页面语言字符集
物联网 IoT 经验分享
06-28 1万+
0.前言     本文总结如何设置网页的字符集，在多数情况下网页的字符集使用utf-8编码（曾经多使用gb2312），下面就分HTML5和HTML4说明字符集的设置。 1.HTML5 >HTML5>       【说明】 【1】 HTML5声明标签。 【2】charset="utf-8"> 设置字符集。 2.HTML4
HTML 教程（一文彻底搞懂HTML）
m0_58859743的博客
06-04 1万+
HTML 简洁明了的入门教程
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
HTML5
weixin_52957373的博客
07-20 6291
html超文本标记语言它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。.........
bs4解析html
hanyuxiyan的博客
12-01 3880
Beautiful Soup 官方文档：http://beautifulsoup.readthedocs.io/zh_CN/latest/ Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时甚至数天的工作时间. 首先在python安装位置找到S...
HTML使用html2canvas支持跨域图片按A4尺寸分页导出PDF
lin252552的博客
06-28 4779
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script> <script type="text/javascript"> function AllAreaWord() { var times...
【Web】“代码雨”纯HTML源码实现及效果
热门推荐
沙师弟专栏
05-08 20万+
【代码】【Web】“代码雨”纯HTML源码实现及效果。
html+css网页练习一
qq_52108058的博客
02-02 7236
阅读下列说明、效果图和HTML代码，进行静态网页开发。 这个某项目中的其中一个活动页，应用html和css技术完成页面的布局。项目包含主页index.html、style.css，css和img文件夹分析： 4、style.css 二、改革进展与成效管理平台页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发。 项目名称为“改革进展与成效管理平台”，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含normalize.css文件；img文件夹包含用到的图片。大
python 数据分析之 HTML文件解析
weixin_42914706的博客
02-19 1万+
HTML：是 Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言；HTTP超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。HTML文件本质上是文本文件，而普通的文本文件只能显示字符。
HTML4+HTML5中文手册.chm
01-06
HTML4+HTML5中文手册。(chm无法显示内容时需在属性中“解除锁定”)
收据模板HTML
10-31
4. **购买者信息**：可能包括姓名、地址等，可以使用`<div>`作为容器，内部嵌套`<p>`标签。 5. **商品/服务列表**：使用`<table>`标签来创建表格，包含`<tr>`（行）、`<th>`（表头）和`<td>`（数据单元格）展示商品...
圣诞树HTML原码下载
12-17
描述中提到“4种圣诞树HTML原码”，意味着这个压缩包内有四个不同的HTML文件，每个文件可能代表一种独特设计的圣诞树。这些代码可以被开发者或爱好者用来学习、参考或直接在自己的网站上使用，以增添节日气氛。另外...
网上订餐系统模板html源码
06-11
4. **购物车（Cart.html）**：显示用户选择的菜品列表，可以进行修改数量或删除操作，同时计算总价。 5. **结账页面（Checkout.html）**：用户确认订单详情并进行支付操作。由于此源码没有后端，支付功能可能仅是...
Vue中的高频内置指令：v-text、v-html、v-cloak、v-once、v-pre
最新发布
PleaSure乐事的博客
08-11 943
Vue——v-text、v-html、v-cloak、v-once、v-pre指令
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 686
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 603
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1055
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
HTML4参考手册：掌握HTML标志与属性
HTML4.0参考手册是关于HTML4网页标记语言的重要参考资料，它提供了详细的语法和属性说明，帮助开发者更好地理解和构建结构化的网页内容。在HTML4中，文档的结构和语义被精心设计，以确保跨浏览器的一致性和可访问性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值