HTML/CSS
关注
分享
扫一扫
一只顾小白
代码小白 整理自己的学习笔记
展开
-
HTML/CSS 变形（盒子水平垂直居中）、过渡、动画 （学习整理）
变形transform:scale(*)>1放大 0-1缩小 <1基于中心点对称transform:rotate(？deg)deg(度数） 正值-顺时针旋转 负值-逆时针旋转transform:skew(？deg)扭曲效果transform:translate(？，？)平移 第一个值为x轴平移距离第二个值为y轴平移距离使用translate让盒子水平垂直居中 <style> .fa原创 2020-08-29 16:37:57 · 637 阅读 · 0 评论 -
HTML/CSS父元素flex布局（学习整理）
flex弹性布局display:flex 设置内部内容为flex布局flex-wrap：wrap(换行) nowrap(不换行) flex子元素换行flex-direction:row(默认横向) column(竖向) flex布局方向align-items:center(垂直于主轴居中)justify-content:space-between均匀等分在盒子里，并且两边没有空格space-around均匀等分在盒子里，并且两边有空格cent原创 2020-08-29 15:30:42 · 370 阅读 · 0 评论 -
HTML/CSS盒子浮动、定位、隐藏(省略号）（学习整理）
浮动float常用float：left（左浮动） right（右浮动）解决父元素塌陷问题的方法（很多情况下父级盒子不给高度，考虑子盒子高度会变）给父元素一个固定的高度在父元素中子元素的最后添加一个div子元素，并且设置其样式为clear：both给父元素添加css样式 overflow:hidden伪类设置：在父元素中设置 <style> div ::after{ content: ''; display: bl原创 2020-08-29 14:50:58 · 766 阅读 · 0 评论 -
HTML/CSS盒子模型（学习整理）
边框borderborder-width: 边框宽度border-color: 边框颜色border-style: 边框样式 solid(实线) double(双实线) dashed(虚线)还可以分别设置四条边的border属性border属性border-right-width/style/colorborder-left-width/style/colorborder-top-width/style/colorborder-bottom-w原创 2020-08-27 14:02:46 · 144 阅读 · 0 评论 -
HTML/CSS列表，表格，表单（学习整理）
列表<style>ul{ list-style:none; } </style>清除ul前面的默认样式 一般写代码时不需要前面的数字或者图形ul无序列表<body> <ul> <li>苹果</li> <li>西瓜</li> <li>葡萄</li> <li>榴莲</li&g原创 2020-08-27 11:24:33 · 846 阅读 · 0 评论 -
HTML/CSS中文字，文本，图片及背景图设置（学习整理）
文字样式-font-family:字体<style> div { font-family: '宋体'; } </style> 设置字体为“宋体”font-style:字体样式<style> div { font-style: italic; } </style> 设置字体样式为倾斜font-weight原创 2020-08-27 09:53:41 · 2257 阅读 · 0 评论 -
HTML/CSS选择器（学习整理）
CSS样式写的位置行内样式 例如<div style="color: red;">aaa</div>直接写在标签内的样式为行内样式内部样式<style> @import url('CSS文件所在位置'); </style>外部样式<link rel="stylesheet" href="css文件所在位置">常用外部样式引入引入方式优先级（就近原则）：行内>内部>外部选择器原创 2020-08-26 20:07:20 · 151 阅读 · 0 评论 -
我的HTML/CSS入门
我的HTML/CSS入门Html：超文本标记语言（切记不是编程语言 不是编程语言 不是编程语言）我使用的软件： Visual Studio Code (VScode)部分常用快捷键：刷新浏览器 ctrl+F5关闭当前页面 alt+F4快捷复制 alt+shift+下箭头部分选择 shift注释代码 ctrl+/快速生成对应标签 标签名+Tab<-------------------------------------------------------------------原创 2020-08-26 19:03:14 · 150 阅读 · 0 评论