6条html和css的小结
zhezhongyun 2024-12-09 19:01 49 浏览
1、list的ul的li的width一样时,
width要固定,还有高
2、制作滚动插件时,的结构
<div class=” body ”>
<div class=” prev ”></div>
<div class=” list ”> // width的值为滚动个li的宽度 或 n个里的宽度
<div class=” wrap ”> //width: 999999px;
<ul>
<li></li>
</ul>
</div>
</div>
<div class=” next ”> </div>
</div>
3、高度不一样的文字、图片垂直居中
用拥有vertical-align的属性的标签包裹<img> ,如i、sub、sub等标签
<div class=” img”>
<i> <img src=”” /><i>
</div>
css的样式:
i {
display:table-cell;
vertical-align:middle;
width: ;
height: ;
}
4、定位的图片居中,知道多个图片的高度h是一样的
<div class=” img ”>
<img >
</div>
img {
display:block;
margin:0 atuo;
position:absolute;
top:50%;
margin-top: h/2;
}
注:方法3也可以解决第四种问题
5、z-index
1. position:static; //z-indent设置是没用
2.position:relative;//z-indent的值大覆盖z-indent的值小
注:条件要在同一个父级下,若不在同一父级下
6、透明opacity和rgba( , , , )的区别
1.apacity——标签透明(考虑兼容性)
2.Rgba()——背景图片、颜色透明
切图网(qietu.com)是首家专门从事web前端开发的公司,专注we前端开发,响应式布局,webapp手机端网页制作,微信html5页面制作,bootstrap布局等,关注用户体验。
相关推荐
- AI做HTML的终极方案:一套提示词模板搞定所有应用
-
随着AI技术的飞速发展,生成HTML内容变得越来越简单。然而,每个HTML项目都需要复杂的提示词,这让很多人感到困扰。今天,我们要介绍一个万能的提示词模板,它可以帮助你快速生成各种HTML应用,包括P...
- 如何创建前端自定义主题和样式
-
引言在当今的Web开发中,用户界面的设计不仅是美观的问题,更是用户体验的关键组成部分。自定义主题和样式不仅可以让网站更具个性化,还能提高品牌的辨识度。本文将详细介绍如何使用CSS变量、预处理器(如Sa...
- 2022年了,你需要知道CSS的Calc和自定义属性
-
当大多数人想到在Web上进行计算时,他们会想到JavaScript。考虑到JavaScript是Web的主要编程语言,这是有道理的,但是如果我告诉你,你可以只用CSS进行相当复杂的计...
- 掌握这 7 个 CSS 技巧,代码效率秒提升
-
最近接了个项目,PM又来催:“登录弹窗能不能加点透明毛玻璃效果?活动标题再做点酷炫的渐变?对了,用户的反馈框能不能调整大小?”听完这要求,我脑袋直接嗡了:又想炫酷,又不想加班,这不扯嘛!正当我愁得要...
- 跟着振锁撸全栈之JAVA入门 | 创建自己的第一个网站项目
-
一、相关技术栈版本概览技术栈版本说明java≥17.0.2JDK版本springframework6.1.11JavaEE开发框架springboot3.3.2容器+MVC框架gradle8.9自动化...
- 七步教你创建个人网站
-
可以按照以下步骤来搭建自己的网站并供他人访问:1.获取域名和托管服务:首先,你需要注册一个域名(例如http://www.yourwebsite.com)。选择一个简洁、易记的域名,然后购买域名注册服...
- 前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)
-
使用CSS最困难的部分之一是处理CSS的权重值,它可以决定到底哪条规则会最终被应用,尤其是如果你想在Bootstrap这样的框架中覆盖其已有样式,更加显得麻烦。不过随着CSS层的引入,这一...
- 在 JAVASCRIPT 中创建 HTML 元素...
-
你能在JavaScript中创建一个HTML元素吗?答案是肯定的,你可以在JavaScript中创建一个元素让我们看看如何?如果你想在JavaScript中创建一个div元素——...
- 使用 HTML 创建可折叠的交互式组件,一行 JS 代码也不用写
-
如果你想创建一个可折叠的交互式组件,使用<details>元素即可,一行JavaScript也不用写。<details>组件定义了一个可折叠的容器,它的第一个元素必须...
- AI实用指南:Rules编写规则详解,从前端到后端的技术栈全覆盖
-
在AI驱动的开发时代,掌握如何与AI助手高效协作已成为工程师的必备技能。本文全面梳理了不同技术领域的AI编程规则,帮助你划定合理边界,提升开发效率。一、AI编程通用规则1.明确任务边界在使用AI辅助...
- 如何使用CSS创建高级动画,这个函数必须掌握
-
我们每天都在网上摸鱼,作为前端开发人员,网站上微妙的细节变化通过比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的,有时我们可以一些有趣的动画来留住用户。创建高...
- Qt - QSS样式表
-
1.QSS简介Qt样式表(stylesheet)是用于定制用户界面的强有力的机制,其概念、术语是收到HTML中的级联样式表(CascadingStyleSheets,CCS)启发而来,只是Qt...
- 我们放弃了 Nacos 作为配置中心,转而选择了这款神器~
-
由于Apollo概念比较多,刚开始使用比较复杂,最好先过一遍概念再动手实践尝试使用。1.1、背景随着程序功能的日益复杂,程序的配置日益增多,各种功能的开关、参数的配置、服务器的地址……对程序配置的期...
- 2023年CSS-in-JS 和 CSS Modules 谁才是最终赢家?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!最近,Emotion排名第二的维护者S...
- 河北公布2024年普通高校招生专业选考科目要求
-
近日,河北省教育考试院发布2024年拟在我省招生的普通高校招生各专业(类)选考科目要求,供2021年进入高中一年级的普通高中学生选科参考。学生可根据自身兴趣爱好及特长,结合选考科目要求,合理确定选考科...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)