阿里网站销量做不起来怎么办,有那些网站做平面设计订单,建设网站技术要求,有网站模板怎么做网站目录 预览效果分析要点响应式网格布局卡片样式#xff1a;阴影和过渡效果 代码优化希望 长短不一的邮箱地址在左右居中的同时,做到左侧文字对齐(wikijs可用)总结 欢迎关注 『前端布局样式』 专栏#xff0c;持续更新中 欢迎关注 『前端布局样式』 专栏#xff0c;持续更新中… 目录 预览效果分析要点响应式网格布局卡片样式阴影和过渡效果 代码优化希望 长短不一的邮箱地址在左右居中的同时,做到左侧文字对齐(wikijs可用)总结 欢迎关注 『前端布局样式』 专栏持续更新中 欢迎关注 『前端布局样式』 专栏持续更新中 预览效果 分析要点
响应式网格布局
.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;
}使用了 grid 布局通过 grid-template-columns 定义了响应式列布局。 auto-fill 和 minmax(300px, 1fr) 实现了在不同屏幕尺寸下的自适应布局。卡片的最小宽度为 300px而最大宽度根据可用空间动态调整。 gap: 20px 使得每个卡片之间有一定的间距提升视觉效果。
卡片样式阴影和过渡效果
.card {background-color: #fff;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, .1);padding: 20px;text-align: center;transition: transform .3s, box-shadow .3s;
}.card:hover {transform: translateY(-10px);box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}.card 类的样式设计简洁采用了白色背景和圆角border-radius: 8px来提升现代感。 box-shadow 添加了阴影效果使得卡片看起来有浮动感。 transition 属性定义了卡片的过渡效果使得卡片在鼠标悬停时出现平滑的动画效果例如向上移动和阴影加深。 代码
!DOCTYPE html
html langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title联系方式/titlestyle.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px}.card {background-color: #fff;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, .1);padding: 20px;text-align: center;transition: transform .3s, box-shadow .3s}.card:hover {transform: translateY(-10px);box-shadow: 0 6px 16px rgba(0, 0, 0, .1)}.card h2 {color: #2980b9;font-size: 20px;margin-bottom: 15px}.card p {font-size: 16px;color: #555;margin-bottom: 15px}.email-list {list-style: none;padding: 0;margin: 0}.email-list li {margin: 8px 0}.email-list li a {color: #2980b9;text-decoration: none;font-weight: 700}.email-list li a:hover {text-decoration: underline}.tip {text-align: left;text-indent: 2em;}/style
/headbodydiv classcardList!-- Plus4 Card --div classcardh2机器型号 1/h2p classtip如果您需要有关 机器型号 1 型号的售后服务请通过以下邮箱联系我们/pul classemail-listlia hrefmailto:example1domain.comexample1domain.com/a/lilia hrefmailto:example2domain.comexample2domain.com/a/li/ul/div!-- Q1 Pro Card --div classcardh2机器型号 2/h2p classtip如果您需要有关 机器型号 2 型号的支持请通过以下联系方式联系我们/pul classemail-listlia hrefmailto:example3domain.comexample3domain.com/a/lilia hrefmailto:example4domain.comexample4domain.com/a/li/ul/div!-- X-Max 3 Card --div classcardh2机器型号 3/h2p classtip对于 机器型号 3 型号的售后服务请通过以下邮箱联系我们/pul classemail-listlia hrefmailto:example5domain.comexample5domain.com/a/lilia hrefmailto:example6domain.comexample6domain.com/a/li/ul/div!-- X-Plus 3 Card --div classcardh2机器型号 4/h2p classtip如果您需要有关 机器型号 4 型号的售后服务请通过以下邮箱联系我们/pul classemail-listlia hrefmailto:example7domain.comexample7domain.com/a/lilia hrefmailto:example8domain.comexample8domain.com/a/li/ul/div!-- X-Smart 3 Card --div classcardh2机器型号 5/h2p classtip如果您需要有关 机器型号 5 型号的售后服务请通过以下邮箱联系我们/pul classemail-listlia hrefmailto:example9domain.comexample9domain.com/a/lilia hrefmailto:example10domain.comexample10domain.com/a/li/ul/div/div/body/html 优化希望 长短不一的邮箱地址在左右居中的同时,做到左侧文字对齐(wikijs可用)
wikijs本身有自带的样式,干扰了我们的ul/li/h2样式,所以用了几个!important 强制样式,如果有更好的解决办法,请评论区留言,一般情况你不需要设置这些!important 会影响性能
width: fit-content;使
的宽度根据其内容自动适应。 margin-left: auto; 和 margin-right: auto;将 居中显示在其父容器中。 这三个属性结合使用能确保 元素不会占用多余的空间并且居中显示同时每个 元素的内容从左对齐。 !DOCTYPE html
html langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title联系方式/titlestyle.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px}.card {background-color: #fff;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, .1);padding: 20px;text-align: center;transition: transform .3s, box-shadow .3s}.card:hover {transform: translateY(-10px);box-shadow: 0 6px 16px rgba(0, 0, 0, .1)}.cardTitle {color: #2980b9;font-size: 20px;margin-bottom: 15px;position: relative}.cardTitle::before {content: ;position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #000}.card p {font-size: 16px;color: #555;margin-bottom: 15px}.email-list {list-style: none;padding: 0 !important;margin: 0;width: fit-content !important;margin-left: auto;margin-right: auto}.email-list li {margin: 8px 0;color: #2980b9;text-decoration: none;font-weight: 700;text-align: left}.email-list li::before {content: none !important}.email-list li a:hover {text-decoration: underline}.tip {text-align: left;text-indent: 2em}.important {color: #e74c3c;font-weight: 700}/style
/headbodydiv classcardList!-- Plus4 Card --div classcarddiv classcardTitle支持联系方式/divp classtip如果您需要相关支持请通过以下邮箱联系我们/pul classemail-listlisupport111111111example.com/lilisupport2222example.com/li/ul/div!-- Q1 Pro Card --div classcarddiv classcardTitle支持联系方式/divp classtip如果您需要相关支持请通过以下邮箱联系我们/pul classemail-listlisupport3333example.com/lilisupport4444444444example.com/li/ul/div!-- X-Max 3 Card --div classcarddiv classcardTitle支持联系方式/divp classtip如果您需要相关支持请通过以下邮箱联系我们/pul classemail-listlisupport55555555example.com/lilisupport666example.com/li/ul/div!-- X-Plus 3 Card --div classcarddiv classcardTitle支持联系方式/divp classtip如果您需要相关支持请通过以下邮箱联系我们/pul classemail-listlisupport7example.com/lilisupport8example.com/li/ul/div!-- X-Smart 3 Card --div classcarddiv classcardTitle支持联系方式/divp classtip如果您需要相关支持请通过以下邮箱联系我们/pul classemail-listlisupport9example.com/lilisupport10example.com/li/ul/div/div/body/html
总结
大家喜欢的话给个点个关注给大家分享更多计算机专业学生的求学之路
版权声明
发现你走远了mzh原创作品转载必须标注原文链接
Copyright 2024 mzh
Crated2024-12-1 欢迎关注 『前端布局样式』 专栏持续更新中 欢迎关注 『前端布局样式』 专栏持续更新中 『未完待续』
