建设互联网站网站文案怎么做

当前位置： 首页 > news >正文

建设互联网站,网站文案怎么做,网站icp备案号怎么查询,临夏州建设厅官方网站文章目录 ⭐前言⭐html标签#x1f496;table表格的属性#x1f496;实现财务报表 ⭐结束 ⭐前言 大家好#xff0c;我是yma16#xff0c;本文分享原生html——绘制表格报表加水印。 背景#xff1a;解决没有ps的情况下使用前端html制作表格报表。 html介绍 HTML#xf… 文章目录 ⭐前言⭐html标签table表格的属性实现财务报表 ⭐结束 ⭐前言 大家好我是yma16本文分享原生html——绘制表格报表加水印。 背景解决没有ps的情况下使用前端html制作表格报表。 html介绍 HTMLHypertext Markup Language超文本标记语言是用于创建网页的标准标记语言。它可以描述网页的结构和内容包括文本、图片、多媒体等。HTML文件可以通过Web浏览器查看并且可以在不同的操作系统和设备上实现网页的一致性效果。HTML是Web开发的基础它和CSS和JavaScript一起构成了Web开发的三大核心技术。 HTML标记语言由一系列的标签和属性组成通过标签来组织页面的结构和内容通过属性来定义标签的行为和效果。这些标记和属性可以用于创建链接、添加图像、格式化文本、制作表格等功能。 ⭐html标签 HTMLHypertext Markup Language是用于创建网页的标准标记语言。HTML标签是用于描述网页内容的元素由尖括号包括例如 html。以下是常用的HTML标签及其作用 html定义HTML文档。 head定义文档头部。 title定义文档标题。 body定义文档主体。 h1 - h6定义标题。 p定义段落。 br定义换行符。 a定义超链接。 img定义图像。 table定义表格。 tr定义表格行。 th定义表格表头单元格。 td定义表格数据单元格。 ul定义无序列表。 ol定义有序列表。 li定义列表项。 div定义文档中的分隔区域。 span定义文本中的小区域。 form定义表单。 input定义输入字段。 select定义下拉列表。 option定义下拉列表中的选项。 button定义按钮。 textarea定义多行文本输入字段。 style定义文档样式。 script定义脚本。 meta定义文档元数据。
table表格的属性 HTML表格的样式属性包括 border表格边框的宽度cellpadding单元格内边距cellspacing单元格间距width表格的宽度height表格的高度background表格的背景颜色或图片text-align表格内容的水平对齐方式left、center、rightvertical-align表格内容的垂直对齐方式top、middle、bottomborder-collapse表格边框的合并属性collapse、separateborder-spacing表格边框的间距caption-side表格标题的位置top、bottomcolor表格内容的字体颜色font-size表格内容的字体大小font-weight表格内容的字体粗细程度line-height表格行高 实现财务报表 html实现财务报表布局 设计思路三方标题、下方表格、全局水印 实现代码如下 !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle.bodyClass {background: rgb(252, 255, 255);/* background: rgb(50, 95, 214); */}.tableBackground {background: rgb(255, 255, 255);}.fontClass {background: rgb(50, 95, 214);color: #fff;font-size:38px;}/style /headbody classbodyClassdiv stylewidth:900px;margin: 50px auto;div styletext-align: centerimg src./logo.gif//divdiv styletext-align: center;margin: 10px;spanstylefont-size: 30px;font-weight: 700;color: #fff; font-family: Georgia, Times New Roman, Times, serif;span stylecolor: #e84118;span classfontClass公/spannbsp;span classfontClass司/span/spanspan stylecolor: #487eb0;span classfontClass每/spannbsp;span classfontClass个/spanspan classfontClass月/spannbsp;span classfontClass要/spannbsp;span classfontClass交/spannbsp;span classfontClass哪/spannbsp;span classfontClass些/spannbsp;span classfontClass税/span/span/divtable border10 styleborder:5px solid rgb(50, 95, 214);padding:0;font-size: 20px; classtableBackgroundcellpadding20 cellspacing0thead styleborder:5px solid rgb(50, 95, 214);tr stylewidth: 180px; aligncenterth税种/thth小规模纳税人/thth一般纳税人/th/tr/theadtbody styleborder:5px solid rgb(50, 95, 214);trtd stylewidth: 150px;font-weight: 700; aligncenter增值税/tdtd alignleft stylevertical-align: text-top;width: 400px;div stylefont-weight: 700; text-align: center;【季报税率1%3%】/divp①专票开多少交多少税/pp②专票普票季度不超过30万普票免增值税/pp③专票普票季度超过30万专票和普票都要全额交税/p/tdtd aligncenter stylevertical-align: text-top;width: 450px;div stylefont-weight: 700;text-align: center;【月报】/divdiv stylefont-weight: 700; text-align: center;【税率6%9%13%】/divp应纳税额销项税额-进项税额/p/td/trtrtd stylewidth: 100px;font-weight: 700; aligncenter附加税/tdtd aligncenterdiv stylefont-weight: 700;text-align: center;【季报】/divp计算公式应缴纳增值税*对应税率/pp城建税7%教育费附加3%地方教育费附加2%/p/tdtd aligncenterdiv stylefont-weight: 700; text-align: center;【月报】/divp计算公式应缴纳增值税*对应税率/pp城建税7%教育费附加3%地方教育费附加2%/pp/pp/pp/p/td/trtrtd stylewidth: 100px;font-weight: 700; aligncenter企业所得税/tdtd colspan2 aligncenterdiv stylefont-weight: 700;【季报】/divp300万,税率5%≥300万,税率25% /p/trtrtd stylewidth: 100px;font-weight: 700; aligncenter个人所得税/tdtd colspan2 aligncenterdiv stylefont-weight: 700;【月报】/divp个人所得税税额应纳税所得额*税率-速算扣除数/pp应纳税所得额税前工资-五险一金-起征点5000/p/td/trtrtd stylewidth: 100px;font-weight: 700; aligncenter印花税/tdtd colspan2 aligncenterdiv stylefont-weight: 700;text-align: center;【小规模季报一般纳税人月报】/divp计算公式含税收入*对应税率/pp(买卖合同税率0.03%运输合同税率0.05%根据合同类型而定)/p/td/tr/tbody/table/divscriptfunction watermark(settings) {//默认设置var defaultSettings {watermark_txt: text,watermark_x: 20, //水印起始位置x轴坐标watermark_y: 20, //水印起始位置Y轴坐标watermark_rows: 20, //水印行数watermark_cols: 100, //水印列数watermark_x_space: 100, //水印x轴间隔watermark_y_space: 50, //水印y轴间隔watermark_color: #aaa, //水印字体颜色watermark_alpha: 0.4, //水印透明度watermark_fontsize: 32px, //水印字体大小watermark_font: 微软雅黑, //水印字体watermark_width: 210, //水印宽度watermark_height: 80, //水印长度watermark_angle: 20 //水印倾斜度数};if (arguments.length 1 typeof arguments[0] object) {var src arguments[0] || {};for (key in src) {if (src[key] defaultSettings[key] src[key] defaultSettings[key]) continue;else if (src[key]) defaultSettings[key] src[key];}}var oTemp document.createDocumentFragment();//获取页面最大宽度var page_width Math.max(document.body.scrollWidth, document.body.clientWidth);var cutWidth page_width * 0.0150;var page_width page_width - cutWidth;//获取页面最大高度var page_height Math.max(document.body.scrollHeight, document.body.clientHeight) 450;page_height Math.max(page_height, window.innerHeight - 30);//如果将水印列数设置为0或水印列数设置过大超过页面最大宽度则重新计算水印列数和水印x轴间隔if (defaultSettings.watermark_cols 0 || (parseInt(defaultSettings.watermark_x defaultSettings.watermark_width * defaultSettings.watermark_cols defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) page_width)) {defaultSettings.watermark_cols parseInt((page_width - defaultSettings.watermark_x defaultSettings.watermark_x_space) / (defaultSettings.watermark_width defaultSettings.watermark_x_space));defaultSettings.watermark_x_space parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));}//如果将水印行数设置为0或水印行数设置过大超过页面最大长度则重新计算水印行数和水印y轴间隔if (defaultSettings.watermark_rows 0 || (parseInt(defaultSettings.watermark_y defaultSettings.watermark_height * defaultSettings.watermark_rows defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) page_height)) {defaultSettings.watermark_rows parseInt((defaultSettings.watermark_y_space page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height defaultSettings.watermark_y_space));defaultSettings.watermark_y_space parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));}var x;var y;for (var i 0; i defaultSettings.watermark_rows; i) {y defaultSettings.watermark_y (defaultSettings.watermark_y_space defaultSettings.watermark_height) * i;for (var j 0; j defaultSettings.watermark_cols; j) {x defaultSettings.watermark_x (defaultSettings.watermark_width defaultSettings.watermark_x_space) *j;var mask_div document.createElement(div);mask_div.id mask_div i j;mask_div.className mask_div;mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));//设置水印div倾斜显示mask_div.style.webkitTransform rotate(- defaultSettings.watermark_angle deg);mask_div.style.MozTransform rotate(- defaultSettings.watermark_angle deg);mask_div.style.msTransform rotate(- defaultSettings.watermark_angle deg);mask_div.style.OTransform rotate(- defaultSettings.watermark_angle deg);mask_div.style.transform rotate(- defaultSettings.watermark_angle deg);mask_div.style.visibility ;mask_div.style.position absolute;mask_div.style.left x px;mask_div.style.top y px;mask_div.style.overflow hidden;mask_div.style.zIndex 9999;//让水印不遮挡页面的点击事件mask_div.style.pointerEvents none;mask_div.style.opacity defaultSettings.watermark_alpha;mask_div.style.fontSize defaultSettings.watermark_fontsize;mask_div.style.fontFamily defaultSettings.watermark_font;mask_div.style.color defaultSettings.watermark_color;mask_div.style.textAlign center;mask_div.style.width defaultSettings.watermark_width px;mask_div.style.height defaultSettings.watermark_height px;mask_div.style.display block;oTemp.appendChild(mask_div);};};document.body.appendChild(oTemp);}function getNow() {var d new Date();var year d.getFullYear();var month change(d.getMonth() 1);var day change(d.getDate());var hour change(d.getHours());var minute change(d.getMinutes());var second change(d.getSeconds());function change(t) {if (t 10) {return 0 t;} else {return t;}}var time year 年 month 月 day 日 hour 时 minute 分 second 秒;return time;}window.onload () {watermark({watermark_txt: yma16});}/script /body/html效果图
inscode代码如下 ⭐结束 本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 感谢你的阅读