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修饰符后…

cgteamwork与shotgrid对比

最近有项目接触使用并二开cgteamwork&#xff0c; 也重新认识了cgteamwork&#xff0c;感受到国产软件的强大&#xff0c;国内中小CG公司的首选&#xff0c;原因&#xff1a; 1 上手容易&#xff0c;不会的有售前工程师教&#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点击安装 关闭…

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

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

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

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

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

不少的连锁门店目前还是很基础的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;其中可以存储任…

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

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

如何性能测试中进行业务验证?

在性能测试过程中&#xff0c;验证HTTP code和响应业务code码是比较基础的&#xff0c;但是在一些业务中&#xff0c;这些参数并不能保证接口正常响应了&#xff0c;很可能返回了错误信息&#xff0c;所以这个时候对接口进行业务验证就尤其重要。下面分享一个对某个资源进行业务…

Python多线程threading的使用方法

前言 有时候&#xff0c;我们在编写Python程序时&#xff0c;会遇到比较耗时的函数方法&#xff0c;我们的需求是等这个耗时的函数执行完毕之后&#xff0c;在执行后面的程序&#xff0c;这时候就需要用到多进程。 下面我们来举一个使用多进程threading的例子 例子 import t…

Unity | AVpro的最基础使用方法(视频播放插件)

一、 AVpro的使用方法 (一)准备播放器MediaPlayer 1. AVpro的播放器是MediaPlayer&#xff0c;在Heirarchy面板里创建 2.播放器里放视频 a.把视频放到StreamingAssets文件夹下 b.你就可以在MediaPlayer里面找到这个视频 c.选中以后&#xff0c;就会变成 这里点击播放可以播放…

FET偏置控制器电路的卫星接收器LNB电路

都具有FET偏置控制器电路的卫星接收器LNB电路 芯片的描述&#xff1a;D3211是一-块用于卫星接收LNBs的专用电路&#xff0c;具有极化电压检测切换、22KHz脉冲检测切换和提供高放、本振级GaAs或HEMT FET晶体管工作点偏置等功能。D321 1内部的22K检测及切换控制由22K有源滤波器、…

RT-DETR改进《目标对象计数》多任务实验:深度集成版来了!支持自定义数据集训练自定义模型

💡该教程为改进RT-DETR专栏,属于《芒果书》📚系列,包含大量的原创改进方式🚀 💡🚀🚀🚀内含改进源代码 按步骤操作运行改进后的代码即可💡更方便的统计更多实验数据,方便写作 RT-DETR改进《目标对象计数》多任务实验:深度集成版来了!支持自定义数据集训练…

车联网助力自动驾驶发展

单车智能决策难点 芯片&#xff0c;成为自动驾驶的最大瓶颈 自动驾驶对芯片算力要求极高。要求自动驾驶处理器在每秒能够处理数百万亿次的计算&#xff1b; 自动驾驶对计算的实时性要求极高。任何一点时延&#xff0c;都有可能造成车毁人亡&#xff1b; 对低能耗有极大的…

Java并发编程基础总结

进程和线程概念 什么进程 进程是系统运行的基本单位&#xff0c;通俗的理解我们计算机启动的每一个应用程序都是一个进程。如下图所示&#xff0c;在Windows中这一个个exe文件&#xff0c;都是一个进程。而在JVM下&#xff0c;每一个启动的Main方法都可以看作一个进程。 什么…

如何用gpt改写文章 (1) 神码ai

大家好&#xff0c;今天来聊聊如何用gpt改写文章 (1)&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 如何用GPT改写文章 一、引言 随着人工智能技术的飞速发展&#xff0c;自然语言处理领域取得了重大突…

【数电笔记】54-或非门构成的基本RS触发器

目录 说明&#xff1a; 1. 电路组成 2. 逻辑功能 3. 特性表 4. 特性方程 5. 例题 6. 两种基本RS触发器的形式比 说明&#xff1a; 笔记配套视频来源&#xff1a;B站&#xff1b;本系列笔记并未记录所有章节&#xff0c;只对个人认为重要章节做了笔记&#xff1b;标题前…