随笔分类 -  CSS3

摘要:z-index 图层~ z-index:默认是0,最高无线~999 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css 阅读全文
posted @ 2022-02-11 17:43 摘星丶仙 阅读(23) 评论(0) 推荐(0) 编辑
摘要:绝对定位 定位:基于xxx定位,上下左右。 没有父级元素定位的前提下,相对于浏览器定位 假设父级元素存在定位,我们通常会相对于父级元素进行偏移 在父级元素范围内移动 相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留 <!DOCTYPE html> <h 阅读全文
posted @ 2022-02-11 16:41 摘星丶仙 阅读(86) 评论(0) 推荐(0) 编辑
摘要:定位 相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 相对定位 相对于自己原来的位置进行偏移 --> <style> div{ margin: 10px; pa 阅读全文
posted @ 2022-02-11 15:55 摘星丶仙 阅读(43) 评论(0) 推荐(0) 编辑
摘要:父级边框塌陷的问题 clear /* clear:right; 右侧不允许有浮动元素 clear:left; 左侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none; */ 解决方案: 增加父级元素的高度~ #father{ border: 1px #000 sol 阅读全文
posted @ 2022-02-11 15:27 摘星丶仙 阅读(49) 评论(0) 推荐(0) 编辑
摘要:浮动 标准文档流 块级元素:独占一行 h1~h6 p div 列表... 行内元素:不独占一行 span a img strong... 行内元素可以被包含在块级元素中,反之,则不可以。 display div{ width: 100px; height: 100px; border: 1px so 阅读全文
posted @ 2022-02-11 14:46 摘星丶仙 阅读(14) 评论(0) 推荐(0) 编辑
摘要:圆角边框 4个角 <style> div { width: 100px; height: 100px; border: 10px solid red; border-radius: 50px 20px 10px 5px; } </style> 阅读全文
posted @ 2022-02-10 18:55 摘星丶仙 阅读(18) 评论(0) 推荐(0) 编辑
摘要:内外边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外边距的妙用:居中元素 margin: 0 auto; --> <style> #box{ width:300px 阅读全文
posted @ 2022-02-10 15:25 摘星丶仙 阅读(16) 评论(0) 推荐(0) 编辑
摘要:盒子模型 什么是盒子模型 margin:外边距 padding:内边距 border:边框 边框 边框的粗细 边框的样式 边框的颜色 阅读全文
posted @ 2022-02-10 15:11 摘星丶仙 阅读(19) 评论(0) 推荐(0) 编辑
摘要:背景 背景颜色 背景图片 div { width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/wsh2.jpg"); /*默认是全部平铺的 repeat*/ } .div1{ backgro 阅读全文
posted @ 2022-02-10 14:47 摘星丶仙 阅读(13) 评论(0) 推荐(0) 编辑
摘要:列表 /*ul li*/ /* list-style: none:去掉圆点 circle:空心圆 decimal:数字 square:正方形 */ /* ul{ background: #a0a0a0; } */ ul li{ height: 30px; list-style: none; text 阅读全文
posted @ 2022-02-10 14:31 摘星丶仙 阅读(10) 评论(0) 推荐(0) 编辑
摘要:阴影 /*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/ #price{ text-shadow: #3033ff 10px 10px 2px; } 超链接伪类 正常情况下,a , a:hover /*默认的状态*/ a{ text-decoration: none; color 阅读全文
posted @ 2022-02-10 14:16 摘星丶仙 阅读(17) 评论(0) 推荐(0) 编辑
摘要:颜色 color rgb rgba 文本对齐方式 text-align=center 首行缩进 text-indent:2em **行高 line-height:**单行文字上下居中!line-height = height 装饰 text-decoration 文本图片水平对齐:vertical- 阅读全文
posted @ 2022-02-10 13:50 摘星丶仙 阅读(16) 评论(0) 推荐(0) 编辑
摘要:美化网页元素 为什么要美化网页 有效的传递页面信息 美化网页,页面漂亮,才能吸引用户 凸显页面的主题 提高用户的体验 span标签:重点要突出的字,使用span标签套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < 阅读全文
posted @ 2022-02-10 13:20 摘星丶仙 阅读(18) 评论(0) 推荐(0) 编辑
摘要:id + class结合~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left; display: block; height 阅读全文
posted @ 2022-02-10 12:59 摘星丶仙 阅读(10) 评论(0) 推荐(0) 编辑
摘要:伪类:条件 /*ul的第一个子元素*/ ul li:first-child{ background: green; } /*ul的最后一个子元素*/ ul li:last-child{ background: seagreen; } /*选中p1:定位到父元素,选择当前的第一个元素 选择当前p元素的 阅读全文
posted @ 2022-02-10 12:23 摘星丶仙 阅读(26) 评论(0) 推荐(0) 编辑
摘要:后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 /*后代选择器*/ body p{ background: red; } 子选择器,一代,儿子 /*子选择器*/ body>p{ background: green; } 相邻兄弟选择器 同辈 /*相邻兄弟选择器:只有一个,相邻(向下)*/ .a 阅读全文
posted @ 2022-02-10 12:05 摘星丶仙 阅读(11) 评论(0) 推荐(0) 编辑
摘要:选择器 作用:选择页面上的某一个或者某一类元素 基本选择器 标签选择器:选择一类标签 标签{} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,会选 阅读全文
posted @ 2022-02-10 11:49 摘星丶仙 阅读(55) 评论(0) 推荐(0) 编辑
摘要:CSS的三种导入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部样式--> <style> h1{ color:green; } </style> <link r 阅读全文
posted @ 2022-02-10 11:16 摘星丶仙 阅读(68) 评论(0) 推荐(0) 编辑
摘要:练习格式: 快速入门 style 基本入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范,<style> 可以编写css的代码,每一个声明最好使用分号结尾 语法: 阅读全文
posted @ 2022-02-09 23:57 摘星丶仙 阅读(16) 评论(0) 推荐(0) 编辑
摘要:什么是CSS Cascading Style Sheets 层叠样式表 CSS:表现(美化网页) 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...... 发展史 CSS1.0 CSS2.0 DIV(块)+ CSS,HTML 与CSS结构分离的思想,网页变得简单,SEO CSS2.1 阅读全文
posted @ 2022-02-09 22:24 摘星丶仙 阅读(20) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示