
css
菜鸟Jon
大家相互交流、相互学习
展开
-
css学习01——css格式、使用方法、背景、列表、字体、文本、链接
css学习01——css格式、使用方法、背景、列表、字体、文本、链接一、css格式1、语法:CSS声明以分号(;)结束,声明组以大括号({})括起来:2、id 和 class 选择器id 选择器以 "#" 来定义:#para1{ text-align:center; color:red;}class选择器以“ . ”来定义:.center {te...原创 2019-05-15 10:17:12 · 186 阅读 · 0 评论 -
css学习02——表格、边框、轮廓、外边框、填充、分组与嵌套、显示与可见性
css学习02——表格、边框、轮廓、外边框、填充、分组与嵌套、显示与可见性1、表格border: 1px solid black;/*加表格边框*/height:50px;/*高设置*/width:100%;/*宽设置*/text-align:right;/*表格文字对其方式*/background-color:green;/*背景颜色*/2、边框border-sty...原创 2019-05-15 11:38:34 · 383 阅读 · 0 评论 -
css学习03——定位、布局、浮动、水平和垂直对齐、组合选择器
css学习03——定位、布局、浮动、水平和垂直对齐、组合选择器1、定位position: static;/*静态定位,不受top,left等的影响*/position:fixed;/*固定位置,窗口滚动也不受影响*/top:30px;right:5px;position:relative;/*相对正常位置定位*/left:20px;/*绝对定位元素的位置是最近已定位父...原创 2019-05-15 13:35:09 · 306 阅读 · 0 评论 -
css学习04——导航栏、下拉按钮、提示工具、表单、计数器、网页布局
css学习04——导航栏、下拉按钮、提示工具、表单、计数器、网页布局1、导航栏/*导航栏css*/ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;}li a { display: block; ...原创 2019-05-15 18:58:30 · 436 阅读 · 0 评论 -
css3学习05——边框、背景、渐变颜色、文本效果、2D转换、3D转换
css3学习05——边框、背景、渐变颜色、文本效果、2D转换、3D转换1、边框border-radius:30px;/*圆角半径*/box-shadow: 50px 50px 10px #888888;/*边框阴影*//*css样式*/{ border:15px solid transparent; width:250px; padding:10px 20px;}#...原创 2019-05-16 11:06:25 · 303 阅读 · 0 评论 -
css3学习06——过渡、动画、多列、用户界面
css3学习06——过渡、动画、多列、用户界面1、过渡/*css样式*/div{ width:100px; height:100px; background:red; transition-property:width; transition-duration:5s; transition-delay:1s;/* Safari */-webkit-transitio...原创 2019-05-16 16:03:11 · 190 阅读 · 0 评论 -
css3学习07——图片、滤镜、按钮、弹性盒子、添加邮箱地址
css3学习07——图片、滤镜、按钮、弹性盒子、添加邮箱地址1、图片border-radius: 8px;/*修图片的圆角*/img { border: 1px solid #ddd;/*图片边框*/ border-radius: 4px;/*圆角大小*/ padding: 5px;/*内边距大小*/}img { max-width: 100%...原创 2019-05-16 18:16:22 · 634 阅读 · 0 评论 -
十六进制颜色
十六进制颜色对照表Color Name HEX Color Black #000000 Navy #000080 DarkBlue #00008B MediumBlue #0000CD Blue #0000FF DarkGreen #006400 ...原创 2019-05-16 18:23:49 · 1010 阅读 · 0 评论 -
css3旋转特效
css3旋转特效资料来源:www.jq22.com1、实现效果:三个正方形和几块色板旋转2、代码:<!doctype html><html><head><meta charset="utf-8"><title>css3旋转特效</title><script src="https://libs...原创 2019-06-06 23:58:51 · 1132 阅读 · 0 评论