CSS
文章平均质量分 53
张登辉的奇妙旅程
记录自己的前端、后端学习路线
展开
-
前端第22天--rem布局
前端第22天–rem布局rem 和 emrem:font size of the root element,rem是相对于根元素来设置字体大小的,这就意味着,我们只需要根据自己的需求在根元素确定一个参考值。em:以使用em为单位的元素本身的font-size大小为参考点,标准不统一,容易造成混乱浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根原创 2021-05-09 22:07:57 · 206 阅读 · 0 评论 -
前端第21天--bootstrap的表单、按钮、图片、字体图标和nav导航类、媒体查询
前端第21天–bootstrap的表单表单<body> <form action="" class="form-horizontal"> <!-- row用form-group代替 --> <!-- 栅格布局中,列用col代替 --> <div class="form-group" > <!-- 通过control-label对label添加样式 --&g原创 2021-04-29 21:06:11 · 169 阅读 · 0 评论 -
前端第20天--bootstrap、栅格系统、辅助类、表格
前端第20天–bootstrapbootstrap 的简介、组成、下载、引入、使用栅格系统原创 2021-04-26 23:10:05 · 102 阅读 · 0 评论 -
前端18、19天--景深、背面不可见、正方体、浮动布局、列表布局、双飞翼布局、固比固、圣杯、flex布局项目
前端18、19天–景深、景深<style> .container { /* transform-style: preserve-3d; */ perspective: 1000px; /* transform: rotateY(30deg); */ width: 300px; height: 120px; border: 5px原创 2021-04-26 22:04:49 · 207 阅读 · 0 评论 -
前端第17天--阴影渐变、背景、过渡、变换、动画
前端第17天–阴影渐变、背景、过渡、变换、动画渐变:.item { height: 200px; width: 200px; background-image: -webkit-linear-gradient(top,green,red,yellow); } .item2 { height: 200px; width: 200px;原创 2021-04-23 07:56:16 · 196 阅读 · 0 评论 -
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC、BFC、H5新特性–2021/4/21HTML5是HTML标准的最新演进版本:1、是一个新的HTML语言版本包含了新的元素、属性和行为。2、同时包含了一系列可以被用来让web站点和应用更加多样化的、功能更强大的技术。(API)之前学的是HTML4.01(Xhtml1.0)2014.10.29,HTML5诞生XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。H5兼容性:chrome://flagsc原创 2021-04-21 22:07:26 · 237 阅读 · 0 评论 -
2021/3/29--前端第15天--csshack、IE6兼容、css单位、BFC\IFC 、布局导航
2021/3/29–前端第15天–csshack、IE6兼容、css单位、布局导航csshack属性值的hack选择器的hack<style> /* 内容css hack */ h1{ color: red; /* ie6下为绿色 */ /* 下划线或者横线 */ _color:green; /* ie 6/7 黄色 */原创 2021-03-30 22:56:51 · 188 阅读 · 0 评论 -
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 · 354 阅读 · 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 · 374 阅读 · 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 · 5910 阅读 · 0 评论 -
前端第10天--css清除浮动的6种方法
2021/3/19–前端第10天–css浮动浮动(原来经常用,因为有副作用,现在被css3的flex布局代替)。不同于标准流,元素按照元素的类型,元素挨着元素进行排列。脱离了标准文档流。初衷是为了解决文字环绕的效果(内容(字)让出浮动部分,但是元素(容器什么的)没有让出)。浮动的特征:脱离文档流、不在占用原来位置。可以使元素从左到右紧密排列。浮动后的元素不存在上下边距合并问题。一个元素设置浮动后,同级元素几乎都要设置为浮动。...原创 2021-03-19 22:57:58 · 202 阅读 · 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 · 217 阅读 · 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 评论