H5与css
一阶段
遥远的理想国
这个作者很懒,什么都没留下…
展开
-
el-menu的collapse展开隐藏功能导致的视口宽度/高度异常问题
其中flex:1使得该盒子覆盖当前页面剩余的部分,width使用了calc的写法,使得其宽度得到了控制。改盒子的完整css为。这时候对异常的盒子进行css修改,这里导航的默认展开宽度为200px,所以我设置div的css为。原创 2023-01-12 16:51:13 · 1838 阅读 · 0 评论 -
JS的书写位置与类型
js书写位置内部样式: 标签为<script>,位置通常在body标签里面的下部.外联样式: 使用script src标签引入外部js文件.内联样式: 使用a标签时用JavaScript: js内容的方式写在href属性的值里面.注:在外联中只可引入文件,直接写脚本将无效.需要另起scrpit标签js数据类型五个常用数据类型:number, boolean, string, null ,undefined.数据类型检测typeof(value)或typeof value原创 2020-08-03 17:32:43 · 160 阅读 · 0 评论 -
渐变与过渡,旋转,位移,缩放
线性渐变 — background: linear-gradient()通常使用background: linear-gradient(to right, red ,blue) 属性,意思是,向右渐变,红变蓝.其中right属性也可以用right top等表示角落.也可以使用角度表示渐变方向,background: linear-gradient(10deg, red, blue)径向渐变 — background: radial-gradient()使用background: radial原创 2020-08-01 10:31:50 · 393 阅读 · 0 评论 -
Week 3 移动端布局
成果:大众点评采用了rem和meta标签,用flex对移动端进行适配.经过多个设备测试,都能达到预期效果.成果2:美团外卖这个做的比较仓促,不过速度比上一个大众点评要快一倍左右.可能有少许bug.其实还是多练,没啥要诀...原创 2020-07-27 20:03:29 · 91 阅读 · 0 评论 -
媒体查询与响应式设计
媒体查询通过对访问用户的设备的一些属性的检测来为特定属性设备输出结果,简单来说就是访问用户用的手机,就输出手机格式给他,是pc就输出电脑格式给他.下面表示当pc端屏幕只有在大于等于320px的时候才会显示蓝色背景.@media screen and (min-width: 320px) { div{ background-color:blue;}}常用的设备属性为screen — pchandled — 移动端all — 所有设备tv — 电视还有断点,原创 2020-07-27 19:53:57 · 135 阅读 · 0 评论 -
背景图属性与flex补充
background-origin 背景原点默认值:padding-box, 表示背景图在填充框的位置常用值content-box, 表示背景图在内容的位置border-box, 表示背景图在边框上注: 边框>填充框>内容,根据盒模型的定义来的background-clip 背景裁切规定背景图的裁切区域,默认值 border-box;content-box和padding-box也是可选值.多背景权重:多个背景使用的时候,如url(a,b,c)前面的权重更高.会显示在原创 2020-07-24 16:11:53 · 372 阅读 · 0 评论 -
结构伪类与伪元素选择器
li:nth-child(n){}li:last-child{}li:first-child{}li:nth-last-child(n){}li:nth-first-child(n){}按顺序分别是第n个元素最后一个元素第一个元素倒数第n个元素正数第n个元素空伪类选择器::empty{}排除伪类选择器:li:not(p){}li:not(class*=li2){}...原创 2020-07-22 14:00:57 · 247 阅读 · 0 评论 -
css3自定义开关
效果如下:结构则是把input放在最上面并透明化,下面放.button,其中要用到定位(其实用margin也可以)过渡效果```html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 240px; height: 80px; backgro原创 2020-07-22 13:23:46 · 138 阅读 · 0 评论 -
H5补充2
表单属性补充h5新增了 email,number,date,url,range属性值,可以实现对邮箱,数字,日期的检测,新增与input联动的标签<datalist>,提供一个下拉列表给input内容,并且在用户输入的时候会联想预设内容.<label> <span>学员爱好:</span> <input type="text" list="data" placeholder="睡觉"> <datalis原创 2020-07-21 17:37:14 · 113 阅读 · 0 评论 -
H5补充1
border-sizing这个属性用于计算盒模型的宽高,由于浏览器的兼容问题,主要是ie低版本的问题.有两个属性:border-sizing: content-box;或者border-sizing: border-box;前者是css默认的宽高计算方法,就是 width = 内容的宽度, height = 内容的高度.后者则是被称为怪异盒模型, width = 内容的宽度+border的宽度+padding的宽度, height = 内容的高度+borderde的高度+padding的高度.H原创 2020-07-21 12:35:41 · 134 阅读 · 0 评论 -
表格部分属性补充
Layout表格本身的宽度是浏览器自定的,所以在宽高设置不起作用的时候使用table-layout将表格的布局换位固定布局,就可以实现对表格宽高的设置了.table{ table-layout: fixed; width: 400px; height: 300px;}选中奇行使用tr:nth-child(even)或者tr:nth-child(2n+1)tr:nth-child(even){ background-color: #008DE1; }选中偶行使用tr:nth原创 2020-07-20 17:47:11 · 63 阅读 · 0 评论 -
自定义表单按钮
目标样式为概念作品,使用input和span标签,通过透明与定位来达成目的.<div class="l"> <input type="file"> <span>点击</span> </div>input{ height: 60px; width: 100px; position: absolute; opacity: 0; } span{ display: bl原创 2020-07-20 17:18:37 · 259 阅读 · 1 评论 -
表单字段集与label属性
表单字段集使用<fieldset> <legend></legend></fieldset>来表示表单,如<form> <fieldset> <legend>表单名字</legend> <label for="a1">冲冲冲</label> <input type="text" id="a1"> <fieldset原创 2020-07-20 17:09:11 · 882 阅读 · 0 评论 -
Week 2 总结
问题在实践中发现自己经常写着写着就不知道自己干啥经常忘了给盒子加宽高,或者在元素是否要设置宽度上面让自己捉摸不定,从而导致页面布局出问题经常在符号和单词上面出错…心得解决问题对我来说并不难,难的是下一次再遇到这个问题能够想起来解决办法,而不是再来研究一遍.所以及时归纳总结自己的难点很重要.还是需要多多练习,才能做到像老师那样自如.跟同学们讨论问题还是很有收益的,互相帮助又加强了自身对知识的理解.关于老师为啥晚自习和周六看不到老师来转教室…...原创 2020-07-18 22:49:01 · 108 阅读 · 0 评论 -
Day 10 css补充
滚动文字<marquee></marquee>啊这,太糟糕了.粘性定位相当于平时是relative,在用户滚动到一定地步时转换为fixed.这个一定地步一般由top down left right来定. position: sticky; top: 0;最小高度min-height: value;在IE6及以下的浏览器版本中,是不支持这行代码的.IE6 及以下 height 就相当于 min-height 的作用.权重css中,权重最高的并不是行内样原创 2020-07-18 23:08:08 · 74 阅读 · 0 评论 -
设置版心
html<div class="news"> <div class="container"> <div class="newLft"></div> <div class="newcenter"></div> <div class="newRight"></div> &l原创 2020-07-17 13:03:34 · 1140 阅读 · 0 评论 -
元素的层级
给元素设定属性:z-index: value;其中value的取值范围为R.数值越大优先级越高,越会显示在上面.注意只有拥有定位属性(relative,fixed,absolute)的元素才能使用层级属性.没有设置层级属性的时候,默认值为0.没有设置层级属性的时候,有定位的元素会在上面....原创 2020-07-17 12:56:47 · 161 阅读 · 0 评论 -
css隐藏元素的方法(三种)
只要做到从视觉上看不到元素就行,看不到==隐藏.方法一: 使用display:none;隐藏元素给元素的css属性中添加display:none;隐藏目标的同时还不占位置.方法二: 通过改变元素透明度隐藏元素当元素完全透明的时候就是隐藏了,opacity:0(取值范围0-1),0为完全透明,1为完全不透明.,这个方法会继承到子元素,使用的时候要看清了.方法三: 使用visibility:hidden;隐藏同样是给css属性添加,但是占位置...原创 2020-07-17 12:49:21 · 1375 阅读 · 0 评论 -
css精灵图的使用
精灵图如图所示精灵图可以优化网页加载逻辑,提升用户体验,通俗的说就是图片加载更快了.目前其主要是用在背景图上.用法html如下:<div class="box"> <span></span></div>css.box{ height: 1080px; weight: 1920px;}.box span{ background: url(images/abcd3.jpg) no-repeat; background-positi原创 2020-07-17 12:35:37 · 165 阅读 · 0 评论 -
用锚点链接实现内容或图片的页内切换
成果演示http://148.70.92.46/H5/html&css/anchor/anchor1.html如图所示:使用了定位和锚点链接的方式,html结构如下所示:<div class="box"> <div class="all"> <div class="big"> <img id="a01" src="images/banner_01.jpg" > <img id="a02" src="im原创 2020-07-16 13:19:19 · 1412 阅读 · 0 评论 -
使用定位让css中元素水平垂直居中
定位的四种属性static,也是其默认属性,属于静态定位,约等于没有定位.给什么值也不会发生位置的改变.relative 相对定位,单独使用时会相对自身的位置进行偏移.原位置得以保留,所以并没有脱离文档流,absolute 绝对定位,单独使用时会相对页面(body)进行偏移,若其父元素有除了static之外的定位属性,则会相对父元素进行偏移.原位置不保留,所以为脱离文档流.fixed 固定定位,相对于浏览器进行定位,原位置不保修,所以为脱离文档流.原理第一种方法: 水平和垂直居中的方法几乎原创 2020-07-16 13:03:22 · 692 阅读 · 0 评论 -
元素类别转化
元素类型有三:块级元素,行内元素,行内块级元素.块级元素其中p,div,ul等皆为块级元素,其特点是独占一行,从上到下排列,可以设置宽高,行高,边距.宽度默认父元素宽度行内元素而a,span等元素为行内元素,其特点是共享一行,从左到右排列,不可以设置宽高.宽度是内容的宽度,不可改变.行内块级元素如img,input,其特点是共享一行可以设置宽高转化使用display: value;转化为目标元素属性.其中,block为块级元素,inline为行内元素,inlin原创 2020-07-15 13:22:10 · 84 阅读 · 0 评论 -
清除浮动
何谓浮动元素向左或向右移动,会影响页面布局,可以理解为把元素漂浮了起来.什么时候要清除浮动?当父元素由于某些原因[^1]不能写出其高度的时候,此时如果子元素写出浮动,则会使得父元素高度为0,进而出现布局问题,此时需要清除浮动.如何清除浮动?给定一个页面:<body> <div class="box"> <div class="dv1"></div> <div class="dv2"></原创 2020-07-15 12:35:55 · 77 阅读 · 0 评论 -
长文本超出部分转为省略号
长文本超出部分转为省略号要满足三个条件:文本要超出,如设置宽高的同时,添加white-space属性,使其强制一行输出(也可用于指定行)要使用overflow: hidden来使其隐藏转化省略号则用text-overflow: elliellipsiscss代码p{ width: 300px; height: 100px; background-color: yellowgreen; /* **单原创 2020-07-15 11:38:21 · 216 阅读 · 0 评论 -
pre在html和css中的实现
简单看一下效果,前面是<p>标签,后面是<pre>标签.html代码如下:<p> 今天下雨 随时记得带伞 你不用没关系 主要是下课的时候 看看哪个同学没有 你就... </p> <!-- 预格式化标签 保留你的所有格式 你写的是什么 显示出来就是什么 --> <pre> 你就去送伞原创 2020-07-14 17:58:18 · 1991 阅读 · 0 评论 -
CSS的overflow属性简析
overflow定义:设定如果内容溢出元素设定范围后该怎么做.overflow:visible;默认属性,就是毫不作为,让内容跑到元素外面去.overflow:hidden;常用属性,超出的部分给他隐藏了.overflow:auto;常用属性,父元素中内置滚动条来处理,根据内容的具体宽高生成上下或左右滚动条.overflow:scroll;在父元素中强制内置滚动条,即使内容并没有超出元素给定宽高.overflow: inherit; 继承父元素的属性,可用于在父元素有滚动条的前提下,给子元素中内原创 2020-07-14 11:45:34 · 2910 阅读 · 0 评论 -
塌陷问题
塌陷:两个嵌套的元素,如果给子元素margin-top属性,则这个属性会错误的同时传递给其父元素,使得两个元素同时拥有margin-top属性.p{ margin-top:20px;}div{ p{}}解决办法:overflow: hidden; 这个属性可以隐藏超出部分的内容,用在这里可以纠正塌陷问题,使得父元素div不受到子元素margin属性的影响.border,padding利用给父元素添加上边框或者上内边距的方法来解决此问题,需要设置边框或边距为1px,且颜色与父元素原创 2020-07-14 11:26:35 · 104 阅读 · 0 评论 -
如何用border画出一个三角形
只用html和css语言画三角形,不使用画布…html代码如下:p{}css代码如下:p{ width: 0px; border: 40px solid #fff; border-bottom: 40px solid #ccc;}原创 2020-07-14 11:15:15 · 201 阅读 · 0 评论 -
Day6 边距
边距外边距margin: 上 右 下 左指的盒子与盒子之间的距离塌陷 *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; background-color: #ccc; /* 万能老司机 */ overflow:hidden; /* border-top:1px solid #000; */ } .dv{ width:原创 2020-07-13 17:59:54 · 87 阅读 · 0 评论 -
Week 1 总结
第一周的实践为使用已学知识模仿搭建网页.目标网页为目前做的成果为:http://148.70.92.46/H5/Day%205/index.html总结了几个问题:关于盒子内文字垂直居中的问题:关于审视页面的问题:关于纠错的问题:剩下的下午再补充吧,恰饭...原创 2020-07-11 11:59:55 · 74 阅读 · 0 评论 -
Day 5 浮动与边框
浮动定义脱离普通标准流,实现到达父元素之内的指定位置的目的 float: right/left/none(默认);浮起来,不会占用父级元素(如div)的位置,从而导致:未设置高度或者宽度的父级元素出现高度或宽度为0的现象,影响布局.若设置不妥仍会影响布局.浮动依然会受到外边距和内边距的限制,以及其中boder所导致的宽度或高度的影响.浮动书写的先后位置会影响实际位置.边框简写的第一个参数为框的宽度,第二个参数为框的类型(如实线,虚线,圆形等),第三个参数为颜色: borde原创 2020-07-11 09:12:07 · 86 阅读 · 0 评论 -
Day 1 ps的部分操作
Day 1常用 ctrl + s 来保存PS的操作Ctrl + R 打开标尺工具查看: 点击左边工具栏里面的 矩形选框工具 按 F8 查看宽度和高度清除: 点击左边工具栏里面的 移动工具 拖拽参考线即可 或者 在 视图 里面的 清除参考线裁剪: 点击左边工具栏里面的 裁剪 -> 切片5.存储切片 Ctrl + shift + alt + s 存储为web可用模式 并选择存储当前切片 或 所有用户切片清除切片 视图 -> 清除所有切片...原创 2020-07-10 09:26:24 · 58 阅读 · 0 评论 -
Day 2 html属性
Day 2web标准结构 : 元素整理 html表现 css行为 : 用户交互 JavaScript站点一个站点即为一个文件夹,其中包括index.html起始页, js 和 css 以及 html 文件夹命名规范: 小写字母 、 数字 及 下划线字符集utf-8 是标准字符集. gbk 和 gb2312 则为中文和简中字符集标签&nbsp 为空格<hr/> 为水平线列表有:有序列表<ul>与<li>原创 2020-07-10 09:25:47 · 76 阅读 · 0 评论 -
Day 3 html表单
路径相对路径的上一级目录表示为…/再上一级目录表示为…/…/再再上一级同理图片与链接都可以设置<title> 属性来设置悬停显示信息href = “#” 可以跳转到自身表单属性method 提供post 和 get两个值,分别表示为不通过地址栏显示表单信息 和 通过地址栏显示表单信息,前者相对安全action 属性为存放后台的地址name为信息名词,type为信息类型, 目前可用submit,text,password,email等23个类型radio 单选框,原创 2020-07-10 09:24:07 · 60 阅读 · 0 评论 -
Day 4 css选择器+文本/列表/背景
css选择器id和class的名称不能用数字开头,不建议用大写开头群组选择器,当各个类的样式有相同的需求的时候,会用到这个,样式为:.class1, .class2{background-color: red;}通配符选择器,优先级最低的选择器:*{ font-size:17px; }style标签在任何地方都生效,但是建议在<head>内,否则容易出现用户打开网页,样式缺没有加载出来的问题.子元素选择器,只能对该元素的下一级元素生效:.class1>原创 2020-07-10 09:21:52 · 77 阅读 · 0 评论