随笔分类 - CSS
摘要：图层~ z-index： 默认是0，最高无上限~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.cs
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){/*绝对定位，相对于浏览器*/
阅读全文
摘要：定位：基于xxx定位，上下左右 1、没有父元素定位的前提下，相对于浏览器定位 2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移 3、在父级元素范围内移动 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留 <!DOCTYPE html> <ht
阅读全文
摘要：相对定位 1.默认情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 10
阅读全文
摘要：clear /* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear：none; */ 解决方案： 1、增加父级元素的高度~ #father{ border: 1px #000 solid; h
阅读全文
摘要：左右浮动 float <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <link rel="stylesheet" href="css/style.css" type="text/css
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联，在一行！ none 消失 -
阅读全文
摘要：标准文档流 块级元素：独占一行 h1~h6 p div 列表... 行内元素：不独占一行 span a img strong... 行内元素可以被包含在块级元素中，反之，则不可以
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--margin:0 auto; 居中 要求：块元素，块元素有固定的宽度 --> <style> img{ border-rad
阅读全文
摘要：4个角 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 左上 右上 右下 左下，顺时针方向 --> <!-- 圆角： 圆角 = 半径！ --> <style> div{
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外边距的妙用：居中元素！ margin: 0 auto; --> <style> #box{ width: 300px; b
阅读全文
摘要：1、边框的粗细 2、边框的样式 3、边框的颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*body总有一个默认的外边距margin：0，常见操作*/ /*
阅读全文
摘要：什么是盒子模型 margin：外边距 padding：内边距 border：边框
阅读全文
摘要：渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 径向渐变，圆形渐变--> <style> body{ background-color: #FFE53B; back
阅读全文
摘要：背景 背景颜色 背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 1000px; height:700px; border: 1px
阅读全文
摘要：列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </
阅读全文
摘要：阴影 /*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/ #price{ text-shadow: aquamarine 10px 10px 2px; } 超链接伪类 正常情况下，a，a:hover <!DOCTYPE html> <html lang="en"> <head>
阅读全文
摘要：文本样式 1、颜色 color rgb rgba 2、文本对齐的方式 text-align: center 3、首行缩进 text-indent: 2em 4、行高 line-height 单行文字上下居中 line-height = height 5、装饰 text-decoration 6、文本
阅读全文
摘要：字体样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family:字体 font-size：字体大小 font-weight:字体粗细 color：字体颜
阅读全文
摘要：为什么要美化网页 1、有效的传递页面信息 2、美化网页，页面漂亮才能吸引用户 3、凸显页面的主题 4、提高用户的体验 span标签：重点要突出的字，使用span套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti
阅读全文
