用ul和选择器做的日历

最新推荐文章于 2022-03-20 22:35:15 发布
最新推荐文章于 2022-03-20 22:35:15 发布
阅读量204 收藏
点赞数
分类专栏： 学习记录 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yc1425869600/article/details/109709650
版权

CSS选择器 HTML5 语义化标签 布局 伪类
关键词由CSDN通过智能技术生成

一张看起来就很菜的日历
今天跟着黑马学习了CSS的选择器，分享一下

    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        
        #all {
            width: 165px;
            height: 140px;
            border: 2px solid #57ABFF;
        }
        
        span {
            color: red;
            margin-left: 1px;
        }
        
        ul {
            position: relative;
        }
        
        ul li {
            text-align: justify;
            text-justify: distribute-all-lines!;
            text-align-last: justify;
        }
        
        #all .box::before {
            content: "30";
            color: #C6C6C6;
        }
        
        #all .aox::after {
            content: "1 2 3";
            color: #C6C6C6;
        }
        
        #all .four {
            margin-left: -21px;
            position: absolute;
            background-color: #FDBB11;
            color: #fff;
            width: 20px;
            text-align: center;
        }
    </style>

内容

<body>
    <div id="all">
        <ul>
            <li><span>日</span>一二三四五<span>六</span></li>
            <hr>
            <li class="box">1 2 3 <span class="four">4</span>5 <span>6</span></li>
            <hr>
            <li><span>7</span> 8 9 10 11 12<span>13</span></li>
            <hr>
            <li><span>14</span> 15 16 17 18 19 <span>20</span></li>
            <hr>
            <li><span>21</span> 22 23 24 25 26 <span>27</span></li>
            <hr>
            <li class="aox"><span>28</span>29 30 31 </li>
            <hr>
        </ul>
    </div>
</body>

今天学习了HTML5语义化表签：

头部标签
、 、
内容标签
、
区域标签
、 、
尾部标签

