百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

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年进入高中一年级的普通高中学生选科参考。学生可根据自身兴趣爱好及特长,结合选考科目要求,合理确定选考科...