独书先生 Menu

Viewing all items for tag CSS3

HTML通用组件模板:点击上传图片HTML组件 | CSS

分类:Web

目的:记录下自己平时编写的HTML组件,抽离常用的HTML元素组合,添加基础CSS样式,之后的项目稍作修改即可实现复用,提高工作效率。

解析:点击上传图像框,实际点击隐藏的input,上传完成后,图片显示在原处的img标签内。
upload_pic

Continue reading…

HTML5+CSS3:简单网页结构与CSS公共样式模板

初学者常用的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;}

注意点:CSS: 为什么不建议使用*{padding:0;margin:0;}进行reset?