随笔分类 -  HTML5+CSS3+实战项目

小兔鲜02-header+footer+主体内容
摘要：效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont 阅读全文
posted @ 2022-08-04 16:46 挚终 阅读(195) 评论(0) 推荐(0)
综合项目小兔鲜01-项目前置样式+项目搭建
摘要：精灵图：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度 使用精灵图的步骤是什么？ 1. 创建一个盒子 2. 设置盒子大小为小图片大小 3. 设置精灵图为盒子的背景图片 4. 将小图片左上角坐标 取负值，设置给盒子的backg 阅读全文
posted @ 2022-08-04 11:40 挚终 阅读(968) 评论(0) 推荐(0)
CSS06-学成在线定位+装饰
摘要：网页布局三种方式： 标准流 浮动 定位 定位 ➢ 针对于盒子与盒子之间的层叠问题，推荐使用定位完成！ 1. 设置定位的方式：position 2. 设置偏移值：水平+垂直就近各取一个 ➢ 相对定位position的属性值是什么？ • relative ➢ 相对定位是否需要配合方位属性实现移动？ • 阅读全文
posted @ 2022-08-03 17:30 挚终 阅读(68) 评论(0) 推荐(0)
网页制作
摘要：一、根目录：网站的第一级文件夹（注意以英文命名） 1. 图片文件夹: images 2. 样式文件夹: CSS （下面建立index.css 与.html对应） 3. 首页 : index.html css样式引入html代码如下： <!DOCTYPE html> <html lang="en"> 阅读全文
posted @ 2022-08-02 23:00 挚终 阅读(102) 评论(0) 推荐(0)
CSS05 制作页面：学成在线
摘要：效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont 阅读全文
posted @ 2022-08-02 22:59 挚终 阅读(66) 评论(0) 推荐(0)
CSS04下-清除浮动
摘要：清除浮动5种方法 1、直接设置父元素高度 ➢ 特点： • 优点：简单粗暴，方便 • 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq 阅读全文
posted @ 2022-07-31 11:59 挚终 阅读(26) 评论(0) 推荐(0)
CSS04上-浮动
摘要：使用 结构伪类选择器 在HTML中定位元素 <style> /* 选中第一个 */ /* li:first-child { } */ /* 最后一个 */ /* li:last-child { } */ /* 任意一个 */ /* li:nth-child(5) { } */ /* 倒数第xx个 * 阅读全文
posted @ 2022-07-30 22:07 挚终 阅读(64) 评论(2) 推荐(0)
CSS03-盒子模型
摘要：CSS 三大特性 1. 继承性 2. 层叠性 3. 优先级 ➢ 优先级公式：（范围越广的选择器，优先级越低） • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式（style="color: pink ）< !important <style> /* id选择器 * 阅读全文
posted @ 2022-07-29 22:47 挚终 阅读(73) 评论(0) 推荐(0)
CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性
摘要：复合选择器 的规则 emmet语法 作用：通过简写语法，快速生成代码 <style> div { /* font-size: ; */ font-size: ; /* 提示css属性: 单词的首字母 */ /* font-weight: ; */ font-weight: 700; width: ; 阅读全文
posted @ 2022-07-28 22:20 挚终 阅读(45) 评论(0) 推荐(0)
CSS01-基础选择器
摘要：1. 选择器作用：选中页面中对应的标签（找她），方便后续设置样式（改她） 2、标签选择器：标签名 { css属性名：属性值； } 3. 类选择器：.类名 { css属性名：属性值； } 4. id选择器：#id属性值 { css属性名：属性值； } 5. 通配符选择器：* { css属性名：属性值； 阅读全文
posted @ 2022-07-28 16:28 挚终 阅读(48) 评论(0) 推荐(0)
HTML5+CSS3 html02-基础
摘要：1、无序列表 <ul> <li>榴莲</li> <li>香蕉</li> <li>苹果</li> </ul> 有序列表 <ol> <li>张三100</li> <li>里斯90</li> </ol> 自定义列表 <dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd 阅读全文
posted @ 2022-07-26 17:44 挚终 阅读(38) 评论(0) 推荐(0)
Vscode 关于前端开发一些常用的插件
摘要：一、中文简体语言包 二、在浏览器中查看 使用方法：安装之后，在需要查看的的 html 文件中点击鼠标右键选择以下图片的其中一个选项，当然从图片中我们可以看出是有相应的快捷键的 可以解决一次只能运行一个网页问题 三、实时预览 在编辑器中修改代码，按Ctrl+S保存，修改之后的效果就会实时同步更新显示在 阅读全文
posted @ 2022-07-24 21:46 挚终 阅读(45) 评论(0) 推荐(0)
HTML5+CSS3 html01-认知
摘要：vscode 使用 shift+1,回车补全代码 ctrl+/注释 h1回车 自动补全 先选中数字2 ctrl+D 按一次 多一个光标在闪 多按几次 一起改 h1~h6 保存代码后 去刷新网页 文本格式化标签 后面表格强调性更大 <b>加粗</b> <strong>加粗</strong> <u>下划 阅读全文
posted @ 2022-07-23 17:26 挚终 阅读(57) 评论(0) 推荐(0)