CSS
关注
分享
扫一扫
向阳的人生
编程菜鸟，java从0开始，网上自学，将个人所学整理到博客；
人无再少年！
展开
-
CSS 绝对定位和固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位和固定定位</title> <style> body{ height: 1000px; } /*绝对定位 1.在没有父级元素前提下，相对于浏览器定位 2原创 2020-12-17 14:04:32 · 354 阅读 · 0 评论 -
CSS相对定位
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="father"> <div cla原创 2020-12-17 11:25:04 · 168 阅读 · 0 评论 -
四种解决父级边框塌陷方法
问题引入 当我们使用浮动时，可能出现元素超出父级元素的情况 如图 可以看到父级边框出现了塌陷情况 解决方案一：在父级属性设置高度（不推荐） .father{ border: 1px solid black; height: 10000px; } 解决方案二：添加一个空div块 <div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; } 解决方案三：父级原创 2020-12-16 19:43:11 · 2541 阅读 · 0 评论 -
CSS浮动
浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动练习</title> <style> /*inline: 行内元素(非独占行) block:块元素（独占行） inline-block:行块元素（可联动的块元素） none:不原创 2020-12-16 19:18:29 · 109 阅读 · 0 评论 -
CSS圆角边框和阴影
圆角边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角边框</title> <style> div{ height: 50px; width: 100px; border: 3px solid red;原创 2020-12-16 16:23:35 · 634 阅读 · 0 评论 -
CSS盒子模型 边框的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <style> #box{ border: 1px solid red; width: 300px; } form{ background-color: blu原创 2020-12-15 20:45:40 · 144 阅读 · 0 评论 -
CSS基本美化网页元素
字体样式 实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式</title> <style> body{ font-family: 楷体; font-size: 20px; } .test{原创 2020-12-15 20:38:46 · 592 阅读 · 0 评论 -
CSS 属性选择器（重要）
格式：标签[属性选择]{} 绝对相等属性（=）实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .Test a{ float: left; display: block; .原创 2020-12-14 19:38:56 · 179 阅读 · 0 评论 -
CSS 四种层次选择器
实例结构图 后代选择器 格式：元素 标签{} 特点 作用域为元素所有子代标签 实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> body p{ background: red; } </sty原创 2020-12-14 14:16:00 · 1547 阅读 · 0 评论 -
CSS 三种基本选择器
标签选择器 格式 ：标签{} 实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种基本选择器</title> <!--标签选择器--> <style> h1{ color: green; } </style>原创 2020-12-14 10:53:41 · 607 阅读 · 0 评论