HTML通用组件模板:点击上传图片HTML组件 | CSS
目的:记录下自己平时编写的HTML组件,抽离常用的HTML元素组合,添加基础CSS样式,之后的项目稍作修改即可实现复用,提高工作效率。
解析:点击上传图像框,实际点击隐藏的input,上传完成后,图片显示在原处的img标签内。
目的:记录下自己平时编写的HTML组件,抽离常用的HTML元素组合,添加基础CSS样式,之后的项目稍作修改即可实现复用,提高工作效率。
解析:点击上传图像框,实际点击隐藏的input,上传完成后,图片显示在原处的img标签内。
初学者常用的HTML结构与CSS公共样式模板
HTML模板:index.html
只添加了CSS文件链接与基本网页框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<meta content="telephone=0" name="format-detection"/>
<link rel="stylesheet" type="text/css" href="CSS/common.css"/>
<link rel="stylesheet" type="text/css" href="CSS/main.css"/>
<title>标题</title>
</head>
<body>
<!--头部-->
<header></header>
<!--主体-->
<section></section>
<!--尾部-->
<footer></footer>
</body>
</html>
CSS Common模板:Common.css
@charset "utf-8";
html,body,header,section,footer,ul,li,
a,p,span,img,h3{margin:0;padding:0;}
a{ text-decoration: none;}
img{border:0;}
ul{list-style:none;}
body{min-width:340px;
margin:0 auto;
font:normal 12px/1.5
Microsoft YaHei,
Helvetica,
Arial,
sans-serif;}