手动做一个信息列表-Date0414

最新推荐文章于 2024-10-12 11:30:07 发布
最新推荐文章于 2024-10-12 11:30:07 发布
阅读量130 收藏
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43988365/article/details/105531185
版权

在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>

            * {
                padding: 0;
                margin: 0;
            }

            /*设置文字大小以及样式*/
            body {
                font: 12px/1 宋体;
            }

            .outer {
                /*background-color: skyblue;*/
                width: 300px;
                /*height: 640px;*/

                margin: 20px auto;
            }

            .title {
                /**
                设置上边框和高度
                 */
                border-top: 2px solid green;
                height: 36px;

                background-color: darkgray;
                /*设置title的行高*/
                line-height: 36px;
                /*指定内边距*/
                padding: 0 16px 0 22px;


            }

            .title a {
                float: right;
                color: red;
            }

            .title h3 {
                font: 16px/36px "微软雅黑";
            }

            .content {
                border: 1px solid #deddd9;
                padding: 0 20px 0 28px;
            }

            /*设置内容中的超链接*/
            .content a {
                color: black;
                text-decoration: none;
                font-size: 12px;
            }

            /*设置ul样式*/
            .content ul {
                list-style: none;
                /*为ul设置下边框*/
                border-bottom: 1px dashed #deddd9;
            }

            .content .red {
                color: red;
                font-weight: bold;
            }

            .content .right {
                float: right;
            }

            /*给h3指定上下外边距*/
            .content h3 {
                margin: 14px 0 16px 0;
            }

            .content li {
                margin: 14px 0 14px 0;
            }

            .content .no-border {
                border-bottom: none;
            }

            .content a:hover {
                color: blue;
            }
        </style>

    </head>
    <body>
        <!--创建一个外层div包括整个内容-->
        <div class="outer">

            <!--创建头部信息-->
            <div class="title">
                <a href="#">面授开班计划</a>
                <h3>近期开班</h3>
            </div>

            <!--创建主要内容-->
            <div class="content">
                <h3><a href="#">Java高级工程师 - 全程就业班</a></h3>
                <ul>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(北京)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(上海)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(深圳)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span>2020-03-16(北京)</span></a>
                        <a href="#" class="right"><span>开班盛况</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span>2020-03-16(深圳)</span></a>
                        <a href="#" class="right"><span>开班盛况</span></a>
                    </li>
                </ul>

                <h3><a href="#">大数据大神班</a></h3>
                <ul>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(北京)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(上海)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(深圳)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span>2020-03-16(北京)</span></a>
                        <a href="#" class="right"><span>开班盛况</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span>2020-03-16(深圳)</span></a>
                        <a href="#" class="right"><span>开班盛况</span></a>
                    </li>
                </ul>
                <h3><a href="#">HTML5+CSS</a></h3>
                <ul class="no-border">
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(北京)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(上海)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span class="red">2020-04-20(深圳)</span></a>
                        <a href="#" class="right"><span class="red">预约报名</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span>2020-03-16(北京)</span></a>
                        <a href="#" class="right"><span>开班盛况</span></a>
                    </li>
                    <li>
                        <a href="#">开班时间：<span>2020-03-16(深圳)</span></a>
                        <a href="#" class="right"><span>开班盛况</span></a>
                    </li>
                </ul>
            </div>
        </div>


    </body>
</html>

成果如下：
在这里插入图片描述

