Html5+Css3+移动Web_前端入门
前端入门
WinFang5
一名热爱前端的大学生
展开
-
css制作旋转图片
<!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.0"> <title>Document&.原创 2021-10-20 17:05:02 · 167 阅读 · 1 评论 -
定位position
文章目录为什么要学习定位定位组成定位模式静态定位(了解)相对定位 relative(重要)绝对定位 absolute(重要)固定定位 fixed(重要)粘性定位 sticky(了解)边偏移绝对定位和相对定位使用场景子绝父相的由来固定定位小技巧:固定在版心右侧位置定位的总结定位叠放次序 z-index绝对定位的盒子居中算法定位特殊特性绝对定位(固定定位)会完全压住盒子为什么要学习定位以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以:1.浮动可以让多个块级盒子一行没有缝隙排列显示,经原创 2021-10-19 11:13:29 · 245 阅读 · 0 评论 -
学成在线案例
案例的全部图片和代码资源在这(0积分下载的):点击跳转准备素材和工具学成在线PSD源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+Chrome(测试)。准备工作采用结构和样式相分离思想:创建stydy目录文件夹(用于存放我们这个页面的相关内容)。用vscode打开这个目录文件夹。stydy目录内新建images文件夹,用于保存图片。新建首页文件index.html(以后我们的网站首页统一规定为index.html)。新建sytle.css样式文件。我们原创 2021-09-28 15:08:42 · 343 阅读 · 2 评论 -
css清除浮动
为什么要清除浮动很多浮动元素有一个标准流的父元素,他们有一个共同的特点,都是有高度的。但是,所有的父盒子都必须有高度吗?理想中的状态,让子盒子撑开父盒子。有多少孩子,父盒子就有多高。由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响所以得清除浮动。清除浮动本质● 清除浮动的本质是清除浮动元素造成的影响● 如果父盒子本身有高度,则不需要清除浮动● 清除原创 2021-09-28 11:36:24 · 111 阅读 · 3 评论 -
清除内外边距
为什么要清除默认的内外边距。网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此在布局前,首先要清除下网页元素的内外边距。方法* { padding: 0; margin: 0;}注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e原创 2021-09-28 09:21:06 · 1633 阅读 · 0 评论 -
外边距合并-嵌套块元素坍陷
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有外边距,此时父元素会坍陷较大的外边距值。这说的是啥???下面看看例子吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-09-28 09:12:21 · 108 阅读 · 0 评论 -
外边距合并-相邻块元素垂直外边距
使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。当上下相邻的两个块元素(兄弟关系) 相遇时,如果上面的块元素定义了 margin-bottom下面的块元素定义了 margin-top 时,就会出现垂直外边距合并。注意:这里的合并,并不是两个值相加。而是取这两个值的最大值。例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2021-09-27 14:52:24 · 433 阅读 · 0 评论 -
外边距典型应用-块级盒子水平居中
外边距让块级盒子水平居中,必须满足两个条件:盒子必须指定了 宽度(width)。盒子 左右的外边距 都设置为 auto。常见的写法,一下三中都可以:● margin: 0 auto;(最常用)● margin-left:auto; margin-right:auto;● margin:auto;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2021-09-27 14:33:09 · 147 阅读 · 0 评论 -
padding会影响盒子实际大小
先上代码<!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.0"> <title>Docum原创 2021-09-27 14:28:00 · 520 阅读 · 0 评论 -
边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:测量盒子大小的时候,不量边框。如果测量的时候包含了边框,则需要width/height减去边框宽度例子:要求:我需要一个100*100的盒子,边框为5px设计:宽(width):100-52 = 90px高(height):100-52 = 90px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-09-27 14:19:03 · 691 阅读 · 0 评论 -
表格细线边框
效果图HTML部分<body> <table cellspacing="0" align="center"> <thead> <tr> <th>交易日期</th> <th>市场类别</th> <th>本日融资余额(元)</th> <th>本日融资买入额(元)</th>原创 2021-09-14 16:58:42 · 144 阅读 · 0 评论 -
盒子模型边框border
语法简写:border:border-width || border-style || border-color,没有顺序。不过一般是按这样写。写border的话是四边都有边框,要指定哪边的话,加上-top,-right,-bottom,-left。属性作用border-width边框粗细,单位:pxborder-style样式border-color颜色border-style,主要记住三个值就好,分别是:solid(实线边框)、dashed(虚线边框)、原创 2021-09-14 14:34:20 · 132 阅读 · 0 评论 -
盒子模型组成
css盒子模型本质上时一个盒子,封装html元素,它包括:边框(border)、外边距(margin)、内边距(padding)、和实际内容(content)原创 2021-09-14 10:53:04 · 69 阅读 · 0 评论 -
css权重的叠加
如果是复合选择器,则会有权重叠加,需要计算权重。<!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.0">原创 2021-09-13 21:14:06 · 213 阅读 · 0 评论 -
css三大特性
层叠性、继承性、优先级层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠<style> div { background-color: blue; width: 100px; height: 100px; } div { background-color: red;原创 2021-09-13 09:21:39 · 80 阅读 · 0 评论 -
设置盒子背景色透明度
background: rgba(red,green,blue,alpha)前三个值就是填rgb的三个值,最后一个值alpha填透明度:0~10是全透明,1是完全不透明效果是盒子可以透明,字不会受影响。 <style> body { background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210908/78624200846891.png); } div原创 2021-09-12 18:42:02 · 5597 阅读 · 0 评论 -
css背景位置
精确单位background-position:x yx:水平y:垂直方位名词若是x,y使用英文的话,x可以是水平,也可以是垂直如background-position: center top既可以说是水平居中,垂直靠上也可以说是垂直居中,水平靠上它和background-position: top center 的效果是一样的混合单位精确单位和方位名词混合使用的时候,第一个值是x水平方向的,第二值是y垂直方向的如: background-position: 80px cen原创 2021-09-12 13:46:42 · 148 阅读 · 0 评论 -
css-背景
背景颜色视频讲解:点击跳转语法:background-color: transparent或着colortransparent: 背景色透明color:指定颜色背景图片视频讲解:点击跳转背景平铺视频讲解:点击跳转用上background-repeat: no-repeat就可以解决了背景位置-方位名词视频讲解:点击跳转background-position...原创 2021-09-12 13:33:12 · 58 阅读 · 0 评论 -
单行文字垂直居中
让文字行高等于盒子的高度如height: 80pxline-height: 80px原创 2021-09-12 13:26:40 · 45 阅读 · 0 评论 -
元素显示模式的转换
这是就把改为块元素变为块元素:display:block变为行元素display: inline但是由于行元素是不能设置宽度和高度的所以转变为行元素时,宽度和高度不能自定义变为行内块元素display: line-block原创 2021-09-12 13:25:01 · 55 阅读 · 0 评论 -
Emmet语法快速格式化代码
右键点格式化文档或则快捷键:shift alt F (vscode)原创 2021-09-12 13:20:58 · 78 阅读 · 0 评论 -
Emment语法快速生成css样式
tac 加tab 变成text-align:center ti 加tab 变成text-indent:w100 加tab 变成 width:100pxh100 加tablh26 加tab 变成line-height:26pxtdn 加tab 变成text-decoration:none原创 2021-09-12 13:19:50 · 89 阅读 · 0 评论 -
Emmet语法生成html标签
!加tab,生成html骨架div 加 tab 等等div*3 加 tab 等等父子 ul>li 加tab 等等兄弟 div+p 加tab 等等.demo 加tab 等等#two 加tab 等等.demo$5 加tab 等等#demo$5 加tab 等等div{你好} 加tab 等等div{你好}*5 加tab 等等div{$}*5 加tab 等等...原创 2021-09-12 13:16:15 · 61 阅读 · 0 评论