
HTML+CSS
小小竹子
这个作者很懒,什么都没留下…
展开
-
自定义文件上传--记录
<form action="http://localhost:8080/api/fileUpload" method="post" enctype="multipart/form-data"> <label>上传图片</label> <input type="file" name="file"/> <input type="submit" value="上传"/></form>controller代码i原创 2021-03-13 21:02:52 · 111 阅读 · 0 评论 -
HTML元素CSS样式水平居中,垂直居中
水平居中元素为文本或者图片等行内元素时,可以通过text-align:center实现。当设置的元素为块元素时,text-align:center 就不起作用了,这时候分两种情况:1.定宽块状元素通过设置左右 margin 为 auto 即可实现。margin:0 auto2. 不定宽块状元素加入 table 标签;设置 display:inline 方法,然后 text-align:center 实现。与第一种类似,显示类型设为行内元素;优势:不用增加无语义标签缺点:变成了行内元素原创 2021-03-13 15:22:30 · 196 阅读 · 0 评论 -
使用nginx部署HTML项目,静态资源资源无法访问
将项目拉倒nginx/html文件夹下复制nginx/conf/nginx.conf在同级目录,我的取名为nginx/conf/custom.conf修改custom.conf配置文件server { #监听端口 listen 9999; server_name XXX; index index.html index.htm index.php; # root /www/server/phpmyadmin;.原创 2021-03-08 22:04:58 · 2326 阅读 · 0 评论 -
配合form后端实现文件上传upload
1. 前端页面实现主要用来选择并生成文件,然后发送请求//1. 表单<form id="form_file" enctype="multipart/form-data"> <textarea placeholder="输入介绍" name="contentText"></textarea> <!-- 图片选择 --> <a href="javascript:;" > &原创 2021-01-10 16:40:24 · 831 阅读 · 0 评论 -
一个好看的搜索框
<li class="item"> <a href="#" class="search_a"><svg t="1600481293426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1869" width="20" height="20"><path d="M463.04 780.16a323.52 323.52 0原创 2020-09-20 19:46:26 · 788 阅读 · 0 评论 -
Element UI 表单验证-手机号+密码格式+邮箱 输入验证
<el-form-item label="电话:" prop="phone"> <el-input id="phone" v-model="form.phone" placeholder="123" οninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value = value.slice(0, 11)"> </el-input></原创 2020-08-30 14:28:49 · 2794 阅读 · 0 评论 -
jsp页面和中文乱码和请求中文乱码
1. 对于JSP源数据中文乱码简介:Java的内核和class文件是基于unicode的,这使Java程序具有良好的跨平台性,但也带来了一些中文乱码问题的麻烦。原因:主要有两方面,Java和JSP文件本身编译时产生的乱码问题和Java程序于其他媒介交互产生的乱码问题。首先Java(包括JSP)源文件中很可能包含有中文,而Java和JSP源文件的保存方式是基于字节流的,如果Java和JSP编译成class文件过程中,使用的编码方式与源文件的编码不一致,就会出现乱码。在头部添加:<%@ page原创 2020-07-17 11:03:32 · 320 阅读 · 0 评论 -
导航栏的吸顶,在页面顶部静止不动
方法一设置属性position: sticky方法二设置两个同样的导航栏A,B,A设置“display:flex”放在窗口顶部,且默认状态下不可显示B正常位置,正常显示计算 B到文档顶端的高度 - 顶部文档被卷起来的高度当上面计算得到的数值小于等于0时,让A,显示代码如下<style> .compontentTop , .compontentB...原创 2020-02-20 23:49:26 · 1139 阅读 · 0 评论 -
使用关键字,在js查找内存中数据
keyword关键字allArr·需要查验的内容使用正则search() if(allArr.search(keyword)>=0)如果该条件成立,则keyword包含在allArr中。原创 2019-12-10 21:28:33 · 510 阅读 · 0 评论 -
网页设计中,使用JSON+localStorage存储数据(以数组形式),并在界面动态的添加图片
1.使用表单(form)获得数据。从表单中获取数据有很多方法,推荐使用JQuery方法formObj.serializeArray();使用该方法获得数据是一个数组,形式如下0: {name: "title", value: "银翼"}1:……2:…………将数据提取出来,转换为对象形式:function gain(formObj){ var ct=$(formObj).s...原创 2019-12-10 21:20:39 · 1045 阅读 · 0 评论 -
HTML+CSS实现百叶窗的思路,以及JSS实现完整功能
首先,如果是没有学习JavaScript,仅利用CSS思路一般百叶窗中有等数量的大卡片和小卡片,大卡片是基于小卡片的介绍。1.使用ul>li将所有卡片装入进去。2.将所有li的设置为display:block;3. 给所有大卡片添加class=“bug”,所有小卡片添加class=“small”.同时两者都使用transition:width 1s;4. 小卡片设置宽度widt...原创 2019-11-25 10:00:39 · 787 阅读 · 0 评论 -
在网页中看视频时,鼠标焦点一旦点击视频以外区域,视频就会暂停
一个简单方法:在网页中右键单击,点击“检查”或“查看元素”-----》在网页源代码中找到视频 video的id值,然后在控制台(Console)中输入setInterval(function(){document.getElementById("video_id").play()},10);点击回车注意输入时不能换行,...原创 2019-11-18 21:05:36 · 9300 阅读 · 4 评论 -
页面元素根据浏览器窗口大小变化而有比例地伸缩,无滚动条
我要做的页面是:一个与浏览器窗口等大的页面,整个窗口被一个等大的视频覆盖。页面内容按照浏览器窗口大小的变化而自动伸缩变化,页面布局不变。同弹性布局、流式布局不同,这个方法简单有效。HTML代码如下:<div class="page" id="page" style="zoom: 1"> <video src="视频地址" id="video" muted autop...原创 2019-11-14 16:49:57 · 1895 阅读 · 0 评论 -
css或Js制作简易轮播图
我学习的时候总结了几种简易的轮播图设计方式,总结如下。1. 仅使用CSS+HTML=淡入淡出型html代码如下(使用animation方法,具体如何使用,请参考:https://blog.youkuaiyun.com/cuishizun/article/details/82347015)<div class="banner_out_head"><!--三个轮播图所需要的图片,放在di...原创 2019-10-27 13:05:04 · 409 阅读 · 0 评论