Haiji_-CSDN博客

一、代码部分<!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>Docu

2022-05-30 14:16:39 590

原创 Task04 css排版设计

Task04 css排版设计练习内容与经验总结结果css练习内容与经验总结该项目主要是练习盒模型，浮动及浮动清除.首先应注意标签的语义, 标签的使用, 元素定位(选择器), css样式搭配可以提升代码的书写使用浮动可以对文字的首字符以及图片内图片进行排版浮动会使得父元素的高度塌陷, 给父元素设置高度方可撑开盒子, 并清除浮动适当使用line-height, padding等属性可以帮助布局结果css<div class="page-container"> <div

2022-03-18 11:04:40 279

原创在vue中优雅的使用.svg

在vue中优雅的使用*.svg在webpack.base.conf中配置svg的依赖和loader插入svg-sprite-loader包在src文件夹下创建icon文件夹：注册一个全局组件icons下的index.js中写入main.js中引入icon愉快的使用svg-icon组件吧！在webpack.base.conf中配置svg的依赖和loader{ test: /\.svg$/, loader: 'svg-sprite-loader', //配置loader处理svg文件 i

2021-12-09 17:17:35 476

原创使用Geoserver1.19.1内置GeoWebCache + openlayers发布并调用Arcgis瓦片步骤总结

GeoWebCache发布Arcgis瓦片步骤与踩坑总结一、版本列表二、Geoserver内置GeoWenCache配置部署一、版本列表项目版本Geoserver1.19.1GeoWebCache1.19.1GeoWebCache版本需要与Geoserver对应，测试使用GeoWebCache1.15.1发布的瓦片无法预览。二、Geoserver内置GeoWenCache配置部署在\webapps\geowebcache\WEB-INF中修改web.xml文件，

2021-11-17 21:20:37 1211 1

原创【css】border制作各种样式：圆形、三角形、同心圆

【css】border制作各种样式：圆形、三角形、同心圆<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #content { border: 1px solid #000000; width: 700px; margin: 0 au

2021-11-17 21:18:02 425

原创前端利用JSzip实现url图片的压缩

前端利用JSzip实现url图片的压缩一、安装JSZip二、实现代码一、安装JSZipnpm install jsziphow to use JSZip：链接: https://stuk.github.io/jszip/documentation/examples.html.二、实现代码由于JSZip只接受二进制文件流，需要转换为base64图片。//使用canvas.toDataURL获取base64function getBase64Image(img) { let canvas

2021-11-11 15:09:19 826

原创 Task03 制作一个奶茶点餐页面

Task03 制作一个奶茶点餐页面一、结果二、注意事项三、直接上码一、结果二、注意事项表单页面与提交页面分别使用section标签包装。form标签包装整个表单，其中action属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。.method定义发送数据的HTTP方法，POST or GET，二者没有本质上的区别。使用label 的 for 属性与表单元素的 id 属性相对应，可以通过label定位表单元素。使用内置属性及正则表达式进行验证。三、直接上码&

2021-10-28 15:50:19 1008

原创 Task02 实现一个美食营养表

Task2-Table相关一、结果展示二、小结：三、代码：一、结果展示二、小结：首先将表格分为thead 和两组 tbody (使得父标题与子标题之间的关系更加明确)算好colspan 和 rowspan注意标签语义，即th 和 td的运用添加scope属性，明确标题管理的是行还是列三、代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit

2021-10-28 10:33:01 160

原创 Task01 文字高级格式化

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>语义化</title></head> <header> <h1>文章分享博客</h1> <p>发布于 <time datetime="2020-01-06">2020-01-06</time

2021-10-27 22:12:56 99

翻译前端技术学习：语义化

前端技术学习一、语义化1. 为什么要使用语义化2. 语义化标签（1）容器标签articalsectiondiv（2）关于页面的标签navasideheadermainfooter（3）表单（Forms）inputemailpasswordnumbersHidden fieldsubmit表单验证upload filebuttonRadio buttonsCheckboxesDate and time。。。（4）Select（5）Tables（6）Multimedia tagsaudiovideo（7）IFr

2021-10-25 16:20:03 871

weixin_43086941的博客

原创 JS对象与数组的相互转换

原创 css绘制一个动态雷达图