![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 155 阅读 · 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 · 215 阅读 · 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 · 122 阅读 · 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 · 108 阅读 · 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 · 371 阅读 · 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 · 128 阅读 · 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 · 133 阅读 · 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 · 122 阅读 · 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 · 143 阅读 · 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 · 209 阅读 · 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 · 146 阅读 · 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 · 175 阅读 · 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 · 248 阅读 · 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 · 137 阅读 · 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 · 265 阅读 · 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 · 145 阅读 · 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 · 166 阅读 · 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 · 297 阅读 · 0 评论