首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

CSS杂谈

本文没有什么高深的东西,就是写几个CSS样式经常遇见的东西,可能大部分都已经知道怎么解决了,当做小白文浏览就好。...当然有人会问,如果只是这样直接用p元素不一样,我想说的是当你遇见之后你就知道了。包括图片等也可以用这种方法居中。...这边简单再说一下,可以使用padding、border、overflow、float、position等。...实在需要调整的话就使用padding,input设定小点的高度,然后设置padding。 滚动条大小是可以设置的,还可以设置一些简单的样式,只不过都要加前缀等。...CSS能做的其实太多了,只不过我们习惯了用JS去实现,但是CSS实现比JS实现在性能上更优,希望都能慢慢积累。 (完)

77720

JS简单页面交互实战 - 点击按钮实现求和功能

上一期堡堡大家讲解了简单的页面交互效果 - 点击块,让块动起来,让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块,让块动起来,可以回复“交互”到“HTML5学堂”公众号。...本文内容概要 1 点击按钮实现求和的效果图 2 实现页面交互效果的思路 3 用自己的语言进行功能的描述 4 仔细查看功能,并根据基本功能构建结构样式 5 细化功能描述并转换为JS语言或命令 6 JS具体编码以及代码优化...2 实现页面交互效果的思路 ——>用自己的语言进行功能的描述 ——>仔细查看功能,并根据基本功能构建结构样式 ——>细化功能描述并转换为JS语言或命令 ——>JS具体编码以及代码优化,回顾成品代码 Tips...3 第二步:仔细查看功能,并根据基本功能构建结构样式 标签选择分析: 在功能描述中“将两个文本框中输入的数字进行和运算”,可以让用户提交数据的标签也只能是表单元素,在这边明显是input元素; 为了优化...(也可以使用其它按钮); 在功能描述中“和的结果显示在‘求和结果’的后面”,为了后期JS方便的操作,最终的求和结果显示在em标签里面; 根据功能描述搭建的结构与样式 <!

17.5K80

Web APIs第一天

Web API 基本认知 就是使用 JS 去操作 html 和浏览器 分类:DOM (文档对象模型)、BOM(浏览器对象模型) 2....querySelectorAll() querySelector() 方法能直接操作修改? 可以 querySelectorAll() 方法能直接修改? 如果不能可以怎么做到修改?...不可以, 只能通过遍历的方式一次里面的元素做修改 2....可以通过 JS 设置/修改标签元素的样式属性 比如通过 轮播图小圆点自动更换颜色样式 点击按钮可以滚动图片,这是移动的图片的位置 left 等等 1....通过 style 属性操作CSS 修改样式通过style属性引出 如果属性有-连接符,需要转换为小驼峰命名法 赋值的时候,需要的时候不要忘记css单位 因为我们是样式属性,一定别忘记,大部分数字后面都需要单位

1.7K30

动手练一练,用纯 CSS 制作一款侧滑显示留言面板的网页组件

不可否认 CSS 总让一些人找不到感觉,其实学好 CSS 真的没有太多的捷径,和JS 编程一样,要同等重视对待,不要因为简单而忽视,要多看和多练,因为现在的 CSS 不再是以前的 CSS 啦。...你也许会说这个不简单,使用 JQ 就能轻松实现,但是我想说的是,为了网站的性能,能用 CSS 实现的尽量不要用 JS ,因为现在CSS已足够强大。...这个特性是我们实现这个案例的技巧之一,再结合 CSS checkbox 的伪类选择器进行留言面板的显示与隐藏,这样我们就可以摆脱 JS 来实现这个案例。...,不用担心,后面我们来进行美化: 二、定义基础的样式 现在我们开始添加一些基础的 CSS 的样式,这里我们用到了 CSS 自定义变量,方便我们全局修改,还有一些 reset 规则,和表单的基础规则样式...今天的内容就和大家分享到这里,感谢你的阅读,如果你喜欢我的分享,麻烦个关注、点赞转发哦,你的支持,就是我分享的动力,后续会持续分享 CSS 常用案例和技巧,欢迎持续关注。

81910

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

-webkit-appearance: none; border-radius: 0 5. placeholder元素样式的修改 input::-webkit-input-placeholder{color...当输入框消失时, fixed元素并没有随着输入框的消失而回到底部,这是因为整个视窗的高度还保持在 减去键盘的 高度,需要手动去触发让视窗高度回到正常,然后试了很多方法都没成功,后来的方案是输入框消失时页面隐形的很大的... input的宽度超出了屏幕,这时可对 input一个属性 box-sizing:border-box 关于 box-sizing:border-box,此属性是把边框的宽度和 padding包含在盒子的高宽中..." 同时,由于原生的样式不好看,可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。...9.元素:active伪类时,如果要求高,兼容性好的话,就得用js监控touchstart然后相应的class $(document).on("touchstart", function(e) {

3.6K40

动手练一练,用纯 CSS 制作一款侧滑显示留言面板的网页组件

其实学好CSS真的没有太多捷径,和JS编程一样,要重视对待,要多看和多练,因为现在的CSS不再是以前的CSS啦。...你也许会说这个不简单,使用JQ就能轻松实现,但是我想说的,为了网站的性能,能用CSS实现的尽量不要用JS,因为现在CSS已足够强大。...这个特性是我们实现这个案例的技巧之一,再结合 CSS checkbox 的伪类选择器进行留言面板的显示与隐藏,这样我们就可以摆脱 JS 来实现这个案例。...最终完成的效果,大家可以点击以下网址进行在线体验: https://www.qianduandaren.com/demo/feedback/ 今天的内容就和大家分享到这里,感谢你的阅读,如果你喜欢我的分享,麻烦个关注...、点赞转发哦,你的支持,就是我分享的动力,后续会持续分享 CSS 常用案例和技巧,欢迎持续关注。

93200

小程序换肤

但是大家有考虑过小程序端的换肤?今天我们就来聊一聊小程序的换肤。 ? 前言 有这么一句老话说得好“人靠衣装佛靠金装”,应用的UI风格的重要性犹如一个人的装扮风格。...但是大家有考虑过小程序端的换肤?!! 可以看看 Elementui 换肤 Demo:https://elementui.github.io/theme-preview/#/zh-CN。...如果有线上多套皮肤的需求,则采用传统前端的多套CSS皮肤方案更改类名的方式。 针对动态换肤,后端接口返回色值字段,前端通过 内联 方式对页面元素进行色值设置。..."{{ setStyle(['color', 'border-color'], theme) }}"> setStyle(['color', 'border-color']) view> <input...以上只是大家提供一下一些解决思路,如果大家有更好的方案的话欢迎留言。

1.9K20
领券