随笔分类 - CSS
摘要：html结构： <div class="wrapper"> <div class="round"> <span>东邪</span> <span>西毒</span> <span>南乞</span> <span>北丐</span> </div> </div> CSS代码： .wrapper{ width
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Animated
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> 用HT
阅读全文
摘要：<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> css折叠效果 </title> <style> h1 { color: #19b0cb; } .Fold { position: abs
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .one{ width: 20%; height: 40px; background-color: red; float: left; } .thr
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>from 渡一</title> <style> /* 1.父子选择器 */ div strong em{ background-color: red; } /* 2.直接子元素选择器
阅读全文
摘要：24文字溢出处理 单行溢出三件套，静止换行溢出到。多行处理仅截断，容器文字高计算。 单行溢出三件套，静止换行溢出到。 单行文本溢出处理方法一般是打点展示 div { white-space: nowrap; /*表示多余不换行*/ overflow: hidden; /*溢出部分隐藏*/ text-
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3D Te
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .container{ /*弹性盒子容器 相当于float 使元素排成一行*/ display: flex; /*使元素排成一行 并且右对齐*/ /
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ perspective: 1000; perspective-origin: 0,0; /*translateZ() 于此连用*/ }
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; /*background-color: cyan;*/ /*渐变色*/ ba
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; /*盒子的边框 宽度 颜色 transparent表示透明 */ border
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>animation</title> <style> .box{ width: 100px; height: 100px; background: aqua; /*改变盒子位置*/ p
阅读全文
摘要：今天就重点讲解这个效果，首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了： .circleprogress{ width: 160px; height: 160px; border:20px solid red; border-radius: 50%; }
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .warp{ width: 300px; height: 300px; background-color: pink; margin: 100px
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /*最外边的盒子*/ .container{ /*盒子左边距*/ margin-left: 40px; /*盒子右边距*/ margin-right
阅读全文
摘要：@import url("reset.css");/*首页通用样式开始*/ .container{ width: 950px; margin: 0 auto; } /*首页通用样式结束*/ /*统一样式*/button{ cursor: pointer;} /*首页头部开始*/.header{ he
阅读全文
摘要：//混合 传参的.juzhong(@w,@h,@c){ width:@w; height: @h; background-color: @c;}.box1{ .juzhong(300px,300px,red); .box2{ .juzhong(100px,100px,blue); }}
阅读全文
摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style> *{ margin: 0; padding: 0; } .wrap{ width: 840px; height: 400px; background: re
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style1.css" /> <style type="text/css"> .box{ widt
阅读全文
浙公网安备 33010602011771号