
h5+css
文章平均质量分 66
h5+css
立志成为大佬的前端小白
这个作者很懒,什么都没留下…
展开
-
属性选择器,结构伪类选择器以及后代选择器和子选择器
属性选择器语法:E[类型]{ }:给某一类型的元素设置样式例子:[type=password]{ width: 500px; height: 60px; background-color: honeydew; }注意:=后面不能有 “:”".""//",如果必须要用,加引号。缩小范围可加:E[attr^=”value”]:设置sttr是以y开头的样式,其中sttr也可以是类,id,标签例子:原创 2021-07-27 19:53:18 · 215 阅读 · 0 评论 -
CSS的字体,列表,背景,以及换行,大小写转换属性设置笔记
一.字体属性的设置1.color:red/#ff0000/rgb(23,333,45);设置字体颜色2.font-size:;设置字体大小3.font-weight: bold/bolder;加粗4.font: lighter; 取消加粗5.font-weight: lighter;100-900逐渐变粗,100最细6.font-style: italic/oblique;倾斜简写格式:font:style weight size/line-height family 顺序不能改变,famil原创 2021-07-15 19:19:25 · 638 阅读 · 0 评论 -
锚点链接定位实现京东色块跳转和轮播图例子
锚点链接定位什么是锚点链接?网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。作用:在同一页面内的不同位置进行跳转制作锚标记:1.给元素定义命名锚记名语法:<标记 id="命名锚记名"></标记>2.命名锚记连接语法:<a href="#命名锚记名称"></a>举个例子,制作一个京东色块导航栏(不同色块区域跳转):body部分:<div class="box">原创 2021-07-23 21:01:22 · 560 阅读 · 0 评论 -
表单及相关标签和属性笔记总结
表单作用收集用户的信息表单组成表单域: <form name="" method="get/post" action=""></form> 表单控件 : <input type="text" value=""/> 提示信息相关标签和属性<fieldset></fieldset>fieldset表单字段集,相当于一个方框,fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象<legend&g原创 2021-07-26 22:16:28 · 201 阅读 · 0 评论 -
怪异盒和弹性盒子
怪异盒box-sizing用来设置盒模型的解析规则的box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。border-box(按怪异盒模型的规则解析)为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。弹性盒子display:flex/inline-flex设置为弹性盒(父元素添加)说明:flex: 将对象作为弹性伸缩盒显示i原创 2021-08-02 21:55:20 · 175 阅读 · 0 评论 -
语义化标签,自动补齐标签,视频音频标签以及文本盒子的阴影效果
语义化标签头部标签:<header></header>导航栏标签:<nav></nav>内容区标签:<section></section>辅助信息:<aside></aside>文章:<article></article>媒体文件引入:<embed src=""></embed>尾部标签:<footer></footer>独立原创 2021-07-28 21:06:08 · 175 阅读 · 0 评论 -
CSS3浏览器前缀,背景大小,位置,渐变以及过渡效果
CSS3浏览器前缀-ms- -ms-box-shadow IE浏览器专属-moz- -moz-box-shadow 基于Gecko引擎的浏览器(如Firefox)-o- -o-box-shadow Opera浏览器专属-webkit--webkit-box-shadow 基于Webkit引擎的浏览器(如Chrome、Safari)CSS3优雅降级渐进增强渐进增强(ProgressiveEnhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏原创 2021-07-29 20:39:53 · 414 阅读 · 0 评论 -
html表单以及CSS样式的学习总结——day03
一.html表单html表单作用:手机用户信息html语法:选择器(选择符){属性:属性值;属性:属性值;}表单创建:<form method=“get或者post” action=“向何处发送表单数据”></form>输入框:<input >属性:type 定义输入框的类型文本框:type="text“密码框:type=“password“提交框:type=“ submit“ 和 提交按钮 一样按钮框:type=“button“ 单纯的按钮原创 2021-07-14 20:14:41 · 123 阅读 · 0 评论 -
html中的定位以及透明属性笔记和实现骰子点数例子
定位给定元素实现侧边导航栏 以及网页中的广告语法:position: fixed 固定定位+边偏移量才能达到想到达的位置实现效果:div或者某些元素固定在页面的某个位置position:sticky 粘性定位实现效果:如果前面有元素并且元素有高度,那么他会划过元素高度之后再执行定位,如果前面元素没有货高度小于top后面的属性值 他直接开始固定定位position:absolute 绝对定位实现效果:如果父级元素有定位,则根据父级元素位置进行移动,如果没有则逐级向上看,如果找不到就根据浏览器原创 2021-07-20 19:11:28 · 396 阅读 · 0 评论 -
表格相关属性的介绍
表格创建表格表格相关属性宽度 width高度 height边框 border边框颜色 bordercolor背景颜色 bgcolor文字水平对齐 align=“left或right或center”文字垂直对齐 valign=“top或middle或bottom";cellspacing="单元格与单元格之间的间距“cellpadding=“单元格与内容之间的空隙”合并单元格属性: colspan=合并列 rowspan=合并行合并之后需要把多余的单元格删原创 2021-07-23 19:12:33 · 178 阅读 · 0 评论 -
html初学笔记-day02
html笔记——day02一.什么是h5?a.html的第五代;b.是一类技术的总称;二.h5可以干什么?a.页面开发 b.混合式应用 c.所有人机交互的界面三.一个项目的组成1.产品经理【根据用户需求,制作需求文档】2.ui设计【页面的切图】3.前端【实现ui设计图的界面,与后端的交互】4.后端【实现相对应的功能:登录】5.测试【测试程序是否存在bug】四.一个界面的构成html【骨架】+css【样式】+js【行为】其中w3c是html和css的标准 ;ECMA是js 的标准五原创 2021-07-13 19:36:15 · 101 阅读 · 0 评论 -
浏览器窗口标题的小图标以及rem,em,vw等单位
浏览器窗口标题的小图标<title>薛之谦老婆——小爱菊</title><!-- 标题前的图标显示 --><link rel="shortcut icon" href="../图片/4.jpg" type="image/x-icon">效果:rem,em设置单位的区别body部分<section> <div> <p>hahahhahqha</p>原创 2021-08-04 20:07:06 · 340 阅读 · 0 评论 -
BFC以及利用BFC实现自适应两栏布局和双飞翼布局
什么是BFC?BFC 即 Block Formatting Contexts (块级格式化上下文),通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。BFC的触发条件?根元素 html默认就是一个BFCfloat的值不为none 单纯的div不是BFC,如果添加了浮动就是BFCoverflow的值不为visible 单纯的div不是BFC,如果添加了overflow:hidden等就是BFCdisplay的值为 inline-blo原创 2021-07-27 17:57:53 · 604 阅读 · 1 评论 -
CS3样式之3D转换和动画
CSS3的3D设置2d场景,在屏幕上水平和垂直的交叉线x轴和y轴3d场景,在垂直于屏幕的方法,相对于3d多出个z轴Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向transform属性平移transform : translate(200px);平移,默认是X轴移动,可以单位是%,这个%是自己的,不是父元素的transform : translatex(200px);根据X轴给定的参数,从当前元素位置移动。transform : translateY(200px);根据Y轴给定的参数原创 2021-08-02 21:39:30 · 473 阅读 · 0 评论 -
多列设置,媒体查询
多列多栏设置/* 设置分栏栏数 */ column-count: 3;/* 每一栏的宽度 */ column-width: 400px;/* 栏与栏之间的间隔 */ column-gap: 50px;/* 设置内容自适应栏高度,内容会填充满栏的高度 */ column-fill: auto;/* 根据内容和栏数自适应高度,高度由内容决定 */ column-fill: balance;/* 设置栏与栏之间的分割线,类似border-right */ column-rule:原创 2021-08-03 22:22:05 · 111 阅读 · 0 评论 -
垂直对齐方式,overflow,text-overflow,white-space属性和解决高度塌陷的方法总结
overflow属性溢出的内容处理相关属性值:overflow:hidden;溢出隐藏overflow:scroll;显示滚动条【不管是否溢出,一直存在】overflow:auto;溢出时显示滚动条overflow:visible;默认text-overflow属性溢出显示text-overflow:clip;不显示省略号,默认的text-overflow:ellipsis;单行文本溢出时显示省略号white-space属性white-space:normal;默认white-sp原创 2021-07-22 22:08:11 · 1274 阅读 · 0 评论 -
网格布局和js插件引入
网格布局属性display:grid; 设置网格布局grid-template-columns: repeat(几列,每列宽度);grid-template-rows: repeat(几行,每行宽度);grid-template-areas:“a b c” “c d f”;父元素划分区域grid-area:a; 子元素说明自己所属区域grid-gap:行间距 列间距;例子:父元素:子元素这样子可分配区域JS插件的引入利用script标签利用link标签把iconfont.cs原创 2021-08-06 08:34:15 · 229 阅读 · 0 评论 -
浮动和盒子模型(padding,margin,border属性)以及相关问题解决——学习笔记
一:浮动1.什么是浮动?浮动是让元素漂浮在文档页面上面,不再占据文档位置,叫做脱离文档流。2.语法float:left;元素靠左浮动float:right;元素靠右浮动float:none;元素不浮动3.特点:浮动会脱离网页文档,与其他不浮动的元素发生重叠但是不会与文字发生重叠,文字会环绕浮动元素显示4.作用:定义网页中其它文本如何环绕该元素显示就是让竖着的东西横着来注:给一个大盒子放多个元素,元素都加浮动可以排列在一行5.清除浮动clear: none 允许有浮原创 2021-07-18 10:25:52 · 651 阅读 · 0 评论 -
关于HTML5的CSS样式之2D转换
变形属性:transform可以实现元素的位移、拉伸或者旋转等效果2D2D变换,是在一个平面对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸变形属性:transform的所有属性值1、transform:none;默认值2、transform:translate();移动 平移 单位是px3、transform:rotate();旋转 单位是deg deg度数4、transform:scale();缩放 没有单位 默认值是15、transform:skew()原创 2021-07-31 11:34:19 · 396 阅读 · 0 评论 -
元素相互转换(display)和分类以及链接伪类元素
元素之间的相互转换1.什么是元素之间的相互转换?元素类型之间的相互变化2.为什么要转换?优化用户体验:a.标签转化为可以设置宽度高度的元素;b.解决浮动不能解决的一部分问题3.怎么进行元素之间的相互转换display:inline 行内元素/block 块级元素/inline-block 行内块元素/none 隐藏元素这里可以设置有意思的页面效果:隐藏某些内容,当鼠标悬停或点击时出现:body设置:<p>大漂亮<span>小漂亮</span></原创 2021-07-19 21:25:39 · 322 阅读 · 0 评论