![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5
张登辉的奇妙旅程
记录自己的前端、后端学习路线
展开
-
2021/3/25--前端第14天--淘宝导航栏、遮盖、z-index、html hack等
2021/3/25–前端第14天–淘宝导航栏、遮盖、z-index、hack等淘宝导航栏:固定定位<style> .main { width: 1200px; margin: 0 auto; height: 2000px; background-color: pink; } .slider { height: 200px;原创 2021-03-25 23:12:00 · 355 阅读 · 0 评论 -
2021/3/24--前端第13天--定位
2021/3/24–前端第13天–定位定位脱离文档流三种方法:浮动、绝对定位、固定定位position:relative 相对定位:相对于元素原有位置的定位不受其他元素影响,改变位置但不脱离标准文档流。占了一个坑,但是人不在这向中心偏移为正,向边缘偏移为负<!-- 设置样式 --> <style> div { width: 100px; height: 100px; ba原创 2021-03-24 22:46:17 · 107 阅读 · 0 评论 -
2021/3/23--前端12天--背景属性、定位,精灵图制作
2021/3/23–前端12天–背景、定位背景和精灵图背景属性:.demo { width: 100px; height: 100px; padding: 100px; border: 50px dotted orange; margin: 100px; /* 背景色应用在内容和border区域 */ background-color:原创 2021-03-23 21:40:22 · 161 阅读 · 0 评论 -
2021/3/23--前端布局练习
2021/3/23–前端布局练习要求:解题代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-03-23 08:36:16 · 377 阅读 · 0 评论 -
2021/3/20--前端第11天--浮动之伪类、行内块、margin。
2021/3/20–前端第11天–浮动之伪类、行内块、margin。布局练习伪元素、伪类伪元素用于创建一些不在文档树中的元素,并为其添加样式。我们可以通过:before、:after在一个元素前后添加文本,并给其样式。虽然用户可以看到这些文本,但是文本世界上不在文档树中。伪元素必须设置content样式,否则伪元素不会生效。文档树:https://blog.csdn.net/Cherish1ove/article/details/82826012伪元素清除浮动,代替内墙法:伪类:伪类和伪元原创 2021-03-21 22:40:02 · 103 阅读 · 0 评论 -
web前端--overflow用法详解
overflow三大作用1、隐藏溢出的内容例如:#容器A{ width:50px;}<div id=“A“>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</div>字数过多,宽度较小,装不下自然就会超出容器。overflow:hidden隐藏超出部分文字auto 超出后会显示滚动条scroll 永远有滚动条2、解决外边距塌陷在一个父元素中,子元素设原创 2021-03-19 23:19:51 · 5929 阅读 · 0 评论 -
前端第10天--css清除浮动的6种方法
2021/3/19–前端第10天–css浮动浮动(原来经常用,因为有副作用,现在被css3的flex布局代替)。不同于标准流,元素按照元素的类型,元素挨着元素进行排列。脱离了标准文档流。初衷是为了解决文字环绕的效果(内容(字)让出浮动部分,但是元素(容器什么的)没有让出)。浮动的特征:脱离文档流、不在占用原来位置。可以使元素从左到右紧密排列。浮动后的元素不存在上下边距合并问题。一个元素设置浮动后,同级元素几乎都要设置为浮动。...原创 2021-03-19 22:57:58 · 203 阅读 · 0 评论 -
2021/3/17--前端第9天--display、visibility
2021/3/17–前端学习第9天笔记隐藏元素:display:none 设置显示方式 消失、不占位visibility:hidden 设置可见度:消失占位opacity:0 设置透明度display:none和visibility:hidden(visible)两者的区别:隐藏后一个占位一个不占位。1、visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则原创 2021-03-17 12:59:09 · 222 阅读 · 0 评论 -
2021/3/16--前端学习第8天笔记--制作形状、标准文档流、块、行内、行内块元素
2021/3/16–前端学习第8天笔记制作各类形状:利用border:单双三四、独立值法设置百分比是父元素的宽度乘上百分比.box { /* width: 200px; height: 200px; */ width: 0px; height: 0px; margin: 100px; /* transparent 透明颜色 */原创 2021-03-16 14:31:31 · 151 阅读 · 0 评论 -
2021/3/14--前端第7天盒模型
2021/3/14–前端学习第7天笔记6 盒模型盒子模型的组成:content内容、padding内边距、border边框、margin外边距。盒子模型分类:标准的盒子模型和怪异盒子模型(IE低版本浏览器下自动呈现)CSS3中定义盒子模型 类型属性 box-sizing:content-box | border-boxcontent-box:width、height为内容的宽高。(标准border-box:设置整体border+padding+content的宽高。(怪异 IE其他浏览器都是原创 2021-03-14 21:15:25 · 137 阅读 · 0 评论 -
2021/3/13--前端第6天--高级选择器、权重、层叠
2021/3/13–前端学习第6天笔记高级选择器: <style> /* 后代选择器 */ /* div strong{ color: red; font-size: 50px; } */ /* 增加了限制 */ div p strong{ color: red; font-size: 50px; }原创 2021-03-13 18:56:23 · 183 阅读 · 0 评论 -
2021/3/12--前端第5天通用属性、css引入方式、选择器
2021/3/12–前端学习第5天笔记-开始css通用属性:<!-- 表单 --><form action="/create"> <!-- 用户名 --> <label for="nickname">昵称</label> <!-- name代表字段名称 value代表字段的值--> <!-- 提交的时候 ?xxx=xxx&xxx=xxx --> <!-- disab原创 2021-03-13 00:37:15 · 260 阅读 · 0 评论 -
2021/3/10--前端第4天--表单控件
2021/3/10–前端学习第4天笔记划分区域:caption 表格标题 表头thead 主体部分tbody设置标题:h1-h6 或者caption标签(部分浏览器每个表格只能一个)form标签:功能新标签、不是结构性标签属性:name、action(数据提交地址、method(数据提交方式、target(页面打开方式表单中的控件:textarea文本域(属性(rows、cols、label定义标注:for属性规定label绑定哪个表单控件)select下拉列表 in原创 2021-03-10 18:07:06 · 161 阅读 · 0 评论 -
2021/3/9--前端第3天--列表
2021/3/9–前端学习第3天笔记有序列表:ol 只能嵌套li li容器级标签,可以嵌套任何东西原创 2021-03-10 00:00:47 · 142 阅读 · 0 评论 -
2021/3/7--前端第1天--认识、互联网原理、html和纯文本
2021/3/7–前端学习第1天笔记0讲师-张容铭1认识web前端凡是通过浏览器到用户计算机的技术统称为前端。页面游戏、nodejs、小程序、大数据android和ios的app开发等。薪资一线城市较高。看学历、经验。前端工程师FE 后端RD企业:HTML/CSS/JS VUE/REACT GULP/WEBPACK/NODE.JS LESS/SASS MVVM 后端语言等2互联网原理web前端三大语言:HTML结构、CSS表现、JAVASCRIPT行为。B/原创 2021-03-08 01:09:03 · 213 阅读 · 0 评论