08 2021 档案

CSS——相对定位
摘要：定位 1.相对定位 2.绝对定位 3.z-index 相对定位 代码图 效果图 小结 相对定位：position:relative; 相对于原来的位置，进行指定的偏移 top:-20px; left:20px; bottom:-10px; right:20px; 方块定位练习 代码 #box{ wi 阅读全文
posted @ 2021-08-31 22:55 cengxuyuan 阅读(373) 评论(0) 推荐(0)
CSS——父级边框塌陷问题
摘要：clear clear:right; 左侧不允许有浮动元素 clear:left; 右侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none; 解决方案 1.增加父级元素的高度 #father{ border:1px solid #000; height:800px; 阅读全文
posted @ 2021-08-29 16:54 cengxuyuan 阅读(188) 评论(0) 推荐(0)
CSS——display及浮动
摘要：display block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联，在一行！ none div{ width:100px; height:100px; border:1px solid red; display:inline; } span{ width:1 阅读全文
posted @ 2021-08-29 16:05 cengxuyuan 阅读(43) 评论(0) 推荐(0)
CSS——圆角边框及阴影
摘要：圆角边框 border-radius:10px 20px 30px 40px; 左上 右上 右下 左下 顺时针方向 圆形：圆角=半径 div{ width:100px; height:100px; margin:30px; border:2px solid black; border-radius: 阅读全文
posted @ 2021-08-23 20:44 cengxuyuan 阅读(283) 评论(0) 推荐(0)
CSS——内外边距及div居中
摘要：外边距的妙用：居中元素 margin: 0 auto div盒子居中 margin:0 auto; margin:0 margin:0 1px margin:0 1px 2px 3px 顺时针 上 右 下 左 完整代码 #box{ width:300px; border:1px solid blac 阅读全文
posted @ 2021-08-22 20:20 cengxuyuan 阅读(245) 评论(0) 推荐(0)
CSS——盒子模型及边框
摘要：什么是盒子模型 边框 border 外边距 margin 内边距 padding 边框 边框粗细 边框样式 边框颜色 /* body总有一个默认的外边距margin:0 */ body{ margin:0; } /* border:粗细 实虚线 颜色 */ #box{ width:300px; bo 阅读全文
posted @ 2021-08-19 20:29 cengxuyuan 阅读(106) 评论(0) 推荐(0)
CSS——背景图像及渐变
摘要：背景图像 div{ width:700px; height:700px; border:1px solid red; background-image:url("image/img.png"); /* 默认全部是平铺 */ } .div1{ background-repeat:repeat-x; / 阅读全文
posted @ 2021-08-18 20:31 cengxuyuan 阅读(252) 评论(0) 推荐(0)
CSS——列表
摘要：ul li list-style: none; 去掉原点 circle; 空心圆 decimal; 数字 square; 正方形 ul{ background:pink; } ul li{ height:30px; list-style:none; text-indent:1.5em; } 阅读全文
posted @ 2021-08-16 18:11 cengxuyuan 阅读(36) 评论(0) 推荐(0)
CSS——阴影及超链接伪类
摘要：阴影 text-shadow: 阴影颜色，水平偏移。垂直偏移，阴影半径 #num{ text-shadow:black 5px 0px 15px; } 超链接伪类 /* 默认的颜色 */ a{ text-decoration:none; } /* 鼠标悬浮的状态 */ a:hover{ color: 阅读全文
posted @ 2021-08-16 17:11 cengxuyuan 阅读(39) 评论(0) 推荐(0)
CSS——文本样式
摘要：颜色 color rgb rgba 2.文本对齐的方式 text-align:center; 3.首行缩进 text-indent:2em; 4.行高 line-height: 单行文字上下居中！ line-height:height; 5.装饰 text-decoration 6.文本图片水平对齐 阅读全文
posted @ 2021-08-14 22:01 cengxuyuan 阅读(40) 评论(0) 推荐(0)
CSS——字体样式
摘要：1.有效的传递页面信息 2.美化网页，页面漂亮，吸引用户 3.凸显页面的主题 4.提高用户的体验 span标签：重点要突出的字，使用span套起来 欢迎学习<span id="title">Java</span> font-size 字体大小 font-family 字体样式 font-weight 阅读全文
posted @ 2021-08-14 17:29 cengxuyuan 阅读(48) 评论(0) 推荐(0)
CSS——属性选择器
摘要：属性名， 属性名=属性值（正则） * 绝对等于 *= 包含这个元素 ^= 以什么开头 $= 以什么结尾 /* 存在id属性的元素 a[]{} */ a[id=first]{ background:orange; } /* class中有links的元素 */ a[class*="links"]{ b 阅读全文
posted @ 2021-08-13 19:33 cengxuyuan 阅读(57) 评论(0) 推荐(0)
CSS——伪类选择器
摘要：/* ul的第一个子元素 */ ul li:first-child{ background:gray; } /* ul的最后一个子元素 */ ul li:last-child{ background:green; } /* 选中p1: 定位到父元素，选中当前的第一个元素 选择当前p元素的父级元素，选 阅读全文
posted @ 2021-08-13 16:26 cengxuyuan 阅读(53) 评论(0) 推荐(0)
CSS——层次选择器
摘要：1.后代选择器 2.子选择器 3.兄弟选择器 4.通用选择器 1.后代选择器：在某个元素后面 （祖爷爷 爷爷 爸爸 你） body p{ background:orange; } 2.子选择器，一代，儿子 body>p{ background:red; } 3.相邻兄弟选择器：只有一个，相邻（向下） 阅读全文
posted @ 2021-08-13 15:58 cengxuyuan 阅读(91) 评论(0) 推荐(0)
CSS——基本选择器
摘要：1、标签选择器 ：选择一类标签 —— 标签{} /*标签选择器，会选择到页面上所有的这个标签的元素 */ h1{ color:pink; background:gray; border-radius:24px } p{ font-size:36px } 2、类选择器 class：选择所有class属 阅读全文
posted @ 2021-08-11 17:18 cengxuyuan 阅读(41) 评论(0) 推荐(0)
CSS——CSS的三种导入方式
摘要：行内样式 内部样式 外部样式 优先级（就近原则）：行内样式 > 内部样式 > 外部样式 行内样式：在标签元素中，编写一个style属性，编写样式即可 代码 <h1 style="color:red">我是标题</h1> 内部样式 代码 <style> h1{ color:green; } </sty 阅读全文
posted @ 2021-08-11 16:32 cengxuyuan 阅读(177) 评论(0) 推荐(0)
CSS——快速入门
摘要：规范,style可以编写css的代码,每一个声明最好使用分号结尾 语法： 选择器{ 声明1; 声明2; 声明3; } 建议使用这种规范 效果图 css的优势 1.内容和表现分离 2.网页结构表现统一，可以实现复用 3.样式十分的丰富 4.建议使用独立于html的css文件 5.利用SEO，容易被搜索 阅读全文
posted @ 2021-08-11 15:52 cengxuyuan 阅读(39) 评论(0) 推荐(0)
CSS——什么是CSS
摘要：如何学习 1.css是什么 2.css怎么用（快速入门） 3.css选择器（重点+难点） 4.美化网页（文字，阴影，超链接，列表，渐变...) 5.盒子模型 6.浮动 7.定位 8.网页动画（特效效果） 1.1、什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（ 阅读全文
posted @ 2021-08-11 15:38 cengxuyuan 阅读(129) 评论(0) 推荐(0)
HTML——表单初级验证
摘要：常用方式 placeholder 提示信息 required 非空判断（必须要填写东西） pattern 正则表达式 代码 <p>名字：<input type="text" name="username" placeholder="请输入名称" required></p> 效果图 pattern 正 阅读全文
posted @ 2021-08-08 19:34 cengxuyuan 阅读(62) 评论(0) 推荐(0)
HTML——表单的应用
摘要：隐藏域 hidden 只读 readonly 禁用 disabled readonly 只读 代码 <p>名字：<input type="text" name="username" value="admin" readonly></p> 效果图 hidden 隐藏域 代码 <p>密码：<input 阅读全文
posted @ 2021-08-08 19:17 cengxuyuan 阅读(35) 评论(0) 推荐(0)
HTML——表单学习
摘要：下拉框，列表框 <p>国家： <select name="列表名称"> <option value="china">中国</option> <option value="us">美国</option> <option value="eth" selected>瑞士</option> <option 阅读全文
posted @ 2021-08-08 16:17 cengxuyuan 阅读(29) 评论(0) 推荐(0)
HTML——初识表单学习
摘要：表单from action:表单提交的位置，可以是网站，也可以是一个请求处理地址 method:post , get 提交方式 get方式提交：我们可以在url中看到我们提交的信息，不安全，高效 post方式提交：比较安全，传输大文件 代码 <h1>注册</h1> <form action="1.我 阅读全文
posted @ 2021-08-06 21:46 cengxuyuan 阅读(187) 评论(0) 推荐(0)
HTML——iframe内联框架
摘要：代码 <iframe src="" name="hello" frameborder="0" width="400" height="400"></iframe> <a href="1.我的第一个html网页.html" target="hello">点击跳转</a> 效果图 阅读全文
posted @ 2021-08-06 21:28 cengxuyuan 阅读(48) 评论(0) 推荐(0)
HTML——媒体元素
摘要：媒体元素 音频和视频 src:资源路径 controls:控制条 autoplay:自动播放 视频元素 <video src="../video/田馥甄 - 小幸运.mp3" controls autoplay>小幸运</video> 音频元素 <audio src="../audio/我在网易云追 阅读全文
posted @ 2021-08-02 10:46 cengxuyuan 阅读(34) 评论(0) 推荐(0)
HTML——表格标签
摘要：为什么使用表格 简单通用 结构稳定 基本结构 单元格 行 列 跨行 跨列 表格table 行 tr 列 td 代码图 效果图 阅读全文
posted @ 2021-08-02 10:01 cengxuyuan 阅读(47) 评论(0) 推荐(0)
HTML——列表标签
摘要：什么是列表 列表就是信息资源的一种展开形式，它可以是信息结构化和条理化，并以列表的形式显示出来，以便浏览者能更快捷地获得相应的信息 列表的分类 无序列表 有序列表 自定义列表 有序列表 应用范围：试卷，问答... 无序列表 应用范围:导航,侧边栏... 自定义列表 dl:标签 dt:列表名称 dd: 阅读全文
posted @ 2021-08-02 09:36 cengxuyuan 阅读(97) 评论(0) 推荐(0)
HTML——行内元素及块元素
摘要：块元素 无论内容多少，该元素独占一行 (p、h1-h6...) 行内元素 内容撑开宽度，左右都是行内元素的可以排在一行 (a.strong.em ...) 阅读全文
posted @ 2021-08-02 09:09 cengxuyuan 阅读(71) 评论(0) 推荐(0)