HTML5学习——第六天

最新推荐文章于 2024-11-03 19:38:04 发布
最新推荐文章于 2024-11-03 19:38:04 发布
阅读量170 收藏
点赞数 1
文章标签： html5 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64683517/article/details/140617280
版权

1.溢出状态

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: plum;
            /* 强制在一行排列 */
            white-space: nowrap;
            /* 水平方向的溢出状态 */
            /* 默认 - 水平方向溢出 */
            overflow-x: visible;
            /* 水平方向溢出隐藏 */
            overflow-x: hidden;
            /* 水平方向无论是否溢出都显示滚动条 */
            overflow-x: scroll;
            /* 水平方向溢出显示滚动条,不溢出隐藏滚动条 */
            overflow-x: auto;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 垂直方向的溢出状态 */
            /* 默认 - 垂直方向溢出 */
            overflow-y: visible;
            /* 垂直方向溢出隐藏 */
            overflow-y: hidden;
            /* 垂直方向无论是否溢出都显示滚动条 */
            overflow-y: scroll;
            /* 垂直方向溢出显示滚动条,不溢出隐藏滚动条 */
            overflow-y: auto;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* white-space: nowrap; */
            /* 水平垂直方向的溢出状态 */
            overflow: visible;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
        }
        /* 清除滚动条 */
        .box3::-webkit-scrollbar{
            display: none;
        }
    </style>

2.溢出显示省略号

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 单行文本溢出显示省略号 */

            /* 1.文本强制在一行显示 */
            white-space: nowrap;
            /* 2.溢出隐藏 */
            overflow: hidden;
            /* 3.溢出的文本用省略号表示 */
            text-overflow: ellipsis;
        }
        p{
            width: 200px;
            /* height: 100px; */
            /* background-color: plum; */

            /* 多行文本溢出显示省略号 */

            /* 1.将当前标签设置为弹性伸缩盒子 */
            display: -webkit-box;
            /* 2.设置内容的排列方式为垂直排列 */
            -webkit-box-orient: vertical;
            /* 3.设置显示的行数 */
            -webkit-line-clamp: 1;
            /* 4.溢出隐藏 */
            overflow: hidden;
            /* 注意点:当前标签不可以设置高度,解决方法:在外围嵌套其他标签进行宽高设置 */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
        }

3.光标类型

 <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 光标类型 */
            /* 默认 - 浏览器的默认光标类型(一般情况下是箭头) */
            cursor: auto;
            /* 默认 - 电脑默认的光标类型(一般情况下是箭头) */
            cursor: default;
            /* 移动光标 */
            cursor: move;
            /* 文本光标 */
            cursor: text;
            /* 帮助光标 */
            cursor: help;
            /* 等待光标 */
            cursor: wait;
            /* 点击光标 */
            cursor: pointer;
            /* 向东/右 */
            cursor: e-resize;
            /* 向西/左 */
            cursor: w-resize;
            /* 向南/下 */
            cursor: s-resize;
            /* 向北/上 */
            cursor: n-resize;
            /* 东北/右上 */
            cursor: ne-resize;
            /* 西北/左上 */
            cursor: nw-resize;
            /* 东南/右下 */
            cursor: se-resize;
            /* 西南/左下 */
            cursor: sw-resize;
            /* 十字线光标 */
            cursor: crosshair;
            /* 外部光标路径 */
            cursor: url();


        }
    </style>

