CSS
关注
分享
扫一扫
文章平均质量分 51
但行好事wlw
踏实做人，认真做事。
展开
-
3D 旋转木马（微重点）翻转导航案例
3D transform3d效果，简单来说就是在2d的效果上加了一个z轴，相关的属性也是没有太大变化。那有哪些独有的属性呢？设置transform-style: preserve-3d; （一定要给父元素添加） 目的是保留子元素的3d效果。设置perspective: 400px; (视距) 设置这个能让我们看到的元素更加具有立体感所有的属性，例如（平移，旋转等）都多了一个z轴；翻转导航栏案例结构:<body> <ul> <li>原创 2021-11-07 13:11:11 · 371 阅读 · 0 评论 -
大数据热点图制作（微重点）
大数据热点图实现热点图结构（需要一个大盒子放地图，大盒子中间放一个中盒子放热点图，中盒子里面放四个小盒子一个是中心点不动，另外三个盒子给他们设置阴影，让他们依次动起来，酷酷的感觉）。效果图：结构：<body> <div class="map"> <div class="bigbox"> <div class="dotted"></div> <div class=原创 2021-11-06 13:47:29 · 3132 阅读 · 4 评论 -
2D效果 transform相关实例（微重点）
2D效果在前面阶段结束以后（之前的博客），进入到了移动端开发阶段，这个阶段主要是学习移动端的布局，以及CS3中2D,3D的相关知识，最近敲了几个相关2D的例子，讲讲实现的心得。相关知识：transform：translate（x,y）; 向右向下偏移，在这里有一个微重点 。 如果x,y的值设置为百分比的格式时，假如设置成了translate(50%,50%),如果浏览器中只有这一个盒子，你肯定会以为这个会显示在浏览器中央，其实不是的，这个属性是以自身的高宽为基准的，也就是自己的高的50%，宽的50原创 2021-11-06 09:17:14 · 217 阅读 · 0 评论 -
CSS3属性选择器，伪元素，伪类，伪元素清除浮动（微重点）
css3中的伪元素我们知道在属性选择器之前我们一直使用的是id，class，标签，通配符,important选择器；但是这些选择器虽好用，但是也有自身的局限性，就比如ul中有20个小li，项目效果是实现奇数显示深灰色背景，偶数li显示浅灰色背景，那么你用哪个？id?还是类？很显然都不合适，这个时候应该用css3中的伪元素，使用 标签:nth-child(2n){ 样式代码；}；来实现偶数的选择；使用标签：nth-chlid(2n+1){ 样式代码};来实现奇数li的选择。 而如果使用我们的类class选原创 2021-10-31 11:04:52 · 268 阅读 · 0 评论 -
雪碧图的使用方法&css实现矢量小三角
雪碧图的使用方法：为什么要使用雪碧图？网页想获得一张图片需要向服务器去申请，申请一次两次不是问题，但是一个网页打开的瞬间，那么多图片，申请过于频繁，于是有了一个好的想法，把需要的一些图片制作成雪碧图，也就是把许多个图片制作成一张大的图片，这样服务器只需要给他发送一次就行啦。雪碧图如何使用呢？首先知道雪碧图的原理：雪碧图是通过调节位置来获取雪碧图中某个小的图片，也就是background-position:"x轴正方向,y轴正方向";假设上图的矢量图的坐标是（200,50），大小是height:原创 2021-10-28 21:28:53 · 250 阅读 · 0 评论 -
阿里妈妈iconfont矢量图标的使用方法(超详细)
iconfont使用方法1.为什么要使用iconfont？之前我们一直使用的是雪碧图，虽然好用，但是也是有一定的限制的，比如说，你希望这个图标大一点，当然你也可以调节雪碧图的大小但是此时会出现图片不清楚的情况，那么这个时候也就体现了iconfont的好处了，它的特点：虽然显示的是图片的形式，但是本质确是字体，也就具备了font的相关属性，可以调节它的大小，等等属性，非常方便，好处聊完了，下面看看怎么运用它吧！怎么下载矢量图？阿里矢量图网站：www.iconfont.cn 不收费哦~~，当然也有国外的原创 2021-10-28 21:00:26 · 39523 阅读 · 1 评论 -
实现轮播图效果（结构样式代码）
轮播图实现方法：首先先写出基础结构与样式：设计方法：利用盒子的定位来实现，首先一个大盒子放两个小的小盒子当做转换图片的按钮，一个左边点位，一个右边定位，分别都设成top：50%，但是他们本身又有高度，所以想实现居中效果还要向上再移动自身高度的一半就可以实现居中的效果啦；对于圆角边框的设计，左边的边框就改变他的右上和右下角的圆角，改成多少呢？改成高度的一半这样就能实现是一个蛮好看的圆角，那么右边同理设置他的左边圆角即可。当然你也可以不设置圆角，看自己的需求。第二步骤就是设计下面的一个个能转换图片的点，这个原创 2021-10-28 16:14:13 · 899 阅读 · 0 评论 -
position的相关属性&微重点（父相子绝）(版心定位广告)
position定位一共有五个值：分别是：static 是静态定位,也就是标准流，默认情况（因为这个属性的效果与标准流的效果是一样的）；relative是相对定位，这个属性常常与绝对定位连用，并且作为绝对定位的父亲出现。（特点：不会脱标，也就是说即使改变了他的位置，没改变位置之前的位置是会保留的）；absolute是绝对定位，这个属性于上面的属性连用，如果给某标签设置了此属性，那么这个标签就会相对relative的标签移动，如果没有相对定位，那么绝对定位相对的就是body的位置。（特点：会脱离标准原创 2021-10-26 09:26:03 · 1088 阅读 · 0 评论 -
学成在线网页制作（详细）
项目分析如图：分为四个模块：header头部模块精品推荐模块编程入门模块数据分析师模块机器学习模块前端工程师开发模块footer模块如果仔细观察的话，第2，5，6属于一个模块，样式结构相同。同样的3，4模块相同，这样只要做出一个另外一个复制黏贴即可。详细制作先确定版心，版心的宽度，然后给他封装成类，这样方便后面每个模块的父盒子调用。初始化一些值：* { margin: 0; padding: 0;}.ul { list-style: none;原创 2021-10-25 20:54:43 · 25236 阅读 · 67 评论 -
css代码书写的时候按照什么格式书写（网页布局的思路）
CSS代码书写的格式；先写布局的相关代码：eg:display,position,float,clear,overflow,visiablity其次写本身的相关代码：eg:width,height,margin,padding,border,background;写文本相关的属性代码 eg:color,font,text-align,break-word,text-decration最后写其他属性：eg:阴影，鼠标样式，内容（content）等网页布局的思路先看网页的版心，也就是把网页缩小原创 2021-10-23 18:29:42 · 198 阅读 · 0 评论 -
浮动&清除浮动的四种方法（伪类清除法）
浮动浮动：即脱离正常的文档流，优先级提高。例如三个div盒子设置宽高都为100px;表现为：竖着排一列。那么如果设置浮动以后，就会显示到一排，也就是横着显示一排；如果只给第一个设置浮动，那么第二个盒子就会认为我上面没有盒子了，并且有位置，那么第二个盒子就会跑到第一个盒子的位置。并且被第一个盒子覆盖，因为第一个盒子设置了浮动，他的文档流是比较高的。如下图：没有任何浮动的三个盒子： 正常排列浮动以后的盒子： 横着排列成一排给第一个盒子设置浮动的情况：此时为了方便看出盒子一盖住盒子2，我给原创 2021-10-23 12:19:05 · 2097 阅读 · 0 评论 -
HTML&CSS设计小米导航栏
小米导航栏：准备工作： 把需要实现的设计图放到ps中，量取需要的宽度高度间距值；话不多说：直接上代码：<div class="box"> // 一个大盒子可以用nav，包裹相应数量的超链接。以及符号 <a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</s原创 2021-10-23 10:13:34 · 1907 阅读 · 0 评论 -
CSSshadow阴影&margin,padding分别三种综合
margin综合：用于设置盒子的外边距：综合写法：(有三种写法)：margin:520px; // 相当于一个值设置了上下左右的外边距都为520px； 结构是：上下左右都一样。margin:12px 50px; // 前面一个值是上下方向的12px，第二个值代表左右方向50px。 **结构是上下 左右**margin：10px 20px 15px; // 相当于上边距为10，左右为20，下为15.**结构是：上 左右 下**margin:10px 20px 30px 40px; /原创 2021-10-23 09:03:05 · 491 阅读 · 0 评论 -
盒子margin触发BFC的解决办法&CSS水平居中垂直居中的方式
相邻垂直块元素设置margin时会遇到合并的问题：这个有点儿像大哥和小弟的关系，谁手段高，谁是大哥，也就听谁的；如图：（原始图）：让上盒子和下盒子挨着；此时给粉盒子不想和下面的绿盒子挨着，于是设置一个向下个外边距为50pxmargin-bottom: 50px;;当绿盒子知道以后，也不想挨着粉盒子了，于是他设置了一个向上的外边距为100pxmargin-top: 100px;；那么此时他们之间的距离是150px么？如图：为什么不是150px呢？因为盒子在垂直方向设置margin会造成边距合并，原创 2021-10-22 17:48:57 · 148 阅读 · 0 评论 -
CSS基础选择器（微重点）总结
基础选择器（标签，类，id，通配符选择器）语法：标签 { 样式代码块}；<style> p { color: pink; }</style>标签选择器eg： p div span a 等等都是标签p { color: pink; //把p段落标签设置为粉红色； }类选择器类基础选择器：<style> .guo { color: pink; }</style&原创 2021-10-17 12:56:56 · 223 阅读 · 0 评论 -
CSS(字体相关知识以及css三种样式表使用方法)
css字体样式设置我们知道设置样式是逐步设置的，但是也可以复合起来，这样代码更加简洁，可阅读性强。比如字体样式。字体样式的分开属性与综合属性<style> p { font-style: italic; font-weight: 400; font-size: 2em; font-family: "华文行楷"; } </style>...原创 2021-10-18 20:37:34 · 232 阅读 · 0 评论 -
VScode&快捷使用的方式 以及css伪类选择器
vscode 快捷方式的使用创建好html文档以后，输入英文状态下的！可以直接生成HTML的基本骨架。文档输入代码格式不满意，可以直接摁alt+shift+f进行格式化文档。代码书写快捷方式：eg:想输入五个div ，div*5摁一下回车或者tab按钮可以直接生成以下代码 // div*5 生成以下代码： <div></div> <div></div> <div></div> <div>原创 2021-10-20 11:34:05 · 1355 阅读 · 0 评论 -
CSS元素显示模式(行内块)小米侧边栏
元素显示模式（块级元素，行内元素，行内块）标签本身都有自己的属性；在实际开发中，有些标签想使用其他标签的属性，怎么用呢，很简单。块，行内，行内块元素是可以随意转换的，语法：display:block; // 把元素转化为块级元素，也就具有了块级元素的属性，此时每个元素都独占一行，可以设置他的宽高，边距等；eg:侧边栏的设计display:inline-block; // 把元素转化为，行内块元素，此时可以显示在一行，且为块级元素，eg: 导航栏的设计注意事项：当转化以后也就失去了本身的属性原创 2021-10-20 22:34:01 · 425 阅读 · 0 评论 -
CSS背景background相关属性使用方法：
背景background的相关属性：background-color: antiquewhite; // 设置背景颜色 antiquwhite就是透明色。background-image: url(); // 设置背景的图片background-repeat: no-repeat; // 设置背景的图片是否重复，向哪个位置重复平铺background-attachment: fixed; // 设置背景是否跟着屏幕的滚动而滚动background-position: x原创 2021-10-20 23:30:39 · 3421 阅读 · 0 评论 -
CSS利用background设计彩虹导航栏&与hover的用法
五彩导航栏制作：项目需要的文件：十张背景图片要求：设计五个五彩导航；利用到background的知识利用hover伪元素达到切换背景的效果；创建根目录:准备十张图片：在这里就不放入那么多了；HTML结构：// 利用五个a超链接<body> <a href="#" class="one">五彩导航</a> <a href="#" class="two">五彩导航</a> <a href="#"原创 2021-10-21 16:34:46 · 1195 阅读 · 0 评论 -
CSS权重问题（继承，叠加）；
权重问题权重大小排序：继承的权重<标签<类<id<行内<!important权重具体大小继承所得的权重为0,0,0,0；标签 0.0.0.1类 0.0.1.0id 0.1.0.0行内 1.0.0.0!important 权重最高important的使用方法：在Css中 放在设置好的样式的后面p{ color:pink !important;}权重继承的问题：权重是不继承的也就是说：父元素不论是原创 2021-10-21 19:17:25 · 289 阅读 · 0 评论