AKATian7
关注
v-date-picker
03-29
这将启动一个本地服务器，并开启热模块替换（Hot Module Replacement，HMR），让你在代码修改后无需手动刷新页面就能看到更新。 4. **生产构建**：当你准备部署应用时，运行`yarn build`来编译并最小化项目代码，使...
intl-date-time:Laravel Nova 的国际日期时间
05-29
composer require techouse/intl-date-time 用法 API 改编自 。 该模块本身提供了一些可选配置： 语言环境-可选-设置模块的语言环境。 如果你不这样做，它会自动使用你的应用程序的config('app.locale') 。 如果您...
react-split-date-input:可重用的分割日期输入 React 组件
07-04
React Split Date Input 是一个基于React的可重用组件，它为用户提供了一种方便的方式来输入日期，将日期的年、月、日部分分开显示，从而提高输入的清晰度和准确性。这个组件采用MIT许可证，允许自由使用、修改和...
ember-date-components：一个Ember加载项，它提供基于Ember的纯日期选择器组件
02-04
一个Ember插件，提供基于Ember的纯日期选择器组件。 兼容性 Ember.js v3.13或更高版本 Ember CLI v2.13或更高版本 Node.js v10或更高版本 安装 ember install ember-moment这是您需要手动安装的依赖项 ember ...
RNC-date-picker
03-27
转到node_modules react-native-date-picker-custom RNDatePickerCustom.xcodeproj react-native-date-picker-custom并添加RNDatePickerCustom.xcodeproj 在XCode的项目导航器中，选择您的项目。 将...
Go Gin 框架与 HTML 模板学习笔记
程序媛平平无奇的一天
10-09 862
Gin是 Go 语言中常用的高性能轻量级 HTTP Web 框架，适合快速开发 RESTful API 和 Web 应用。Gin 支持 HTML 模板渲染，基于 Go 标准库，提供了安全、高效的模板功能。本文主要介绍如何在Gin中使用 HTML 模板。Gin允许你为模板注册自定义函数，来格式化或处理数据。"upper": strings.ToUpper, // 注册自定义函数})在模板中使用自定义函数：
《常见 HTML 标签和属性全解析》
一名资深Java工程师的技术分享
10-10 1185
在网页开发的世界里，HTML（超文本标记语言）就像是构建数字大厦的基石。它通过各种标签和属性来定义网页的结构、内容和样式。下面，让我们深入了解一些常见的 HTML 标签和属性。
【FastAdmin】全栈视角下的页面跳转实现：从原生html、javascrpt、php技术到jQuery、FastAdmin框架
田辛_DensinTian的专栏
10-09 795
页面跳转是Web开发中的基本操作，不同的技术栈提供了不同的实现方法。本文将详细介绍在原生JavaScript、原生HTML、原生PHP、jQuery以及FastAdmin框架中实现页面跳转的各种方法，并分析每种方法的优势、劣势和适用场景。
Chromium HTML Tags与c++接口对应关系分析
杰克东的专栏
10-11 1118
head>对应"head",},其中 == "a" 接口定义 interfaceName: "HTMLAnchorElement", 其他的也类似。查找html_tag定义只需在third_party\blink\renderer\core\html\html_tag_names.json5文件中输入对对应标签，即可找到interfaceName定义。又可以根据interfaceName定义的文件名找到blink和v8定义。
Chromium html＜img＞对应c++接口定义
杰克东的专栏
10-11 381
img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />
HTML布局元素
最新发布
GIS前端嘉欣的博客
10-12 487
接下来教大家学习HTML中常用的布局元素。HTML中的布局元素可以帮助我们更方便地实现网页的布局。正确地使用这些布局元素可以使网页的结构更清晰，并且可以更方便地对其进行样式化和布局调整。<div>元素：通常用于包装其他HTML元素以便样式化或组织内容。通常用于网页的标题或导航栏。通常用于网页的主要内容。通常用于网页的页脚。
Chromium html＜body＞对应c++接口定义
杰克东的专栏
10-11 451
<!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html> 1、html_body_element.idl中接口定义： （third_part
HTML 技巧
liuxiaoqi_123的博客
10-08 904
HTML 技巧
Chromium HTML attribute与c++接口对应关系分析
杰克东的专栏
10-11 443
访问 W3School
HTML DOM 节点
lly202406的博客
10-09 561
HTML DOM节点是HTML文档的基本构建块，包括元素节点、属性节点、文本节点等。通过HTML DOM节点操作，我们可以动态地修改HTML文档的结构和内容。掌握HTML DOM节点及其操作方法对于前端开发至关重要。
CSS高级技巧
探索软件工程的奥秘
10-09 1098
CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。（2）作用：在网页中添加简单的、颜色单一的小图标。作用：设置整个元素的透明度（包含背景和内容）（1）字体图标：展示的是图标，本质是字体。属性：transition（复合属性）属性值：过渡的属性 花费时间（s）
CSS彩虹按钮设计demo
m0_53253682的博客
10-09 681
【代码】CSS彩虹按钮设计demo。
CSS 容器查询一探究竟
潜隐-前端
10-12 730
CSS container 已经出来很久了, 你是否真的好好了解过呢? 快来看一看吧, 本文将对 CSS container 特性进行详细梳理....
【CSS】flex: 1； 的意思
小秀的博客
10-09 455
flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。
手动调用el-date-picker
07-11
你好！ 如果你在使用 Element UI 的 el-date-picker 组件，想要设置默认选中今天的日期，可以通过以下方式实现： ```html <el-date-picker v-model="date" :default-value="new Date()" /> ``` 其中，`:default-value` 属性可以接受一个 Date 对象，用于设置默认选中的日期。 希望能帮到你！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值