4.腾讯云小练习

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    
    <div class="header">
        <div>
            <img src="./images/设计图_03.gif" alt="">
            <ul>
                <li>最新活动</li>
                <li>产品</li>
                <li>解决方案</li>
                <li>最新活动</li>
                <li>产品</li>
                <li>解决方案</li>
                <li>最新活动</li>
                <li>产品</li>
                <li>解决方案</li>
                <li>解决方案</li>
            </ul>
        </div>
    </div>

    <div class="nav">
        <div>
            <ul>
                <li>云服务器<span>></span></li>
                <li>域名注册<span>></span></li>
                <li>网站备案<span>></span></li>
                <li>云服务器<span>></span></li>
                <li>域名注册<span>></span></li>
                <li>网站备案<span>></span></li>
                <li>云服务器<span>></span></li>
                <li>域名注册<span>></span></li>
                <li>网站备案<span>></span></li>
                <li>网站备案<span>></span></li>
            </ul>
            <img src="./images/设计图_07.gif" alt="">
        </div>
    </div>

    <h1>云从业者培训及认证</h1>
    <h2>好好学习,天天向上</h2>

    <div class="section">
        <div>
            <h3>在线课程</h3>
            <p>
                本课程专为云计算初学者、学生、个人开发者打造，购买云＋校园任意套餐可免费观看课猩视频本课猩专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套 可免 观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云＋校园任意套餐可免 观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频
            </p>
            <input type="submit" value="开始学习">
        </div>
        <img src="./images/设计图_11.gif" alt="">
    </div>

    <div class="footer">
        <div>
            <dl>
                <dt>解决方案</dt>
                <dd>视频</dd>
                <dd>游戏</dd>
                <dd>金融</dd>
                <dd>电商</dd>
                <dd>网站</dd>
                <dd>大数据</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
            </dl>
            <dl>
                <dt>解决方案</dt>
                <dd>视频</dd>
                <dd>游戏</dd>
                <dd>金融</dd>
                <dd>电商</dd>
                <dd>网站</dd>
                <dd>大数据</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
            </dl>
            <dl>
                <dt>解决方案</dt>
                <dd>视频</dd>
                <dd>游戏</dd>
                <dd>金融</dd>
                <dd>电商</dd>
                <dd>网站</dd>
                <dd>大数据</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
            </dl>
            <dl>
                <dt>解决方案</dt>
                <dd>视频</dd>
                <dd>游戏</dd>
                <dd>金融</dd>
                <dd>电商</dd>
                <dd>网站</dd>
                <dd>大数据</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
            </dl>
            <dl>
                <dt>解决方案</dt>
                <dd>视频</dd>
                <dd>游戏</dd>
                <dd>金融</dd>
                <dd>电商</dd>
                <dd>网站</dd>
                <dd>大数据</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
                <dd>人脸识别</dd>
            </dl>
            <div>
                <p>
                    Copynight © 2013 - 2020 Tencent Cloud. All Rights Reserved
                    <br>
                    腾讯云 版权所有
                </p>
                <input type="submit" value="购买咨询">
            </div>
        </div>
    </div>
</body>
</html>

css:

/* 公共样式 */
*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
b,strong{
    font-weight: normal;
}
i,em,s,del,a{
    text-decoration: none;
}

/* 通栏效果 */
.header{
    height: 40px;
    background-color: #2b303b;
}
.header>div{
    width: 1201px;
    height: 100%;
    background-color: #2b303b;
    margin: auto;
    line-height: 40px;
}
.header ul{
    float: right;
}
.header li{
    float: left;
    /* list-style: none; */
    font-size: 12px;
    color: #fff;
    padding-left: 9px;
    padding-right: 12px;
    background-image: url(./images/竖线.png);
    background-repeat: no-repeat;
    background-position: right;
}
.header img{
    vertical-align: middle;
}
.header ul>:last-child{
    background-image: url();
}

.nav{
    height: 480px;
    background-color: #181c28;
}
.nav>div{
    width: 1201px;
    height: 100%;
    background-color: plum;
    margin: auto;
}
.nav ul{
    width: 250px;
    height: 100%;
    background-color: #1b2a3f;
    float: left;
}
.nav img{
    width: calc(100% - 250px);
    height: 100%;
    float: right;
}
.nav li{
    font-size: 14px;
    color: #fff;
    padding: 0 21px;
    line-height: 40px;
}
.nav span{
    float: right;
}
.nav ul>:first-child{
    margin-top: 37px;
}

h1,h2{
    text-align: center;
    font-weight: normal;
    /* 网页的精准布局 */
    line-height: 1;
}
h1{
    /* text-align: center; */
    font-size: 23px;
    /* font-weight: 400; */
    margin-top: 45px;
}
h2{
    /* text-align: center; */
    font-size: 15px;
    /* font-weight: normal; */
    margin-top: 26px;
}

