摘要: 需要实现以下效果: 子元素高度小于窗口高度时,父元素高度为窗口高度; 子元素高度大于窗口高度时,父元素高度自适应,由子元素高度决定。 可以这样实现: 1. 依据DOM结构逐层设置目标元素的所有父元素 ,直至根元素 ,浏览器在渲染过程中会将窗口的实际高度值传递给html元素,然后再根据DOM结构逐层传 阅读全文
posted @ 2019-03-27 22:31 李想12 阅读(7969) 评论(1) 推荐(0) 编辑
摘要: 按照如下设计图进行页面的实现 说明: 最左侧一列要求自适应浏览器高度,左上面4个按钮相对浏览器左上角固定位置,左下方两个按钮相对浏览器左下角固定位置 左侧第二列(蓝色背景色)导航列固定宽度,高度也是自适应浏览器高度,最下面的Monthly Goals部分的内容相对浏览器下边固定位置 整个白色区域自适 阅读全文
posted @ 2019-03-16 00:18 李想12 阅读(196) 评论(0) 推荐(0) 编辑
摘要: 一、安装photoshop,学习切图 学习资料: "前端开发人员也要会的切图技巧(一)" "前端开发人员也要会的切图技巧(二)" "前端开发人员也要会的切图技巧(三)" "前端工程师必备的PS技能——切图篇" "做一个会PS切图的前端开发" 二、依照设计图进行页面实现 设计稿描述: 代码风格符合某种 阅读全文
posted @ 2019-03-04 21:49 李想12 阅读(367) 评论(0) 推荐(0) 编辑
摘要: 一、分别尝试使用 float、position、flex 实现如下需求 1.实现一个两栏布局,左侧占百分之三十宽度,右侧占百分之七十宽度 DOM: float样式: position样式: flex样式: 一个坑需要注意: 在使用 布局时,浏览器对 缩写属性和 属性的渲染有不一致的地方,例如上边这个 阅读全文
posted @ 2019-02-26 23:31 李想12 阅读(261) 评论(0) 推荐(0) 编辑
摘要: 一、共性和差异 首先两个布局是有共性的: 1. 实现效果一致:都是三栏布局,左右两列宽度固定,中间列宽度自适应。中间列放重要的内容,因此在DOM结构中位置靠前优先渲染。 2. 实现原理一致:都是将一个 的浮动块和另外两个定宽浮动块通过负外边距和相对定位的方法实现最终布局,因此涉及到的方法包括: 浮动 阅读全文
posted @ 2019-02-25 23:22 李想12 阅读(188) 评论(0) 推荐(0) 编辑
摘要: 一、文档流(flow) 1. 元素的宽高: 默认情况下,块级元素的宽度是其父元素宽度的100%,高度由其内容的高度决定,内联元素的宽度和高度均由其内容决定 2. 正常的布局流: 1. 块级元素在视窗中垂直布局,每一个都将显示在上一个元素下面的新行上,被它们之间的外边距隔开 2. 内联元素在视窗中水平 阅读全文
posted @ 2019-02-15 21:26 李想12 阅读(203) 评论(0) 推荐(0) 编辑
摘要: 一、理解框模型 1. 框属性: width、height、padding、border、margin 2. 溢流 overflow 的处理方式: 1. auto:当内容过多,溢流的内容被隐藏,然后出现滚动条来查看所有的内容 2. hidden:当内容过多,溢流的内容被隐藏 3. visible:当内 阅读全文
posted @ 2019-02-13 21:22 李想12 阅读(122) 评论(0) 推荐(0) 编辑
摘要: 一、学习了background相关样式属性: background color、background image、background repeat、background position、background attachment、background、background size、多重背景的设 阅读全文
posted @ 2019-01-07 22:59 李想12 阅读(149) 评论(0) 推荐(0) 编辑
摘要: 一、学习了css 的概念、工作方式、语法 1. CSS (Cascading Style Sheets) : 是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等 2. 工作方式: 1. 浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型)。DOM在计算机内存中表示文档 阅读全文
posted @ 2019-01-06 23:51 李想12 阅读(160) 评论(0) 推荐(0) 编辑
摘要: 1. 在w3school学习了118个元素标签的定义和使用方法 2. 阅读了一些关于web语义化的文章,在我的理解来看,web语义化的目的是让机器更高效的服务于web,因为web很多数据的规模早已超出了人脑所能处理的范围,不仅人需要懂的语义,机器也需要懂语义 3. 完成一份在线简历: 1. “简历” 阅读全文
posted @ 2019-01-05 23:59 李想12 阅读(159) 评论(0) 推荐(0) 编辑