CV大师杨某
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个手写日历控件，多日历展示日期相关信息，整理总结
xu2034029667的博客
03-20 698
有图有真相 几个月前写的，参考某位博主写的样式，现在不记得那位博主，隔了一段时间后再看，又花了个把小时，才明白 它的原理，如下： 显示通用的上年，上月，下年，下月四个按钮，--h4,a等标签 当然还有星期等情况也是固定不变的--一个ul li标签 同时点击这四个按钮，下面的天，跟着变化--一个ul li标签 难点是关于闰年，以及每个月天数不一致， 处理：var oDate = n...
js制作日历，获取月份内有多少天。
thirdshore的博客
12-03 1150
Document ul{ width:350px; } li{ list-style: none; width:50px; height: 50px; float:left; text-align: center; line-height:50px; font-size: 40px; font-weight: bold; font-family:
css案例学习之table tr th td ul li实现日历
weixin_30810239的博客
11-30 173
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { border-collapse: collapse; table-layout:fixed; width:780; } .month captio...
H5中使用JS实现简易日历
YZi_Angel的专栏
08-02 5988
1、this：当前发生事件的元素2、value：改变标签里的内容（给input使用） innerHTML：也改变标签里的内容（但是针对div、span等标签）3、数组的定义与使用 -定义：arr=[1,2,3] -使用：arr[0]4、字符串连接 -作用：连接两个字符串 -问题：连接中的优先级（从前往后相加）<!DOCTYPE html> <html> <he
日历效果
MJ的博客
02-13 600
一、HTML     日历                           MONTH             year             Prev Month             Next Month                                                                     日         
日期选择器
12-08
考虑到全球用户的使用习惯，日期选择器应支持多种语言和日期格式，例如从左到右的英文格式和从右到左的阿拉伯格式。 10. **响应式设计**： 日期选择器在不同屏幕尺寸和设备上应保持可用性，可能需要在移动设备上...
利用原生JavaScript实现造日历轮子实例代码
10-17
4. **获取当前日期**：`_generateTime`方法获取当前日期的年、月、日，并为后续生成日历做准备。 5. **创建星期横轴**：`_generateWeekDay`方法根据配置的一周起始日创建星期的展示列表。 6. **生成日历日期**：`_...
Vue.js创建Calendar日历效果
10-21
1. 年份和月份选择器：通过`<div class="month">`，包含两个箭头按钮（用于切换年份和月份）以及一个显示当前年和月的元素。这里使用了`@click`事件监听器来触发方法`pickPre`和`pickNext`，分别处理上一月和下一月...
原生js开发的日历插件
10-20
这些CSS选择器和属性展示了如何用CSS控制元素的布局和样式。 接下来，JavaScript部分展示了如何在用户聚焦输入框(`onfocus="currentWeek(this)"`)时动态创建日历界面。`currentWeek`函数获取输入框的位置，并在该...
精美简单的jquery日历calendar
03-27
在这个项目中，开发者巧妙地利用了jQuery的ul元素和eq选择器，简化了传统JavaScript实现日历的复杂度。 首先，我们来看核心的HTML结构。`calendar.html`文件通常会包含一个基础的HTML框架，其中有一个用于显示日历...
HTML 简单日历制作方法
xiaozhen0610的博客
06-18 7872
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑 1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>无标题文档</title> 7 <style> 8 * {margin: 0;padding: 0} .
vue移动端中实现日历效果
浩星
05-08 4981
前言： 在需要一个移动端的日历效果时，找了很多资料，这里分享下我找的两个资料，一个是使用了插件 vue-hash-calendar ，还有一个是自己封装的组件。 我这边最终实现效果： 一、vue-hash-calendar使用教程：github地址入口 1、npm装插件 cnpm i vue-hash-calendar 2、main.js中配置 // 在入口...
自己写的一个很简单的日历功能
lizhihui1987的博客
03-20 65
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":&quot
jquery选择器---id选择器，类选择器以及.css操作 /// 基本过滤选择器---用在ul li中 ）///层次选择器
ch5211314的博客
01-30 489
id择器的         类选择器的                  标签选择器的                                                 //1:通过jquery的id选择器                          //$("#hh").css("background-color","red");           
element -ul 日期选择器（日期格式化，默认值）
吴小花的博客
04-28 4930
需求：实现如下效果 1.默认展示最近三个月， 2.不能选择今天之后的日期，即不能选未来的时间 3.带快捷选项，并且快捷选项的【全部时间】开始时间为某个指定的时间如（2010年8月1日） element-ul 可以很容易实现第二，第三条需求。但是默认数据那个，要自己写。还有选全部时间，从指定日期开始，也废了我一番功夫研究。 所以，最终将研究成果整理出来。方便下次遇到同样的问题能快速解决，提升个人的开发效率。也方便其他小伙伴有同样困惑，可以快速寻得解决方案。 解决过程及代码解析 涉及2个文件（
关于CSS3中的ul，li的使用伪类选测器的总结
hl582567508的博客
07-31 4063
在CSS3的无序列表在设计样式的时候，可以使用伪类样式进行设计样式。例如： CSS3_ul练习 li:nth-child(1) { background-color: #1b6d85; } li:nth-child(2) { backgro
CSS关于选择器，用ul和li举例
bzd123a的博客
03-20 2451
// ul,li{}：设置所有ul和li元素的样式 <style> ul,li{color:red} </style> <ul><li>红色</li></ul> <ol><li>红色</li></ol> //ul li{}：只设置ul下的li元素 后代选择器，ul 里所有的 li 元素，包括 ol 里的 li ; <.
ul li实现table效果
亲亲而仁民，仁民而爱物
12-13 6613
tag 姓名 身份证号 与户主关系 阿三 3-1 13
ul和li与选择器的关系
qq_42896822的博客
08-06 1651
ul,li{ list-style: none; margin: 0; padding: 0; } ul和li是包含嵌套关系，怎么使用了并集选择器 希望有大神能解答...
js的ulli选择器
最新发布
07-27
在JavaScript中，可以使用querySelectorAll选择器来选择ul下的所有li元素。具体代码如下所示： ```javascript const liElements = document.querySelectorAll('ul li'); console.log(liElements); ``` 这段代码会返回ul下的所有li元素的集合。\[2\]\[3\] #### 引用[.reference_title] - *1* [用jquery ul li 实现select功能](https://blog.csdn.net/qq_44830441/article/details/127570030)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [JavaScript：DOM选择器](https://blog.csdn.net/xuelian3015/article/details/127455281)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值