当前位置： 首页 > 编程日记 > 正文

开发常用CSS

编程日记 2024-08-13 22:50:00

微信小程序开发交流qq群   581478349

   承接微信小程序开发。扫码加微信。

正文：

@keyframes -> 使 div 元素匀速向下移动  
div{animation:myanimation 5s infinite;} @keyframes myanimation {from {top:0px;}to {top:200px;}} 
注:animation ->Css3动画属性  myanimation->随便命名  infinite 可重复 ,去掉就不重复了 top可以改为宽高,或者方向 form 开始 to结束

background: linear-gradient(to bottom, #D8D8D8,#fff, #D8D8D8); 上#D8D8D8 中#fff 下#D8D8D8 的颜色渐变 
background:linear-gradient(#d0d0d0, white);颜色渐变(上到下)

-webkit-filter: grayscale(100%); filter: grayscale(100%);  滤镜 使图片变为黑白色

position: absolute;  绝对定位（相对于外面一层div的绝对定位） 

text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5);  文字阴影

box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666;   盒子阴影

position:fixed;  right: 20rpx;定位到右边  相对于浏览器窗口进行定位。 

float:right; 浮动是针对上级    clear: both;清除浮动

text-decoration: line-through 原价效果(文字中间有斜杠)

display: flex;
  justify-content: center;
  flex-direction: column-reverse; 竖向排列并且倒序,按比例居中

display: flex;
 flex-direction: column;  纵向  display: flex;  flex-direction: row;  横向

 \n空格  <hr />下划线    <br />空格   text-align: center;文本居中     

 disabled input禁用   Alt+0165 美元符号

display 属性  block，可以让行内元素表现得像块级元素一样,图片变得没有外边距  none，让生成的元素根本没有框。  
display: none;  隐藏  display: block; 显示
display: inline  使段落生出行内框  inline-block  让块级元素变为行内元素  

letter-spacing:5rpx;  字间距   
  text-align: right;  文本靠右 

text-align:center; margin:0 auto; width:200rpx;  让本盒子居中,盒子内的文字也居中   margin:0 auto;需要配合宽度一起使用

width: 200rpx; 
  align-items: center; 
  display: flex; 
  margin: 0 auto; 让盒子(包括图片)居中显示

display: flex; justify-content: space-around; 让盒子(包括图片)居中显示,但是中间会留有空白(小程序貌似不能用)

margin: 0 auto; width: 25%;
  height: 120rpx;  商品导航的效果(边距根据窗口自适应,宽度25%,会自动换行)

font-weight: bold  文本加粗  letter-spacing : 5rpx; 文字间隔

placeholder = "input提示" 

<text decode="{{true}}">&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>  text可以识别

.tl{text-align: left; ||  text-align: center;|| text-align: right; 文本对齐方式

border: 1px solid #d0d0d0;  border-radius:10rpx; 边框加圆角

display: flex;   flex-wrap:wrap  7 让弹性盒元素在必要的时候拆行

<div style="position:relative;width:100px;height:100px;">      
<img src="" alt="" /><div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">文字</div></div>   在图片右上角显示文字

  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  width:500rpx;   文本不换行并且超出宽度的文字显示省略号  

  width: 500rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  文字超出两行省略

  display: -webkit-box;
  font-size: 28rpx;
  color: #000;
  margin: 10rpx 10rpx 0 10rpx;
  text-align: left;
  line-height: 40rpx;
  word-break: break-all;
  -webkit-box-orient: 

vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;width:100%;
height: 30%;
-webkit-filter:blur(20px);
z-index: -1;
position:absolute;  虚拟背景图片


微信小程序分类导航图标的样式
导航
.big-logos {
  display: flex;
  padding-top: 10rpx;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
} 智能布局for外
.logoinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150rpx;
  height: 150rpx;
}  智能布局for内

商品
.cont {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50rpx;
  width: 100%;
}

.cont .pr {
  background: #fff;
  width: 46%;
  border: 1px solid #ededed;
  margin-left: 18rpx;
}
html分类导航图标的样式
.nav {-webkit-flex-wrap: wrap;flex-wrap: wrap;}  
.nav_list {display: inline-block;padding: 25px;width: 25%;height: 120px;}

background-image:url(../img/demo.jpg); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;   背景图片,并自适应
<marquee behavior="scroll">我是跑马灯标签</marquee>


https://www.dkcj.cn/info/14141.html

相关文章：

javascript网络_没有JavaScript的网络外观

javascript网络A Berlin-based web developer — who codes JavaScript for a living — decided to go an entire day without JavaScript.一家位于柏林的网络开发人员(为JavaScript编写代码为生)决定不使用JavaScript进行一整天的工作。 Let’s face it — in an insane wor…

编程日记2024/08/13 22:40:00

js中的各种宽高以及位置总结

在javascript中操作dom节点让其运动的时候&#xff0c;常常会涉及到各种宽高以及位置坐标等概念&#xff0c;如果不能很好地理解这些属性所代表的意义&#xff0c;就不能理解js的运动原理&#xff0c;同时&#xff0c;由于这些属性概念较多&#xff0c;加上浏览器之间 实现方式…

编程日记2024/08/13 22:30:00

关于百度编辑器UEditor在asp.net中的使用方法！

为了完成自己想要的功能效果&#xff0c;在项目中使用到了百度编辑器&#xff0c;为了搞明白&#xff0c;苦心学习查资料搞了整整一天&#xff0c;总结一下。 在asp.net 的项目中目前我觉得有两种情况&#xff0c;一种是没有使用模板页的&#xff0c;一种是使用了模板页的&…

编程日记2024/08/13 22:20:00

微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 先上效果图&#xff0c;再附上完整源码&#xff1a; 1.多张图片循环渲染后预览、保存、识别带参数二维码 <view wx:for"{{imgalist}}" class"previewimg">…

编程日记2024/08/13 22:10:00

vba编程教程视频教程_我已经完成了编程教程。 怎么办？

vba编程教程视频教程by Preethi Kasireddy通过Preethi Kasireddy 我已经完成了编程教程。 怎么办&#xff1f; (I’ve done programming tutorials. Now what?) This week’s question for my Ask Preethi series is about how to go from simply doing tutorials to the act…

编程日记2024/08/13 22:00:00

【官方文档】Nginx负载均衡学习笔记（二）负载均衡基本概念介绍

简介 负载均衡&#xff08;Server Load Balancer&#xff09;是将访问流量根据转发策略分发到后端多台 ECS 的流量分发控制服务。负载均衡可以通过流量分发扩展应用系统对外的服务能力&#xff0c;通过消除单点故障提升应用系统的可用性。 负载均衡主要有如下几个功能点&#x…

编程日记2024/08/13 21:50:00

微信小程序本地缓存

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 关于微信小程序本地缓存&#xff0c;做一下笔记&#xff0c;希望能够帮助到看到这篇分享的人 //index.js 这里是保存 var a 1 wx.setStorageSync(a, a) //logo.js 这里是取保存的…

编程日记2024/08/13 21:40:00

css 形状_在CSS形状之外思考

css 形状CSS is based off a box model. If you have an image that is a circle that you want to wrap text around, it will wrap around the images’ bounding box.CSS基于盒模型。 如果您要环绕的图像是一个圆&#xff0c;则它将环绕图像的边界框。 外型 (Shape-outside…

编程日记2024/08/13 21:30:00

js-ES6学习笔记-module（4）

1、<script>标签打开defer或async属性&#xff0c;脚本就会异步加载。渲染引擎遇到这一行命令&#xff0c;就会开始下载外部脚本&#xff0c;但不会等它下载和执行&#xff0c;而是直接执行后面的命令。 defer与async的区别是&#xff1a;前者要等到整个页面正常渲染结束…

编程日记2024/08/13 21:20:00

图像边缘检测--OpenCV之cvCanny函数

图像边缘检测--OpenCV之cvCanny函数 分类&#xff1a; C/C void cvCanny( const CvArr* image, CvArr* edges, double threshold1, double threshold2, int aperture_size3 ); image单通道输入图像.edges单通道存储边缘的输出图像threshold1第一个阈值threshold2第二个阈值aper…

编程日记2024/08/13 21:10:00

微信小程序 封装网络请求并调用

微信小程序开发交流qq群 526474645 正文&#xff1a; util.js // 网络请求 const request function(url, method, data, msg, succ, fail, com) {// 小程序顶部显示Loadingwx.showNavigationBarLoading();if (msg ! "") {wx.showLoading({title: msg})}wx.requ…

编程日记2024/08/13 21:00:00

什么是导师负责制_为什么一个导师是不够的

什么是导师负责制by Rick West由里克韦斯特(Rick West) 为什么一个导师是不够的 (Why one mentor just isn’t enough) A mentor can give career guidance and help with learning. They can teach you how to solve problems, network, and the list goes on.导师可以提供职…

编程日记2024/08/13 20:50:00

CodeForces 114B 【STL应用】

思路&#xff1a; 原来string类能sort 和 swap....太强了.... 注意&#xff1a;字典序最小输出&#xff0c;因为某个地方写挫了&#xff0c;sort了n发&#xff0c;代码挫。 #include <bits/stdc.h> using namespace std; typedef long long LL;int tol; map<string,in…

编程日记2024/08/13 20:40:00

微信小程序订单页面下拉刷新上拉分页加载

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 效果图&#xff1a; 代码&#xff1a; json代码&#xff1a; {"enablePullDownRefresh": true,"backgroundColor": "#19ad19" } js代码&#xff1a…

编程日记2024/08/13 20:30:00

从网络上获取一张图片简单的

告诉ScrollView缩放的视图&#xff0c;要设置scrollView的代理。 转载于:https://www.cnblogs.com/x1024598115/p/4182674.html

编程日记2024/08/13 20:20:00

es6 generator_让我们探索一下ES6 Generators

es6 generatorby Tiago Lopes Ferreira由Tiago Lopes Ferreira 让我们探索一下ES6 Generators (Let’s explore ES6 Generators) Generators are an implementation of iterables.生成器是可迭代对象的实现 。 The big deal about generators is that they are functions tha…

编程日记2024/08/13 20:10:00

没听说过这些，就不要说你懂并发了，three。

引言 很久没有跟大家再聊聊并发了&#xff0c;今天LZ闲来无事&#xff0c;跟大家再聊聊并发。由于时间过去的有点久&#xff0c;因此LZ就不按照常理出牌了&#xff0c;只是把自己的理解记录在此&#xff0c;如果各位猿友觉得有所收获&#xff0c;就点个推荐或者留言激励下LZ&am…

编程日记2024/08/13 20:00:00

设计模式之代理模式（Proxy Pattern）

定义&#xff1a;为其他对象提供一种代理以控制这个对象的访问&#xff0c;也叫做委托模式。 咱们比作游戏&#xff0c;通俗讲代理模式就是&#xff0c;一个主题虚基类派生出两个子类&#xff0c;一个玩家类&#xff0c;实现相关操作&#xff0c;一个是代练类&#xff0c;代替执…

编程日记2024/08/13 19:50:00

[微信小程序]给data的对象的属性赋值

有问题可以扫码加我微信&#xff0c;有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 &#xff1b; 正文&#xff1a; <view wx:for"{{leixing}}"><button class"leixing_btn {{user_infor.lx_btnitem.divingtype…

编程日记2024/08/13 19:40:00

无家可归的iPhone

by Fabrice Dubois通过Fabrice Dubois 无家可归的iPhone (Homeless iPhone) So, apparently the next iPhone won’t have a physical Home button. There’s been much speculation already about what that means for the user. The bottom area of the device, for some, w…

编程日记2024/08/13 19:30:00

Spring 自动化装配Bean

声明一张cd的接口&#xff1a; public interface CompactDisc {public abstract void play(); } 实现cd接口&#xff1a; Component("SgtPeppers") public class SgtPeppers implements CompactDisc {private String title "Sgt.Peppers Lonely Hearts Club Ba…

编程日记2024/08/13 19:20:00

js中函数,方法,事件对比区分，什么是方法，什么是函数

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; 简单的理解&#xff1a;函数是运行在本地的&#xff0c;方法是公用的。 事件是开关&#xff0c;通过某某事件触发某个函数 通常命名规范 函数的命名使用小写字母和下划线&#xff…

编程日记2024/08/13 19:10:00

笔记 JVM调优流程

待续 转载于:https://www.cnblogs.com/leeeee/p/7276287.html

编程日记2024/08/13 19:00:00

创建新的apple id_Google是新的Apple吗？

创建新的apple idby Sumit Gupta由Sumit Gupta Google是新的Apple吗&#xff1f; (Is Google the new Apple?) 随着众多设备的推出&#xff0c;谷歌试图击败苹果。 “由Google制造”会使Google更像Apple吗&#xff1f; (With the launch of numerous devices, Google is tryi…

编程日记2024/08/13 18:50:00

yeomen/bower/grunt

yeomen: npm install yo angular-in-action project npm install -g generator-angular npm install -g genrator-webapp yo angular learnangular new angular project yo webapp grunt-by-yeomen package.json npm install (执行package.json所指定的依赖包) bower: npm ins…

编程日记2024/08/13 18:40:00

Window Server 2008 R2 安装 Share Point 2013

原文地址&#xff1a;http://www.cnblogs.com/jianyus/p/3631905.html转载于:https://www.cnblogs.com/gaobing/p/4191060.html

编程日记2024/08/13 18:30:00

esp freertos_如何开始使用FreeRTOS和ESP8266

esp freertosby Denis Nuțiu丹尼斯努尤(Denis Nuțiu) 如何开始使用FreeRTOS和ESP8266 (How to get started with FreeRTOS and ESP8266) Recently, I purchased a NodeMCU from AliExpress for about $4. The reason I did this was to find out what all the fuss is about…

编程日记2024/08/13 18:20:00

[SCOI2007]修车

题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心。维修中心共有M位技术人员&#xff0c;不同的技术人员对不同的车进行维修所用的时间是不同的。现在需要安排这M位技术人员所维修的车及顺序&#xff0c;使得顾客平均等待的时间最小。 说明&#xff1a;顾客的等待时…

编程日记2024/08/13 18:10:00

[微信小程序]时间戳转日期

有问题可以扫码加我微信&#xff0c;有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 &#xff1b; 正文&#xff1a; // util.js //时间戳转换成日期时间 function js_date_time(unixtime) {var dateTime new Date(parseInt(unixtime) …

编程日记2024/08/13 18:00:01

React模式：集中式PropTypes

通过集中化PropType避免重复自己 (Avoid repeating yourself by centralizing PropTypes) There are three popular ways to handle types in React: PropTypes, TypeScript and Flow. This post is about PropTypes, which are currently the most popular.在React中有三种流行…

编程日记2024/08/13 17:50:00