seo网站管理,网站建设信(信科网络),微信移动网站建设,深一网站建设招聘#x1f31f; 前言 欢迎来到我的技术小宇宙#xff01;#x1f30c; 这里不仅是我记录技术点滴的后花园#xff0c;也是我分享学习心得和项目经验的乐园。#x1f4da; 无论你是技术小白还是资深大牛#xff0c;这里总有一些内容能触动你的好奇心。#x1f50d; #x… 前言 欢迎来到我的技术小宇宙 这里不仅是我记录技术点滴的后花园也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛这里总有一些内容能触动你的好奇心。 洛可可白个人主页 个人专栏✅前端技术 ✅后端技术 个人博客洛可可白博客 代码获取bestwishes0203 封面壁纸洛可可白wallpaper 文章目录 打造精美响应式CSS日历从基础到高级样式1. 创建日历的基本结构2. 添加CSS样式3. 响应式设计4. 完善日历功能5. 全部代码 结语 往期精彩回顾 打造精美响应式CSS日历从基础到高级样式
在这篇文章中我们将学习如何使用HTML和CSS创建一个简洁而美观的日历样式。我们将从基础的日历结构开始逐步添加样式并使用CSS的媒体查询为不同屏幕尺寸进行适配。通过本教程您将掌握如何制作一个响应式的日历它不仅能够在桌面上展示也能很好地适应移动设备。 效果预览 1. 创建日历的基本结构
首先我们需要创建日历的HTML结构。日历由三个主要部分组成月份和年份的标题、星期的简称、以及日期列表。
div classmonthulli classprev❮/lili classnext❯/lili styletext-align:centerAugustbrspan stylefont-size:18px2016/span/li/ul
/divul classweekdaysliMo/liliTu/liliWe/liliTh/liliFr/liliSa/liliSu/li
/ulul classdays!-- 日期列表 --
/ul2. 添加CSS样式
接下来我们将使用CSS为日历添加样式。我们将设置基本的样式如字体、背景色、文本对齐等并使用伪类和伪元素来添加箭头图标。
/* 基础样式 */
* {box-sizing: border-box;
}ul {list-style-type: none;margin: 0;padding: 0;
}body {font-family: Verdana, sans-serif;
}/* 月份和年份样式 */
.month {padding: 70px 25px;width: 100%;background: #1abc9c;
}.month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;
}/* 星期样式 */
.weekdays {background-color: #ddd;
}.weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;
}/* 日期样式 */
.days {background: #eee;
}.days li {display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size: 12px;color: #777;
}/* 当前日期样式 */
.days li .active {padding: 5px;background: #1abc9c;color: white !important;
}3. 响应式设计
为了使日历在不同设备上都能良好展示我们将使用CSS的媒体查询来调整小屏幕设备上的布局。
media screen and (max-width: 720px) {.weekdays li,.days li {width: 13.1%;}
}media screen and (max-width: 420px) {.weekdays li,.days li {width: 12.5%;}.days li .active {padding: 2px;}
}media screen and (max-width: 290px) {.weekdays li,.days li {width: 12.2%;}
}4. 完善日历功能
document.addEventListener(DOMContentLoaded, function () {var days document.querySelectorAll(.days li span);days.forEach(function (day) {day.addEventListener(click, function () {console.log(Date clicked);// 移除其他日期的激活状态days.forEach(function (el) {el.classList.remove(active);});// 为被点击的日期添加激活状态this.classList.add(active);});});});// 1. contextmenu 可以禁用右键菜单document.addEventListener(contextmenu, function (e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener(selectstart, function (e) {e.preventDefault();})为了使日历更加实用我们可以添加一些交互功能例如点击月份和年份切换视图以及点击日期弹出事件详情。这将需要使用JavaScript来实现但在本教程中我们专注于使用CSS创建样式。
5. 全部代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS 日历样式/titlestyle* {box-sizing: border-box;}ul {list-style-type: none;}body {font-family: Verdana, sans-serif;}.month {padding: 70px 25px;width: 100%;background: #1abc9c;}.month ul {margin: 0;padding: 0;}.month ul li {color: white;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;}.month .prev {float: left;padding-top: 10px;}.month .next {float: right;padding-top: 10px;}.weekdays {margin: 0;padding: 10px 0;background-color: #ddd;}.weekdays li {display: inline-block;width: 13.6%;color: #666;text-align: center;}.days {padding: 10px 0;background: #eee;margin: 0;}.days li {list-style-type: none;display: inline-block;width: 13.6%;text-align: center;margin-bottom: 5px;font-size: 12px;color: #777;}.days li .active {padding: 5px;background: #1abc9c;color: white !important}/* Add media queries for smaller screens */media screen and (max-width:720px) {.weekdays li,.days li {width: 13.1%;}}media screen and (max-width: 420px) {.weekdays li,.days li {width: 12.5%;}.days li .active {padding: 2px;}}media screen and (max-width: 290px) {.weekdays li,.days li {width: 12.2%;}}/style
/headbodyh1 styletext-align: center;CSS 日历/h1div classmonthulli classprev❮/lili classnext❯/lili styletext-align:centerMarchbrspan stylefont-size:18px2024/span/li/ul/divul classweekdaysliMo/liliTu/liliWe/liliTh/liliFr/liliSa/liliSu/li/ulul classdayslispan1/span/lilispan2/span/lilispan3/span/lilispan4/span/lilispan5/span/lilispan6/span/lilispan7/span/lilispan8/span/lilispan9/span/lilispan classactive10/span/lilispan11/span/lilispan12/span/lilispan13/span/lilispan14/span/lilispan15/span/lilispan16/span/lilispan17/span/lilispan18/span/lilispan19/span/lilispan20/span/lilispan21/span/lilispan22/span/lilispan23/span/lilispan24/span/lilispan25/span/lilispan26/span/lilispan27/span/lilispan28/span/lilispan29/span/lilispan30/span/lilispan31/span/li/ulscriptdocument.addEventListener(DOMContentLoaded, function () {var days document.querySelectorAll(.days li span);days.forEach(function (day) {day.addEventListener(click, function () {console.log(Date clicked);// 只有当日期未被激活时才进行操作// 移除其他日期的激活状态days.forEach(function (el) {el.classList.remove(active);});// 为被点击的日期添加激活状态this.classList.add(active);});});});// 1. contextmenu 可以禁用右键菜单document.addEventListener(contextmenu, function (e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener(selectstart, function (e) {e.preventDefault();})/script
/body/html结语
通过本教程您已经学会了如何使用HTML和CSS、JavaScript创建一个基本的日历样式并使其响应式地适应不同屏幕尺寸。您可以在此基础上添加更多的功能和样式以满足您的具体需求。记得在实际项目中测试日历在不同浏览器和设备上的兼容性确保所有用户都能获得良好的体验。 如果对你有帮助点赞、收藏、关注是我更新的动力 往期精彩回顾 Ubuntu系统下C语言开发环境搭建与使用教程 748阅读 · 14点赞 · 6收藏 Vue 3响应式系统详解ref、toRefs、reactive及更多 524阅读 · 16点赞 · 12收藏 爆肝两千字掌握CSS选择器与响应式设计从基础到高级应用 842阅读 · 27点赞 · 28收藏 图文并茂在Oracle VM VirtualBox上安装Ubuntu虚拟机的详细步骤指南 1059阅读 · 36点赞 · 29收藏 在Vue中使用wangeditor创建富文本编辑器的完整指南 1106阅读 · 20点赞 · 13收藏 Vue项目中使用ECharts构建交互式中国地图的详细指南 759阅读 · 22点赞 · 10收藏 米哈游一面前端开发岗面试题你会做几道? 1236阅读 · 22点赞 · 24收藏 程序员必备开发工具、程序员必备集成开发环境IDE 912阅读 · 36点赞 · 12收藏 Linux常用操作命令和服务器硬件基础知识 887阅读 · 30点赞 · 10收藏 C语言中大小写字母如何转化 824阅读 · 31点赞 · 29收藏 主流开发语言和开发环境、程序员如何选择职业赛道 1022阅读 · 34点赞 · 16收藏