.section{
    width: 1201px;
    height: 464px;
    border: 1px solid #ccc;
    margin: auto;
    margin-top: 30px;
    /* 圆角 */
    border-radius: 10px;
    padding: 38px 50px 0;
    box-sizing: border-box;
}
.section>div{
    width: 444px;
    /* height: 200px; */
    /* background-color: aqua; */
    float: left;
}
.section>img{
    float: right;
}
.section h3{
    font-size: 25px;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
    width: 110px;
}
.section p{
    font-size: 11px;
    color: #666;
    line-height: 30px;
    margin-top: 12px;
}
.section input{
    width: 163px;
    height: 50px;
    border: 2px solid #ffa500;
    /* 透明色 */
    background-color: transparent;
    font-size: 14px;
    margin-top: 18px;
}

.footer{
    height: 396px;
    background-color: #2e3033;
    margin-top: 138px;
}
.footer>div{
    width: 1201px;
    height: 100%;
    background-color: #2e3033;
    margin: auto;
    padding-top: 30px;
    box-sizing: border-box;
}
.footer dl{
    float: left;
    width: 200px;
    color: #fff;
}
.footer dt{
    font-size: 12px;
    margin-bottom: 10px;
}
.footer dd{
    font-size: 11px;
    line-height: 20px;
}
.footer>div>div{
    width: 193px;
    /* background-color: orange; */
    float: right;
}
.footer p{
    font-size: 12px;
    color: #fff;
    line-height: 20px;
}
.footer input{
    width: 100%;
    height: 35px;
    background-color: #00a4ff;
    border: 0;
    color: #fff;
    font-size: 11px;
    margin-top: 19px;
}

结果展示 ：

