CSS Note
关注
分享
扫一扫
LetsStudy
The growth of age will not be a hindrance to study.
展开
-
CSS Note 1.0 选择器及颜色
一、选择器二、颜色示例#div1{ background: red;}#div2{ background: #00ff00;}#div3{ background: rgb(255,255,0);}#div4{ background: rgba(0,255,255,0.5);/*最后一个参数是设置透明度*/}#div5{ /*第一...原创 2018-09-06 14:36:47 · 198 阅读 · 0 评论 -
CSS 2.6 仿360囧图
一、CSS@charset "UTF-8";*{ margin: 0; padding: 0;}ul{ list-style: none;}a{ text-decoration: none; color: #ffffff;}body{ background: rgba(20 ,20, 20, 0.2);}header{ ...原创 2018-11-29 10:30:42 · 249 阅读 · 0 评论 -
CSS Note 2.3 animation
一、CSS@charset "UTF-8";div{ margin: 10px; padding: 10px; width: 160px; height: 80px; background: chartreuse ;}@keyframes my { from { margin-left: 50px; b...原创 2018-11-19 16:48:12 · 152 阅读 · 0 评论 -
CSS Note 2.5 下拉菜单
一、CSS@charset "UTF-8";*{ padding: 0px; margin: 0px;}.ul1{ margin: 40px;}ul{ list-style: none;}a{ text-decoration: none;}.ul1>li{ width: 160px; height: 40px;...原创 2018-11-21 17:27:12 · 131 阅读 · 0 评论 -
CSS Note 2.2 transition和transform组合动画
一、CSS@charset "UTF-8";div{ margin: 10px; padding: 10px; width: 160px; height: 80px; background: chartreuse ;}#div1:hover{ background: green; width: 60px; transi...原创 2018-11-16 17:05:28 · 418 阅读 · 0 评论 -
CSS Note 2.4 其他常用元素
一、CSS@charset "UTF-8";div{ margin: 10px;}#div1{ background-color:rgb(255,0,0); width: 240px; height: 120px; opacity:0.6 ;/*opacity会作用于内容和元素，而rgba的透明度则只作用于元素*/}#div2{ w...原创 2018-11-20 21:52:05 · 150 阅读 · 0 评论 -
CSS Note 2.0 渐变
一、CSS@charset "UTF-8";div{ width: 120px; height: 80px; display: inline-block; margin: 10px; font-size: 10px; word-break: break-all; vertical-align: top;}#div1{ ba...原创 2018-11-08 17:31:15 · 162 阅读 · 0 评论 -
CSS Note 2.1 transform简要
一、CSS@charset "UTF-8";body{ -webkit-perspective: 1200px;/*该属性设置后，其子元素具有透视效果*/}div{ width: 120px; height: 80px; display: inline-block; margin: 10px; background-color: lime...原创 2018-11-13 16:04:10 · 148 阅读 · 0 评论 -
CSS Note 1.9 background
一、CSS@charset "UTF-8";#div1{ font: 8px "Times New Roman" ; line-height: 10px; text-indent: 35px; padding: 30px 20px 15px; width: 180px; height: 240px; border: 4px rgba...原创 2018-11-01 17:32:24 · 176 阅读 · 0 评论 -
CSS Note 1.7 table属性及列表属性
一、html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=&原创 2018-10-24 22:16:33 · 253 阅读 · 0 评论 -
CSS Note 1.8边框
一、Html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=&q原创 2018-10-26 23:04:01 · 169 阅读 · 0 评论 -
CSS Note 1.6 vertical-align属性
一、vertical-align/垂直对齐二、示例1、Html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel原创 2018-09-30 16:33:32 · 197 阅读 · 0 评论 -
CSS Note 1.5 边距及clip属性
一、边距及clip属性1、margin外边距：margin本身不增加元素大小，给元素设定边距也起到了定位的作用 margin:10px ;表示元素四个外边距为10px margin:10px 20px;表示元素的上下边距为10px，左右边距为20px margin:10px 20px 10px;表示元素的上边距为10px，左右边距为20px，下边距...原创 2018-09-26 22:48:55 · 275 阅读 · 0 评论 -
CSS Note 1.4 position定位
一、Html实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href原创 2018-09-25 22:17:40 · 161 阅读 · 0 评论 -
CSS Note 1.3 前缀及overflow
一、常用浏览器前缀-webkit- /*webkit内核，代表浏览器Chrome/Safari*/ -ms- /*Trident内核，代表浏览器IE*/ -moz- /*Gecko内核，代表浏览器FireFox*/ -o- /*Presto内核，代表浏览器Opera*/二、使用示例/*如果需要兼容多个浏览器，可以把所有的浏览器的前缀都加上*/-webkit...原创 2018-09-18 20:39:19 · 303 阅读 · 0 评论 -
CSS Note 1.2 常用文本属性
一、常用文本属性background: red;/*设置背景颜色*/text-align: justify;/*center中间对齐,left左对齐,right右对齐,css中新增start和end，通常情况下start=left，end=right,justify两端对齐*/color: lime;/*设置文本颜色*/line-height: 2em;/*设置行高*/text-in...原创 2018-09-10 17:19:13 · 171 阅读 · 0 评论 -
CSS Note 1.1 字体
一、字体示例1、font-size/*这四种字体大小是一样的*/font-size: 16px;font-size: 100%;font-size: 1em;font-size: medium;/*small和smaller是一样的,其他的从小到大为xx-small | x-small | small | medium | large | x-large | xx-large*...原创 2018-09-06 15:39:10 · 195 阅读 · 0 评论 -
CSS 2.7仿天猫
一、CSS@charset "UTF-8";*{ margin: 0; padding: 0;}.html,body,wrap{ height: 100%; width: 100%;}body{ background: rgba(90,60,30,0.3);}ul{ list-style-type: none;}a{ ...原创 2018-11-29 17:41:00 · 339 阅读 · 0 评论