12 2021 档案

摘要: 阅读全文
posted @ 2021-12-31 16:47 嘉琦 阅读(20) 评论(0) 推荐(0) 编辑
摘要:html结构代码: <form > <!-- form 为了让重置按钮生效--> <h1>青春不常在,抓紧谈恋爱</h1> <hr> 昵称: <input type="text" placeholder="请输入昵称"> <br><br> 性别: <input type="radio" name=' 阅读全文
posted @ 2021-12-31 16:39 嘉琦 阅读(123) 评论(0) 推荐(0) 编辑
摘要:结构:&+英文; 常见的字符实体 阅读全文
posted @ 2021-12-31 15:07 嘉琦 阅读(32) 评论(0) 推荐(0) 编辑
摘要:结构代码 所在城市: <select > <option selected>北京</option> <option>上海</option> <option>深圳</option> <option>广州</option> <option>杭州</option> </select> 效果图 结构代码: 阅读全文
posted @ 2021-12-31 14:47 嘉琦 阅读(70) 评论(0) 推荐(0) 编辑
摘要:场景:在网页中显示用户点击的按钮标签名:button 注意:form不能少,少了不会出效果 html代码 <form > 昵称: <input type="text" placeholder="输入用户名"> <br><br> <!-- 提交按钮 --> <button type="submit"> 阅读全文
posted @ 2021-12-30 20:55 嘉琦 阅读(701) 评论(0) 推荐(0) 编辑
摘要:场景:在网页中显示手机用户信息的表单效果。 如:登录页、注册页标签名:input 用法是通过改变type属性值,来展示不同效果 1.1 html 代码 <!--placeholder 提示符又叫占位符--> 昵称: <input type="text" placeholder="用户名" > <br 阅读全文
posted @ 2021-12-30 20:41 嘉琦 阅读(461) 评论(0) 推荐(0) 编辑
摘要:1.1表格的基本标签 语法结构:<table> /*整体包裹部分,包裹多个tr */ <tr> /* 表格的每一个行,包裹td */ <td></td> /*表格的单元格,包裹内容 */ </tr> </table> 2.1表格相关属性 属性名 属性值 效果 border 数字 边框宽度 width 阅读全文
posted @ 2021-12-30 19:55 嘉琦 阅读(317) 评论(0) 推荐(0) 编辑
摘要:1.无序列表:就是不需要排列顺序的情况,用无序列表 语法结构:<ul> <li></li> <li></li> </ul> 特点:每一个li前面都有一个小圆点 /* 清除黑点代码:list-style='none' */ 注意点:ul只能包裹li,li可以包裹任意内容 2.有序列表:有规则、有排序的 阅读全文
posted @ 2021-12-30 18:57 嘉琦 阅读(42) 评论(0) 推荐(0) 编辑
摘要:属性名:opacity:数字+px; 数字值取值0-1之间数字 数字值:1表示完全不透明 0表示完全透明使用后效果 html结构代码 <div class="box"> <img src="./images/code.jpg" alt=""> </div CSS结构代码 <style> .box{ 阅读全文
posted @ 2021-12-30 16:41 嘉琦 阅读(114) 评论(0) 推荐(0) 编辑
摘要:1.visibility:hidden; 2.display: none; 区别: 1.visibility:hidden 隐藏元素本身,且在网页中 占位置 2.display:none; 隐藏元素本身,且在网页中不占用位置,脱标 开发中常用: display:none;隐藏 display:blo 阅读全文
posted @ 2021-12-30 16:33 嘉琦 阅读(54) 评论(0) 推荐(0) 编辑
摘要:属性:overflow 值 作用 visible 默认,内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出,都有滚动条 auto 有内容溢出,自动显示滚动条 阅读全文
posted @ 2021-12-30 16:18 嘉琦 阅读(212) 评论(0) 推荐(0) 编辑
摘要:属性:border-radius:数字+px; 用途:修饰盒子圆角 使用语法格式: 1. border-radius:20px ; /* 四个叫同时以半径20px圆角*/ 2. border-radius: 20px 30px /*左上角和右下角同时以半径20px圆角;右上角和左下角同时以半径30p 阅读全文
posted @ 2021-12-30 16:07 嘉琦 阅读(152) 评论(0) 推荐(0) 编辑
摘要:vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertical-align:top;/vertical-align:bottom; 之后效果 案例,html结 阅读全文
posted @ 2021-12-30 15:31 嘉琦 阅读(834) 评论(0) 推荐(0) 编辑
摘要:html结构 <body> <div class="father"> <div class="son"></div> </div> </body> CSS结构 <style> .father{ position: relative; width: 400px; height: 300px; back 阅读全文
posted @ 2021-12-29 22:06 嘉琦 阅读(24) 评论(0) 推荐(0) 编辑
摘要:1.相对定位:position:relative; 属性名:position 属性值:relative; 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top、left、right,bottom 3.相对定位,位置虽然移动了,但原来的位置还在,并未脱标应用场景: 1.配合绝对定位使用(子绝 阅读全文
posted @ 2021-12-29 21:17 嘉琦 阅读(85) 评论(0) 推荐(0) 编辑
摘要:BFC的作用和创建1.html标签是BFC盒子2.浮动元素是BFC盒子3.行内块元素是BFC盒子4.overflow属性值不为visible,如:auto、hidden。。。作用:1.清除浮动; 2.解决塌陷注意:display:table也可以生成BFC的原因在于Table会默认生成一个匿名的ta 阅读全文
posted @ 2021-12-29 20:13 嘉琦 阅读(70) 评论(0) 推荐(0) 编辑
摘要:1.单伪元素清除法;清除浮动 .clearfix::after{ content: '.'; display: block; clear: both; height: 0; /* 这两行代码是清除content里.的这个内容*/ visibility: hidden; } 清除浮动之前,两个盒子重叠 阅读全文
posted @ 2021-12-29 19:52 嘉琦 阅读(49) 评论(0) 推荐(0) 编辑
摘要:效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi 手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> </ul> CSS 阅读全文
posted @ 2021-12-29 18:48 嘉琦 阅读(134) 评论(0) 推荐(0) 编辑
摘要:html代码: <body> <div class='red'> </div> <div class='green'> </div> <div class='blue'> </div> </body>浮动特点: 1.使用浮动时会脱标,被脱标的物体会向上空飘去,不占用正常流的位置, 此时用的是 .gr 阅读全文
posted @ 2021-12-29 16:38 嘉琦 阅读(590) 评论(0) 推荐(0) 编辑
摘要:一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> <a herf='#'>导航3</a> </div> /* 匹配第一个子元素,并且为a标签 */ div a:first-child{} 注意:如果第一个元素不 阅读全文
posted @ 2021-12-29 15:10 嘉琦 阅读(545) 评论(0) 推荐(0) 编辑
摘要:场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 /* float:left */ 3.将父元素转为行内块元素 /*display:inline-b 阅读全文
posted @ 2021-12-29 14:20 嘉琦 阅读(168) 评论(0) 推荐(0) 编辑
摘要:总结:所使用的知识点:1.padding应用以及box-sizing: border-box自动内减撑大的盒子 2.ul>li 的使用,去除黑圆圈 3.a标签的使用,去除默认样式《下划线》 html结构 <div class="box"> <h2>最新文章/New Articles</h2> <ul 阅读全文
posted @ 2021-12-28 21:36 嘉琦 阅读(138) 评论(0) 推荐(0) 编辑
摘要:1.border当个属性: 作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style solid实线、dashed虚线、dotted点线 边框颜色 border-color 颜色设置 连写格式:1.border:20px solid green; /* 阅读全文
posted @ 2021-12-28 21:09 嘉琦 阅读(433) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2021-12-28 17:48 嘉琦 阅读(24) 评论(0) 推荐(0) 编辑
摘要:1.子元素默认会继承父元素的样式,但不是所有的元素都有继承 常见的继承父元素特点的元素有: 1.color 2.font-sytle、font-weight、font-size、font-family 3.text-indent、text-align 注意:可以通过chrome浏览器查看是否支持继承 阅读全文
posted @ 2021-12-28 17:40 嘉琦 阅读(213) 评论(0) 推荐(0) 编辑
摘要:{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https: 阅读全文
posted @ 2021-12-28 15:09 嘉琦 阅读(90) 评论(0) 推荐(0) 编辑
摘要:1.块级元素 属性:display:block 特点:1.一行只能显示一个元素 2.宽度默认是父元素的,高度是有内容撑开 3.可以设置宽、高常见块元素:div,p,h系列,ul、li,dl、dt、dd、from、header、nav、footer...... 2.行内元素 属性:display:in 阅读全文
posted @ 2021-12-28 14:01 嘉琦 阅读(106) 评论(0) 推荐(0) 编辑
摘要:1.background-color:red ; //设置背景颜色为红色,rgb(0,0,0)和transparent 均为透明颜色 2.background-image(可缩bgi写用tab键) 语法:background-image:url('图片的路径'); 注意点:背景图片不会将原有的盒子撑 阅读全文
posted @ 2021-12-28 11:29 嘉琦 阅读(98) 评论(0) 推荐(0) 编辑
摘要:1.ctrl+/ //注释代码 2.文件内容查找替换:ctrl+f ctrl+h ,替换一个ctrl+shift+1,替换所有ctrl+alt+enter 3.移动当前行,向上alt+up(方向键↑) 向下alt+down 4.跳转到文件头部/尾部:ctrl+home/end 使用tab键补充代码的 阅读全文
posted @ 2021-12-28 10:41 嘉琦 阅读(827) 评论(0) 推荐(0) 编辑
摘要:1.后代选择器 html 结构 <div class='father'> <p>小哥哥 小姐姐</p> <div> <p>小帅锅</p> </div> </div> <p>小可爱</p> 使用后代选择器格式 .father p{ color:red; } 匹配的是"小哥哥 小姐姐" 和 "小帅锅", 阅读全文
posted @ 2021-12-27 22:18 嘉琦 阅读(67) 评论(0) 推荐(0) 编辑
摘要:color:rgba(); //r表示red 红色 //g表示green 绿色 //b表示blue 蓝色 //a 表示透明度 color:rgb(0,0,0,0) //黑色 color:rgb(255,255,255) //白色 color:rgb(255,0,0,0) //红色 color:rgb 阅读全文
posted @ 2021-12-27 21:16 嘉琦 阅读(418) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-27 21:00 嘉琦 阅读(72) 评论(0) 推荐(0) 编辑
摘要:字体样式处理font-size:30px;// 设置字体大小 font-weight:700;//设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体,隶书,sans-serif;//从左到右,依次匹配,匹配即停止sans-serif为电脑默认字体 阅读全文
posted @ 2021-12-27 19:37 嘉琦 阅读(60) 评论(0) 推荐(0) 编辑
摘要:1.标签选择器解释:是针对一个标签做的样式,它会将匹配的所有标签都发生改变语法格式:标签名{ css样式代码 }2.类选择器特点:1.可以给某一个标签标记为一类,设定css样式,比较灵活 2.类目可以以,字母、数字、下划线、中划线组成,但不能以数字或中划线开头 3.一个标签可以同时有多个类名,用空格 阅读全文
posted @ 2021-12-27 17:31 嘉琦 阅读(91) 评论(0) 推荐(0) 编辑
摘要:color:red; //改变颜色 font-size:18px ; //改变文字大小 background-color : blue; //设置背景颜色 width:100px ;//设置宽度 height:100px; //设置高度 css引入方式 1.内嵌式 适用于,小demo或者小案例中使用 阅读全文
posted @ 2021-12-27 16:59 嘉琦 阅读(29) 评论(0) 推荐(0) 编辑
摘要:基础标签 文本格式化标签: 标签 说明 <b></b>/<strong></strong> 加粗 <u></u>/<ins></ins> 下划线 <i></i>/<em></em> 斜线 <s></s>/<del></del> 删除线 建议使用:第二种标签 图片标签: <img src='图片的所在 阅读全文
posted @ 2021-12-27 16:33 嘉琦 阅读(86) 评论(0) 推荐(0) 编辑

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