Nefertari Emotional
关注
HTML5学习笔记（总结提炼版）——001
03-14
HTML5是现代网页开发的核心，它是超文本标记语言HTML的第五个主要版本，自2014年正式发布以来，已经成为了构建响应式、交互性强的网页应用的标准。本学习笔记将聚焦于HTML5的基础知识，包括其新特性、元素和最佳实践...
HTML5期末大作业：网站——个人博客
04-18
这个“HTML5期末大作业：网站——个人博客”项目显然旨在让学生掌握并实践HTML5的相关知识，通过创建一个完整的个人博客网站来提升技能。在这个项目中，我们可以探讨以下几个关键知识点： 1. **HTML5结构元素**：...
三天学会PHP——第一天
08-28
【第一天学习重点】 1. **PHP环境搭建**：学习第一天，首先需要安装PHP运行环境，通常包括PHP解释器、Web服务器（如Apache或Nginx）以及数据库（如MySQL）。通过XAMPP或WAMP等集成环境可以简化这个过程。 2. **PHP...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述...对于其他章节，如CSS和JavaScript相关的知识点没有包含在内，这部分知识需要通过学习其他章节的课后答案来补充。
HTML5教程——不错的教材
12-04
这个"HTML5教程——不错的教材"压缩包提供了一份详细的PDF教程，对于想要学习或深入了解HTML5的初学者来说，是一份非常有价值的资源。 HTML5的主要改进包括以下几个方面： 1. **语义化标签**：HTML5引入了一系列新...
【HTML5】html5开篇基础（6）
Easonmax的博客
10-30 881
该标签支持多种视频格式，并提供了一些属性和方法来控制视频的播放。对于autoplay在谷歌中不添加muted是自动播放不了的。标签也支持多种音频格式，并且提供了一些控制音频播放的属性。在学习html5和css3的基础上使我们的前端使用更高级。对于audio中controls和src是最重要的。对于video中controls和src是最重要的。在谷歌中autoplay是禁用的，用不了。在学习html5的基础上更加熟练运用前端。我们通常用MP4，这在所有游览器中通用。学习前端知识，更好的运用它。
嵌入式通信协议：UART简明学习笔记
weixin_73867577的博客
10-31 761
学习UART串口的简明学习笔记
ORB-SLAM2源码学习：ORBextractor.cc：IC_Angle 利用灰度质心法求解关键点方向角
2301_76831056的博客
11-01 666
IC_Angle 利用灰度质心法求解关键点方向角并在computeOrientation函数中被调用计算图像中所有特征点的方向。
嵌入式通信协议：MODBUS简明学习笔记
weixin_73867577的博客
11-02 221
学习Modbus的简明学习笔记
jsp web学习二(比较老的啦)
qq_52122048的博客
10-29 1075
JavaBean模式(MVC)适合开发复杂的web应用，在这种模式下，servlet负责处理用户请求，jsp负责数据显示，javabean负责封装数据。Servlet+JSP+JavaBean模式程序各个模块之间层次清晰，web开发推荐采用此种模式。一个良好的JavaWeb项目架构应该具有以上的11个包，这样显得层次分明，各个层之间的职责也很清晰明了，搭建JavaWeb项目架构时，就。
学习力体系
m0_46221544的博客
10-29 354
在一个小镇上，有一位年轻的学者小明，梦想成为一名科 学家。然而，他总是感到学习困难，知识无法长久保持。有一天，他遇到了一位智者，智者告诉他：“学习的力量能够改变命运。”小明意识到，提升学习力是实现梦想的关键，从此开始探索学习方法的旅程。通过以上方法，小明的学习能力不断提升，最后实现了自己的梦想。每个人都可以通过这些方法来加强自身的学习力，迎接更加美好的未来。怎样才能让知识长久保持？如何有效地提升学习力？
人工智能入门要学习多久？
cd_farsight的博客
10-31 288
人工智能是一个快速发展的领域，新的技术和算法不断涌现。这可能需要你定期投入时间，比如每月至少花费几个小时来跟踪最新的研究和发展。如果你是计算机科学或相关专业的学生，或者对计算机科学有较深的兴趣，可能能更快地掌握。实践项目的时间可以因项目的复杂性和范围而异，通常需要几个月的时间来完成。学习人工智能所需的时间可以根据个人的学习速度、目标和深度有所不同。这通常需要几个月的时间，具体取决于个人的数学背景。：Python是进行人工智能学习的主要语言，建议从基础开始学习，这也是一个月左右的时间可以掌握。
opencascade源码学习之HLRAlgo包 -HLRAlgo_BiPoint
汤圆
11-02 118
HLRAlgo_BiPoint类在OpenCASCADE的HLR算法中扮演重要角色，主要用于处理二维和三维数据中的边缘和面的关系。HLRAlgo_BiPoint类在OpenCASCADE中主要用于处理二维和三维数据，特别是在处理边缘和面的关系时非常有用。假设你有一个二维数据集，需要处理其中的边缘信息，你可以使用HLRAlgo_BiPoint类的方法来获取和处理这些数据。‌RgNLine()‌：处理多条线。‌OutLine()‌：处理外部线。‌IntLine()‌：处理内部线。‌Points()‌：获取点。
TS学习笔记
Seven_Ting的博客
11-01 292
安装命令第一步：新建index.html和demo.ts第二步：在index.html引入demo.ts文件第三步：运行TS的命令注意：运行命令后，会将ts文件转换成js文件如果想要实时转换运行命令。
2024运维学习路线图
分享知识、传递善意
11-03 522
了解Linux操作系统的历史、特点、发行版等基础知识。
【模型学习之路】手写+分析Transformer
wwl412095144的博客
10-29 1085
attention is all you need!
快速入门并学习uni-app
Zhao_0912的博客
10-31 764
的开发技能，并能够高效地开发跨平台应用。记住，实践是最好的老师，不断动手实践是学习的关键。通过以上步骤，你可以逐步掌握。
xilinx vitis 更换硬件平台——ZYNQ学习笔记5
最新发布
m0_69082048的博客
11-03 138
2、选择带有bit信息。1、重新生成硬件信息。4、打开更新硬件选项。5、选择新的硬件信息。6、打开系统工程界面。
2024-10-29 学习人工智能的Day17 数据结构基础
ctrey_的博客
10-29 996
数据结构是计算机科学中的一个核心概念，它是指数据的组织、管理和存储方式，以及数据元素之间的关系。数据结构通常用于允许高效的数据插入、删除和搜索操作。：数组、链表、栈、队列等。：树、二叉树、堆、图等。：哈希表。：B树、B+树等。
CSS入门与HTML5元素详解——第1天笔记
在"CSS第1天笔记"中，本课程作为前端与移动开发学院的基础课程，旨在引导学员快速入门CSS，总共涵盖6天的学习内容。第一天主要回顾了HTML基础知识，并介绍了CSS的基本概念和应用。 首先，回顾了HTML的基本元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值