Web前端CSS
关注
分享
扫一扫
杏黄的三叶草
对于爱情，只字不提
展开
-
纯html+css实现小米官网
纯html+css实现小米官网html页面css页面运行结果图要代码/代写+（QQ:2248557717）[注明来意]原创 2020-12-26 14:55:53 · 1117 阅读 · 0 评论 -
关于@font-face兼容各大浏览器的问题
由于各大浏览器所支持的字体格式不一样，因此就要写兼容的代码字体可以去网上下载，可以用第三方软件生成不同格式的字体。（网上搜在线字体转换即可）代码如下@font-face { font-family: "全新硬笔行书简"; src: url("../font/全新硬笔行书简.eot"); src: url("../font/全新硬笔行书简.eot?#iefix") ...原创 2020-05-04 13:06:57 · 378 阅读 · 0 评论 -
网页布局中图片垂直对齐方式详解(四种)
方式一参照文字的中线对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ m...原创 2020-01-31 13:47:40 · 2770 阅读 · 0 评论 -
margin负值的使用详解(用负值实现压线效果)
margin负值基本应用1.同级标签应用下margin负值对同级标签应用下margin负值时，会出现标签重叠的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <sty...原创 2020-01-31 12:34:18 · 584 阅读 · 0 评论 -
伸缩布局详解【弹性布局】(flex)以及用flex写一个伸缩导航
伸缩布局1.首先给子元素的直接父元素设置伸缩盒子display:flex;2.当父元素为伸缩盒子时，默认子元素在一行上显示3.伸缩盒子的特点：◆如果一个盒子变成为伸缩盒子，那么该盒子就具有了两条轴，一条是主轴，一条是侧轴。主轴的默认方向是水平从左向右，侧轴始终要垂直于主轴。◆子元素是按照主轴的方向显示的。设置主轴的方向/*设置主轴的方向。默认为水平从左向右row*/ ...原创 2020-01-30 22:58:29 · 412 阅读 · 0 评论 -
动画(animation)属性详解
定义动画：1.通过@keyframas+自定义动画名称{}2.在动画集中通过from和to设置动画的开始和结束状态@keyframes move{from{ opacity:0; }to{ opacity:1; }}也可以用0%代替from，100%代替to注意：◆动画集要单独定义，不能放到类样式中animation-name属性：用于定义@k...原创 2020-01-29 23:16:48 · 2825 阅读 · 0 评论 -
3D转换(3D转换实现一个正方体)
perspective属性◆该属性主要用于呈现良好的3D透视效果perspective:1000px;总结：1.该属性要给变形元素的父元素设置2.该属性不是一个必须要设置的属性3.该属性的取值不是唯一的，但是我们一般情况下将该属性的取值设置为800~1000之间平移transform:translateX(100px) translateY(100px) translateZ(1...原创 2020-01-29 18:44:42 · 541 阅读 · 0 评论 -
CSS之三角形的制作
用边框把宽高撑开，其他边设置为透明色或者背景色即可，再用position定位到任何地方去<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/cs...原创 2020-01-29 13:49:56 · 156 阅读 · 0 评论 -
CSS之2D转换(transform)
平移transform:translate(水平方向移动的距离，垂直方向移动的距离)如果省略了第二个参数，默认为0在使用translate()方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行平移transform: translate(400px,200px);总结：◆如果在translate()中设置一个值，那么代表当前元素是沿着水平方向移动，如果是正数则向右移...原创 2020-01-29 12:23:37 · 291 阅读 · 0 评论 -
过渡属性transition详解
一般transition属性设置在默认状态中。☞ 过渡属于一种特殊的动画☞ 通过一种状态向另外一种状态的改变transition-property属性：用于指定过渡效果的CSS属性的名称，其过渡效果通常在用户将鼠标移动到元素上时发生transition:none|(没有属性会获得过渡效果) all|(所有属性获得过渡效果) property(过...原创 2020-01-28 19:40:37 · 9331 阅读 · 0 评论 -
iconfont图标字体的介绍与使用
font-class引用先去iconfont.cn网站下载你所需要的图标，然后看demo说明<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" ...原创 2020-01-28 11:57:42 · 847 阅读 · 0 评论 -
Web字体(【iconfont.cn】引用在线字体)@font-face属性的使用以及字体格式详解
服务器字体的设置：✔引用在线字体。（了解）✔下载到本地使用（推荐）@font-face是CSS3新增的属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体，规则如下：@font-face{font-family:字体名称；src:字体路径；}iconfont.cn网站里面的字体只能针对当前显示的字体设置，要想设置想要的字体...原创 2020-01-27 22:43:09 · 1894 阅读 · 0 评论 -
滑动门导航以及微信导航案例
滑动门导航制作导航(使用背景图片制作)核心：1.使用背景图片。2.导航的内容区域不能设置固定宽度，一定要使用内容将导航撑开。效果如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</titl...原创 2020-01-27 19:21:53 · 330 阅读 · 0 评论 -
logo内容的移除以及精灵图的使用详解
logo内容的移除1.推荐将logo作为a标签的背景图片使用。2.推荐在logo中设置文字，但是还要将该文字移除(用户体验)3.推荐使用text-indent设置一个负数来移除logo中的内容或者：font-size: 0px; color: transparent;(颜色设置为透明色)<!DOCTYPE html><html lang="en"&...原创 2020-01-25 22:21:41 · 272 阅读 · 0 评论 -
小米案例之伪元素的使用
官网上的图片我们就只写出大概框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ ...原创 2020-01-25 20:32:19 · 148 阅读 · 0 评论 -
网页布局规避脱标流的方法以及图片垂直居中对齐的方式外加元素的隐藏方式
网页布局规避脱标流1.优先考虑标准流进行网页布局。2.然后考虑使用浮动(块级元素在一行上显示)3.最后考虑使用定位(元素压着另外一个元素)4.如果要实现模式转换，必须使用display...原创 2020-01-25 15:37:03 · 249 阅读 · 0 评论 -
定位层级关系(Z-index标签层叠)详解以及标签包含规范
定位层级关系(Z-index标签层叠)当对多个标签设置定位时，定位标签之间有可能会发生重叠，要想改变重叠的顺序，可以对定位标签应用z-index属性，取值可取正整数，负数和0，默认状况下z-index属性值为0，并且取值越大，设置该属性的定位标签在层叠标签中越居上。☞ 只有定位（静态定位除外）的元素才有层级关系☞ 通过z-index属性去设置（改变）元素的层级关系☞ 默认的z-index:...原创 2020-01-24 20:07:21 · 1859 阅读 · 0 评论 -
定位(position)详解以及其应用情况(可以取负值)【小米案例】
静态定位1.静态定位是标签的默认定位方式，即各个标签在HTML文档流中的默认位置。2.在静态定位状态下，无法通过边偏移属性(top,bottom,left,right)改变标签位置3.一般我们需要将固定定位或者绝对定位以及其他定位转化为标准流下的元素时，我们需要将该元素设置为静态定位即可。position:static;绝对定位position:absolute;left:20px...原创 2020-01-24 16:49:22 · 2324 阅读 · 0 评论 -
CSS初始化以及overflow属性详解
CSS初始化1.将页面中标签默认的样式(内外边距，文字大小，文字颜色，文字字体...)恢复到原始的状态2.将页面中标签的样式设置为统一的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&...原创 2020-01-23 19:39:45 · 452 阅读 · 0 评论 -
用CSS制作一个导航(利用float)
鼠标悬停时会有显示效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ pad...原创 2020-01-23 15:47:05 · 235 阅读 · 0 评论 -
浮动(float)以及清除浮动详解
浮动(float)网页标准文档流标准文档流是指内容元素排版布局过程中，会自动从左往右，从上往下进行流式排版(即独占一行，在一行，占元素位置)浮动：float:left | right;特点：1.浮动的元素不占位置(脱离标准文档流)2.块级元素在一行上显示的时候就使用浮动(脱标)3.浮动可以实现模式转换(脱标)总结：1.在网页布局中，块级元素在一行显示就使用浮动。2.如果只...原创 2020-01-23 15:04:32 · 286 阅读 · 0 评论 -
CSS之box-sizing属性以及box-shadow属性的灵活运用
box-sizing属性作用：用于定义盒子的宽度值和高度值是否包含内边距和边框box-sizing:content-box | border-box;content-box:该容器的实际大小=内容+边框+内边距。即当定义width和height时，它的参数值不包括border和padding。border-box:该容器的实际大小就是我们设置的width和height的实际大小。borde...原创 2020-01-23 09:44:52 · 746 阅读 · 0 评论 -
CSS3控制列表样式
list-style-type:none;disc：实心圆cirle：空心圆none：不使用项目符号decimal：阿拉伯数字square：实心方块......用于控制列表项显示符号的类型一般设置为none，后面我们都是通过设置背景图片的方式添加图标list-style-image:url();为各个列表项设置项目图标，使外观更好看但是设置的列表项图标和列表项并没有对齐，所以实际...原创 2020-01-22 00:21:04 · 414 阅读 · 0 评论 -
内边距padding详解以及外边距margin详解(外边距垂直塌陷,垂直外边距合并)+行内元素的padding和margin是否有效
内边距padding内容与边框之间的距离**注意:padding不会改变标签内容的大小(元素的位置)，只能改变元素中内容区域的位置(我们平常设置的宽高实际上就是标签内容区域的大小)。语法和border属性一样padding-top:上内边距padding-bottom:下内边距padding-right:右内边距padding-left:左内边距padding的取值可以为auto自...原创 2020-01-21 22:06:36 · 643 阅读 · 0 评论 -
CSS控制表格边框(属性)以及实现细线表格
CSS控制表格边框可以为表格标签定义宽，高和边框样式，并为单元格单独设置相应的边框。如果只设置原创 2020-01-21 20:28:57 · 2649 阅读 · 0 评论 -
盒子模型（div标签）以及其属性
盒子模型（div标签）作用：用于网页布局[画盒子]组成：内容区域边框内边距：内容区域与边框之间的距离外边距：盒子与盒子之间的距离盒子模型相关属性边框属性（border）设置边框的样式(没有|实线|点线|虚线|双实线)border-style:none(默认)|solid|dotted|dashed|double;设置边框宽度border-width:~~px;设置边框...原创 2020-01-21 13:18:23 · 2164 阅读 · 0 评论 -
CSS之行高(line-height)详解
行高(line-height) 1.浏览器中默认文字大小为16px; 2.浏览器中默认文字行高为18px；行高=文字大小+上下间距 1.通过设置文字的行高，改变的就是文字的上下间距。  ...原创 2020-01-20 19:30:48 · 5445 阅读 · 0 评论 -
CSS之多背景的设置以及线性渐变与径向渐变
多背景可以给一个容器同时设置多张背景图片<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; paddin...原创 2020-01-20 17:03:29 · 572 阅读 · 0 评论 -
CSS之background背景的设置
background-color设置背景颜色默认值：transparent(透明色)background-image设置背景图片background-repeat:设置背景图片的平铺方式默认会自动沿着水平和竖直两个方向平铺（repeat）no-repeat：背景图片不平铺repeat-x：沿着水平方向平铺repeat-y：沿着竖直方向平铺background-position...原创 2020-01-19 20:16:29 · 565 阅读 · 0 评论 -
CSS之伪类
伪类a:link{属性:值;}与a{属性:值;}或者a:-webkit-any-link一样作用：1.设置a标签的默认样式2.推荐直接使用a标签设置样式 a{属性:值;}a:visited{属性:值;}作用:设置a标签被访问过的样式◆该选择器会让浏览器有缓存的问题◆该选择器只能设置与颜色相关的属性a:hover{属性:值；}作用:设置鼠标悬停在标签上的样式，不...原创 2020-01-19 18:03:15 · 258 阅读 · 0 评论 -
CSS的特性(继承性，层叠性，优先级)
CSS的层叠性1.在同一个标签中，如果优先级相同，如果定义的样式发生冲突，那么最后一次定义的样式会将前面定义的样式(冲突的那部分)给覆盖掉<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>...原创 2020-01-19 15:53:36 · 221 阅读 · 0 评论 -
HTML标签的分类以及各类型之间的转换以及伪元素的介绍
块级元素代表：<h1>~<h6>,<p>,<div>,<ol>,<li>,<ul>,<dl>,<dt>,<dd>特点：1.如果块级元素不设置宽度，那么该元素的宽度等于其父元素的宽度2.所有的块级元素都独占一行3.可以为块级元素设置宽度和高度行内元素代表：<sp...原创 2020-01-19 12:22:16 · 246 阅读 · 0 评论 -
关于CSS中placeholder样式的设置以及鼠标样式的设置
placeholder样式的设置伪类选择器，兼容谷歌浏览器input::-webkit-input-placeholder{ color:red;}兼容火狐浏览器input::-moz-placeholder{ color:red;}兼容ie浏览器input:-ms-input-placeholder{ color:red;}设置鼠标样式cursor:...原创 2020-01-18 22:38:31 · 188 阅读 · 0 评论 -
CSS之复合选择器
复合选择器标签指定式选择器 由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或者是id选择器，两个选择器之间不能有空格。 标签名.类名{属性：值}总结: &n...原创 2020-01-18 22:13:08 · 190 阅读 · 0 评论 -
CSS文本属性(font)及其他补充属性
补充属性单位px：像素em：1em==一个文字的大小一个文字的大小不同浏览器有不同的默认值，也可以自己设置font-size:20px；颜色的表示方法1.写具体的颜色单词(red,blue…)2.使用十六进制表示颜色（#000~fff）3.rgb(三原色) r re...原创 2020-01-18 17:08:29 · 436 阅读 · 0 评论 -
CSS之基础选择器
标签选择器HTML标签名{属性：值；…}作用为页面中某一类标签设置统一的样式注意代码中遇到特殊符号，都必须是英文输入法状态下的符号p{color:red;font-family:"微软雅黑";}类选择器.自定义类名{属性：值；…} 定义类样式类样式的调用：标签通过class属性去调用定义好的类样式.nav{color:red;font-size:20px;}...原创 2020-01-18 12:06:09 · 147 阅读 · 0 评论 -
CSS的书写方式及基础知识
CSS基础css的整体1.选择器2.盒子模型3.浮动4.定位5.动画，伸缩布局(CSS3部分)CSS概念作用：1.美化网页(通过CSS控制标签的样式)2.网页布局(通过CSS控制标签的位置)概念Cascading Style Sheets(层叠样式表|级联样式表|样式表)注意：CSS是以HTML为基础。书写方式：内嵌式1.先准备一个HTML页面2.在HTML页面内...原创 2020-01-18 11:21:08 · 1295 阅读 · 0 评论