![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css
htnl+css基础练习和项目
过客尘烟
这个作者很懒,什么都没留下…
展开
-
css制作导航栏的三角形
在做网页的时候我们通常看到这样的需求(做一个三角) 首先 .box{ width: 0; height: 0; border: 50px solid ; border-color: #000 #FF0000 #FFFF00 #00FFFF; } </style> </head> <body > <div class="box"></div> </body> 你原创 2021-03-04 20:34:06 · 740 阅读 · 1 评论 -
css3 filter属性
原图 <style> img{ width: 100px; height: 100px; filter: grayscale(100%); } </style> </head> <body> <img src="./img/f.PNG"/> </div> (1)灰度100% (2)褐度 filter原创 2021-03-03 21:23:56 · 119 阅读 · 1 评论 -
本地存储 localStorage
一、什么是本地存储? 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。 在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。 与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。 二、本地存储使用方法 下面代代码片段通过localstrorage var tool=localStorage.getItem('li原创 2021-03-03 15:18:17 · 2137 阅读 · 1 评论 -
移动WEB开发之流式布局
1. 移动端基础 1.1 浏览器现状 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内 的手机操作系统都是基于Android修改开发的一样。 总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。 2. 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布原创 2021-02-27 13:16:29 · 172 阅读 · 1 评论 -
css3新增选择器
(1)css3属性选择器 <style> /* 属性选择器使用方法 */ /* 选择的是: 既是button 又有 disabled 这个属性的元素 */ /* 属性选择器的权重是 10 */ /* 1.直接写属性 */ button[disabled] { cursor: default; } button {原创 2021-02-25 15:54:52 · 263 阅读 · 0 评论 -
HTML5学习
1.H5并不是新的语言,而是html语言的第五次重大修改一版本 2.改变了用户与文档的交互方式:多媒体:video audio canvas 3.增加了其它的新特性:语义特性,本地存储特性,网页多媒体,二维三维,特效(过渡,动画) 4.相对于h4: 进步:抛弃了一些不合理不常用的标记和属性 新增了一些标记和属性一表单 从代码角度而言,h5的网页结构代码更简洁。 下面详细的j介绍html5新增加的东西:我写这个主要复习 表单 1. 表单新增的type属性 邮箱:<input type="emai原创 2021-02-25 15:02:38 · 117 阅读 · 0 评论 -
css百叶窗效果
<div class="a"> <div class="b"><img src="1.jpg"></div> <div class="b"><img src="2.jpg"></div> <div class="b"><img src="3.jpg"></div> <div class="b"><img s.原创 2021-01-29 20:16:28 · 174 阅读 · 0 评论 -
css华为手机充电效果
<div class="container"> <div class="num">50%</div> <div class="circle"></div> <div class="boxs"> <div class="box"></div> <div class="box"></div> <div原创 2021-01-28 17:09:30 · 266 阅读 · 0 评论 -
双飞翼布局和圣杯布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。 双飞翼布局 <div class="box"> <div class="main"> <div class="main_c">中间</div> </div> <div class="left">左边</div> <div class="ri原创 2021-01-28 14:02:17 · 66 阅读 · 0 评论 -
页面加载loading动画
页面加载loading动画 body部分 <div class="box"> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"&原创 2021-01-26 22:30:51 · 457 阅读 · 0 评论 -
canvas简单画的一个贪吃蛇
代码如下 <canvas id="hb" width="600" height="600"> #hb{ background: #33cc99; margin-left: 200px; margin-top: 100px; } window.onload=function () { var h=document.getElementById('hb'); //取.原创 2021-01-26 17:16:32 · 297 阅读 · 1 评论 -
javascript做的拼图游戏
<div id="container"> <!--最外面的DIV,用来包含里面的结构--> <div id="game"> <!--游戏区,大DIV方块--> <div id="d1" onclick="move(1)">1</div> <!--小DIV,也就是8个小方块。当点击的时候执行move()函数,参数是显示的编号,这样我们就知道点击了哪个方块-->原创 2021-01-26 17:10:24 · 181 阅读 · 0 评论 -
3D立方体旋转
制作立方体构思 1:要想做一个立方体首先是做6个面 (以中间为基准)中间向前面平移150px(transform: translateZ(150px)),后面也平移150px, 然后旋转 rotateY(180deg),这样前后面就做完了。 左:以中间为准逆时针针旋转90度(rotateY(-90deg)) 右:以中间为准顺时针针旋转90度(rotateY(90deg)) 左右都平移150px translateZ(150px) 上下道理都一样 <div id="warp">原创 2021-01-26 17:05:25 · 1201 阅读 · 1 评论 -
css3动画属性系列之transform
css3动画属性系列之transform 1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准 transform:scale(2,2.5); 2、 scaleX() 元素只在X轴(水平方向)缩放元素。 默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点 transform:scaleX(2); 3、 scaleY() 元素只在Y轴(转载 2021-01-26 15:50:29 · 120 阅读 · 0 评论 -
响应式布局媒体查询
css中媒体查询是什么?怎么使用? 媒体查询限制CSS样式的范围,以便仅在满足某些媒体条件时才适用。 简单来说:媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式。 媒体查询可用于检测的媒体特性,比如: width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。 媒体查询具体使用 @media [not | only] [and] (); @media screen { body{原创 2021-01-21 16:25:26 · 253 阅读 · 1 评论 -
行内元素有哪些?块级元素有哪些?行内元素如何转换为块级元素?
行内元素有哪些?块级元素有哪些?行内元素如何转换为块级元素? 行内元素:(以下列举比较常用的行内元素,详情可在w3cschool查询) <a>定义超链接 <b>字体加粗 <span>定义在文档中的行内元素 <img>向网页中插入题图像 <input>输入框 <small>小号字体效果 <br>换行 <big>字体加大加粗 <strong>强调的语气 <select>创建单原创 2021-01-15 17:26:36 · 2036 阅读 · 0 评论 -
css display:flex 属性
display:flex 属性 display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 ...原创 2020-12-17 10:34:23 · 322 阅读 · 0 评论