html基础知识

1、文字阴影代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: blue;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);

        }
    </style>
</head>

<body>
    <div>
        Hellow World
    </div>
</body>

</html>

效果图:

2、有序列表的理解

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有序列表</title>
    <style>
        body {
            font-family: "Arial, sans-serif";
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        h1 {
            text-align: center;
            margin-top: 20px;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }
        li {
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin: 10px;
            padding: 10px;
            display: inline-block;
        }
        dd {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>销量排行榜</h1>
    <ul>
        <li>
            <dd>地区: 北京</dd>
            <dd>性别: 男</dd>
            <dd>年龄: 30</dd>
            <dd>学历: 本科</dd>
            <dd>单位: 公司A</dd>
        </li>
        <li>
            <dd>地区: 上海</dd>
            <dd>性别: 女</dd>
            <dd>年龄: 25</dd>
            <dd>学历: 硕士</dd>
            <dd>单位: 公司B</dd>
        </li>
        <li>
            <dd>地区: 广州</dd>
            <dd>性别: 男</dd>
            <dd>年龄: 35</dd>
            <dd>学历: 大专</dd>
            <dd>单位: 公司C</dd>
        </li>
    </ul>
</body>
</html>

效果图:

3、表格

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
    <style>
        body {
            font-family: "Arial, sans-serif";
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            background-size: cover;
        }
        h1 {
            text-align: center;
            color: #333;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            padding-top: 20px;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin: 20px auto;
            width: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        li {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            transition: background-color 0.3s ease;
        }
        li:last-child {
            border-bottom: none;
        }
        dd {
            font-weight: bold;
        }
        li:hover {
            background-color: #f9f9f9;
        }
        input {
            margin: 10px 20px;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>销量排行榜</h1>
    <input type="text" id="searchInput" οnkeyup="search()" placeholder="输入关键词进行筛选">
    <ul id="salesList">
        <li>
            <dd>地区</dd>
            <dd>性别</dd>
            <dd>年龄</dd>
            <dd>学历</dd>
            <dd>单位</dd>
        </li>
        <li>
            <dd>北京</dd>
            <dd>男</dd>
            <dd>30</dd>
            <dd>本科</dd>
            <dd>公司A</dd>
        </li>
        <li>
            <dd>上海</dd>
            <dd>女</dd>
            <dd>28</dd>
            <dd>硕士</dd>
            <dd>公司B</dd>
        </li>
        <li>
            <dd>广州</dd>
            <dd>男</dd>
            <dd>35</dd>
            <dd>本科</dd>
            <dd>公司C</dd>
        </li>
    </ul>

    <script>
        function search() {
            var input, filter, ul, li, dd, i, txtValue;
            input = document.getElementById('searchInput');
            filter = input.value.toUpperCase();
            ul = document.getElementById('salesList');
            li = ul.getElementsByTagName('li');
            for (i = 0; i < li.length; i++) {
                dd = li[i].getElementsByTagName('dd');
                for (var j = 0; j < dd.length; j++) {
                    txtValue = dd[j].textContent || dd[j].innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                        break;
                    } else {
                        li[i].style.display = "none";
                    }
                }
            }
        }
    </script>
</body>
</html>

结果图:

4、下拉表单

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉表单</title>
    <style>
        body {
            font-family: "Arial, sans-serif";
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        select {
            padding: 10px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            background-color: #f9f9f9;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="%231e1e1e" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px top 50%;
            background-size: 20px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        select:hover {
            background-color: #e9e9e9;
        }
        select:focus {
            outline: none;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
</body>
</html>

效果图:

5、模仿csdn里新闻详情页面

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       /* 设置全局样式 */
       body {
        font-family: "Arial, sans-serif";
        background-color: #f8f9fa;
        color: #212529;
        margin: 0;
        padding: 0;
       }
       
       /* 设置头部样式 */
       .header {
        background-color: #007bff;
        color: #fff;
        padding: 10px;
        text-align: center;
       }
       
       /* 设置新闻列表样式 */
       .news-list {
        margin: 20px 0;
       }
       
       .news-list li {
        list-style: none;
        margin-bottom: 20px;
       }
       
       .news-list li a {
        display: block;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        color: #212529;
        text-decoration: none;
       }
       
       .news-list li a:hover {
        background-color: #007bff;
        color: #fff;
        transition: background-color 0.3s ease-in-out;
       }
       
       /* 设置新闻详情样式 */
       .news-detail {
        margin: 20px 0;
       }
       
       .news-detail h2 {
        font-size: 24px;
        font-weight: bold;
        margin-top: 0;
       }
       
       .news-detail p {
        font-size: 16px;
        line-height: 1.5;
        margin-top: 0;
       }
       
       /* 设置搜索样式 */
       .search-form {
        margin-top: 20px;
       }
       
       .search-form input[type="text"] {
        padding: 10px;
        border-radius: 5px;
        border: none;
        background-color: #f8f9fa;
        color: #212529;
        margin-right: 10px;
       }
       
       .search-form button[type="submit"] {
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px;
       }
       
       /* 设置响应式样式 */
       .container {
        max-width: 800px;
        margin: 0 auto;
       }
       
       @media (max-width: 768px) {
        .container {
           max-width: 400px;
        }
       }
    </style>
</head>
<body>
       <h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
       <div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>  
        <input type="text" value="请输入查询条件..." class="search">  <button class="btn">搜索</button>
    </div>
        <hr> 
        <p>中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
        
        <h4>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h4>
        <p class="pic">
            <img src="images/pic.jpeg" alt="">
        </p>
        <p>今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。</p>
        
        
        
        <p>在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
        
        <h4>明日热度再升级!京津冀携手冲击38℃+</h4>
        <p>中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
        
       <p> 不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</p>
        
       <p class="footer"> 本文来源:中国天气网 责任编辑:刘京_NO5631</p>
</body>
</html>

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/220893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 工作开发小技巧

一、汇总 ​ 本博客&#xff0c;记录了一些Vue在日常开发工作中比较实用的小技巧&#xff0c;后续会陆续添加更新。 ​ 1、利用Sass的:global定义全局样式。 ​ 2、在<style>内部使用v-bind给CSS属性绑定属性值。 ​ 3、父子组件传值时&#xff0c;使用.sync修饰符后…

#HarmonyOS:访问应用资源--系统资源

访问应用资源 在工程中&#xff0c;通过"$r(‘app.type.name’)"的形式引用应用资源。app代表是应用内resources目录中定义的资源&#xff1b;type代表资源类型&#xff08;或资源的存放位置&#xff09;&#xff0c;可以取“color”、“float”、“string”、“plu…

cgteamwork与shotgrid对比

最近有项目接触使用并二开cgteamwork&#xff0c; 也重新认识了cgteamwork&#xff0c;感受到国产软件的强大&#xff0c;国内中小CG公司的首选&#xff0c;原因&#xff1a; 1 上手容易&#xff0c;不会的有售前工程师教&#xff0c;他们全国各地城市到处跑。 感概业务的强大…

Linux: 查看服务器的CPU信息

在linux服务器环境下&#xff0c;可以使用cat /proc/cpuinfo命令查看当前CPU的核数等信息。 cat /proc/cpuinfo 字段解析 /proc/cpuinfo 是一个特殊的文件&#xff0c;在 Linux 系统中提供有关 CPU 的详细信息。它实际上是一个伪文件系统中的文件&#xff0c;通过它可以获取到…

智能优化算法应用:基于生物地理学算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于生物地理学算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于生物地理学算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.生物地理学算法4.实验参数设定5.算法…

Visual studio+Qt开发环境搭建以及注意事项和打开qt的.pro项目

下载qt-然后安装5.14.2_msvc2017 不知道安装那个就全选5.14.2的父级按钮 https://download.qt.io/archive/qt/5.14/5.14.2/ 安装Visual studio,下载直接下一步就行 配置Visual studio的qt环境 在线安装-重启Visual studio会自动安装 离线安装-关闭Visual studio点击安装 关闭…

c++向线程函数传递参数及编译错误排查

c向线程函数传递参数及编译错误排查 普通传递 void func(int a) {cout << "a " << a << endl; }int main() {thread t(func, 1); // 第一个是函数名字&#xff0c;第二个函数的参数t.join(); // 注意&#xff0c;不写join会报core dumped }当传…

find_package 和 find_library的区别

背景 经常看CMakeLists.txt中有find_package和find_library&#xff0c;有时候没留意以为都一样&#xff0c;其实二者差距比较大&#xff0c;下面简单记录一下。 find_package find_package(NAME), 这段代码的本质就是在找一个NAME.cmake这个文件&#xff0c;一般在安装库的…

在Java中,为什么在lambda表达式中访问局部变量时,必须将其声明为final或等效的原因是?

lambda表达式实际上是对该变量的一个拷贝而不是引用。 这样做有几个原因&#xff1a; 线程安全性&#xff1a;当一个lambda表达式被创建并传递给另一个线程时&#xff0c;它可能在另一个线程上执行。如果在lambda表达式中访问非final的局部变量&#xff0c;并且该变量在执行过…

桂电|《操作系统》实验一:UNIX/LINUX及其使用环境(实验报告)

桂林电子科技大学2023-2024学年 第 一 学期 操作系统A 实验报告 实验名称 实验一 UNIX/LINUX及其使用环境 实验指导老师&#xff1a; 成绩 院 系 计算机与信息安全学院 专业 计算机科学与技术(卓越工程) 学 号 姓名 课内序…

Docker助力前端开发,轻松打造高效应用

https://docs.docker.com/engine/reference/builder/ 构建前端镜像 在开发和部署前端应用程序时&#xff0c;使用Docker可以提供一个简便而可靠的方式来打包、分发和运行应用程序。 1. 创建Dockerfile 首先&#xff0c;我们需要创建一个Dockerfile&#xff0c;该文件用于定义…

Spring Boot+FreeMarker=打造高效Web应用

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Spring BootFreeMarker的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一. FreeMarker是什么 二…

【点云异常点检测】MVTec AD数据集介绍

文章目录 一、简介二、每种类型模型个数 一、简介 MVTec AD&#xff08;MVTec Anomaly Detection&#xff09;数据集是用于异常检测的计算机视觉数据集。该数据集包含来自工业生产中不同材料和产品的图像&#xff0c;包括玻璃、塑料、纺织品等。每个类别都包含正常样本和异常样…

Webservice--HTTP,SOAP协议区别

1.HTTP&#xff0c;SOAP协议区别及联系 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;和SOAP&#xff08;Simple Object Access Protocol&#xff09;是 WebService 技术中的两个不同协议&#xff0c;以下区别和联系&#xff1a; 区别&#xff1a; 技术目标&…

本地连锁门店经营可以借助系统实现哪些功能?

不少的连锁门店目前还是很基础的ERPPOS收银&#xff0c;其他的还是走传统的手工管理&#xff0c;大多连锁老板知道借助信息化系统可以帮助门店实现精细化管理&#xff0c;提高运营效率&#xff0c;降低成本&#xff0c;增强竞争力&#xff0c;但不知道怎么去做&#xff0c;能做…

每日汇评:黄金需要突破2050美元的供应区域才能延续复苏

周四早间&#xff0c;金价接近每盎司2,030美元&#xff0c;创下6天来的最高水平&#xff1b; 美联储确认鸽派政策转向&#xff0c;美元和美国国债收益率双双下挫&#xff1b; 英国央行和欧洲央行2023年的最终政策公告可能会进一步推高金价&#xff1b; 随着投资者重新评估美联储…

2020年第九届数学建模国际赛小美赛C题亚马逊野火解题全过程文档及程序

2020年第九届数学建模国际赛小美赛 C题 亚马逊野火 原题再现&#xff1a; 野火是指发生在乡村或荒野地区的可燃植被中的任何不受控制的火灾。这样的环境过程对人类生活有着重大的影响。因此&#xff0c;对这一现象进行建模&#xff0c;特别是对其空间发生和扩展进行建模&…

0x13 链表与邻接表

0x13 链表与邻接表 数组是一种支持随机访问&#xff0c;但不支持在任意位置插入和删除元素的数据结构。与之相对应&#xff0c;链表支持在任意位置插入或删除元素&#xff0c;但只能按顺序依次访问其中元素。我们可以使用一个struct来表示链表的节点&#xff0c;其中可以存储任…

数据标注常用的ChatGPT通用提示词模板

数据集理解&#xff1a;如何理解待标注的数据集&#xff1f; 标注规范制定&#xff1a;如何制定数据标注的规范&#xff1f; 标注工具选择&#xff1a;如何选择合适的数据标注工具&#xff1f; 数据预处理&#xff1a;如何对待标注数据进行预处理&#xff1f; 数据标注质量…

《师兄啊师兄》第二季开播 李长寿渡劫归来扬名四海

看新国风&#xff0c;上优酷动漫&#xff01;由优酷出品&#xff0c;玄机科技制作&#xff0c;改编自阅文集团旗下起点读书小说《我师兄实在太稳健了》&#xff08;作者&#xff1a;言归正传&#xff09;的修仙喜剧动画《师兄啊师兄》第二季《海神扬名篇》于今日10:00正式回归。…