HTML HTML5模板跨浏览器+ CSS

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML HTML5模板跨浏览器+ CSS相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="pt-BR" class="ie6 ielt8"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="pt-BR" class="ie7 ielt8"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="pt-BR" class="ie8"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="pt-BR"> <!--<![endif]--> 
<html lang="pt-BR">
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="" >
	<meta name="description" content="" >
	<title>Title</title>
	<link rel="stylesheet" href="style/style.css" />
	<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
	<link rel="apple-touch-icon" href="img/favicon.png" /> 
	<!--[if IE]>
		<script>
			document.createElement("header" );
			document.createElement("footer" );
			document.createElement("section");
			document.createElement("aside"  );
			document.createElement("nav"    );
			document.createElement("article");
			document.createElement("hgroup" );
			document.createElement("time"   );
		</script>
	<![endif]-->
	<style>
	* {
margin:0;
padding:0;
list-style:none;
}
article,aside,details,figcaption,figure,  
footer,header,hgroup,menu,nav,section {  
   display: block;  
}  
a{
	text-decoration:none;
}

body{
	background:#143246 url(../img/background.jpg) no-repeat center top;
	padding: 0;
	margin: 0;
}

  /*******************************/
 /*		RECURSOS VISUAIS 		*/
/*******************************/
.left{
	float:left;
}
.right{
	float:right;
}

	</style>

</head>
<body>
<!--	RICH SNIPPETS GOODRELATIONS	 -->
<div xmlns="http://www.w3.org/1999/xhtml"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
  xmlns:gr="http://purl.org/goodrelations/v1#"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:vcard="http://www.w3.org/2006/vcard/ns#">
 
  <div typeof="gr:BusinessEntity" about="#company">
    <div property="gr:legalName" content="Micro Fast Informática"></div>
    <div property="vcard:tel" content="+55-11-3791-4433"></div>
    <div rel="vcard:adr">
      <div typeof="vcard:Address">
        <div property="vcard:country-name" content="Brasil"></div>
        <div property="vcard:locality" content="São Paulo"></div>
        <div property="vcard:street-address" content="Rua André Saraiva, 589 - São Paulo - SP"></div>
      </div>
    </div>
    <div rel="foaf:depiction" resource="http://meudominio.com.br/img/logo.png"></div>
    <div rel="foaf:page" resource=""></div>
  </div>
</div
<!--	RICH SNIPPETS GOODRELATIONS	 -->
<div id="wrapper">

	<div id="content">
		<header id="main-header">
			<p class="right">Tel: (11) 3791-4433<br />(16) 3172-7373<br />comercial@microfastinformatica.com.br
			<hgroup>
				<h1>Micro Fast Informática</h1>
				<h2>Tudo o que você precisa em Informática</h2>
			</hgroup>
			<nav>
				<ul id="navmenu">
					<li class="left"><a href="#"  tabindex="1">Teste</a></li>
					<li class="left"><a href="#"  tabindex="2">Teste</a></li>
					<li class="left"><a href="#"  tabindex="3">Teste</a></li>
					<li class="left"><a href="#"  tabindex="4">Teste</a></li>
					<li class="left"><a href="#"  tabindex="5">Teste</a></li>
					<li class="left"><a href="#"  tabindex="6">Teste</a></li>
					<li class="left"><a href="#"  tabindex="7">Teste</a></li>
					<li class="left"><a href="#"  tabindex="8">Teste</a></li>
				</ul>
			</nav>
		</header>
		<section id="container">
			<div id="top-container">
				<ul>
					<li class="left">Suporte Técnico<br /><a href="#">Ver Quais</a></li>
					<li class="left">Serviços<br /><a href="#">Ver Quais</a></li>
					<li class="left">Produtos<br /><a href="#">Ver Quais</a></li>
				</ul>
				<aside>
					<h2>Tudo o que você precisa!</h2>
					<p>Tudo o que você precisaTudo o que você precisa</p>
					<form action="" method="">
						<label>Digite o que você precisa:</label>
						<input type="text" name="" value="Busque"
								   onfocus="if (this.value=='Busque') this.value=''"
								   onblur="if (this.value=='') this.value='Busque'"/>
						<input type="submit" value="Pesquisar no site" />
					</form>
				</aside>
			</div>
			<section id="content">
				<article id="main-content">
					<h2>Tudo o que você precisa!</h2>
					<p>Tudo o que você precisa em Computadores! Tudo o que você precisa em Computadores.</p>
					<ul>
						<li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
						<li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
						<li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
						<li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
						<li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
						<li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
					</ul>
					<footer>
						<ul id="content-buttons">
							<li class="left">Emergência 24 horas</li>
							<li class="left">Contrato Mensal</li>
							<li class="left">Atendimento Personalizado</li>
							<li class="left">Manutenção</li>
							<li class="left">Infra Estrutura</li>
							<li>Contrato Especial</li>
						</ul>
					</footer>
				</article>
				<aside>
					<figure>
						<figcaption>A view of the pulpit rock in Norway</figcaption>
						<img src="parceiros.jpg" width="300" height="90" />
					</figure>
					<!-- SOME JQUERY PLUGIN -->
				</aside>
			</section>
			<footer>
				<ul>
					<li class="left"><a href="#">Teste</a></li>
					<li class="left"><a href="#">Teste</a></li>
					<li class="left"><a href="#">Teste</a></li>
				</ul>
				<address class="right">
					<p><strong>Micro Fast Informática</strong><br />
					Tel: (11) 3791-4433<br />
						 (16) 3172-7373<br />
						 comercial@microfastinformatica.com.br<br />
						 Loja 01 - Rua André Saraiva, 589 - São Paulo - SP / Loja 02 - Rua Jorge Miguel Saad, 525 - Igarapava - SP</p>
				</address>
			</footer>
		</section>
	</div>
</div>
	<!-- Insert Here Code Google Analytics -->
 
	<!-- END Code Google Analytics -->
</body>
</html>

Flask 渲染跨服务器的html模板

从之前的文章中我们知道，Flask渲染html模板是通过render_template这个函数来进行读取渲染的，默认读取的路径是在应用的templates文件夹，如果想读取应用下其他文件夹的模板文件，可以通过在蓝图下设置template_folder参数来控制读取的模板路径，但是，假如我们的模板文件存放在一个ftp或者http服务器上，该怎么通过render_template来读取到那个模板文件，这就是今天本文要介绍的内容。


想要实现这个功能，就需要我们重写一个jinja2读取模板文件的类，jinjia2这个模块负责读取模板文件的代码在loaders.py这个文件中，我们将根据BaseLoader这个类创建一个支持读取远程模板的构造函数。


# jinja loader

class UrlLoader(BaseLoader):

    def __init__(self, url_prefix):

        self.url_prefix = url_prefix


    def get_source(self, environment, template):

        url = urljoin(self.url_prefix, template)

        try:

            t = urlopen(url)

            if t.getcode() is None or t.getcode() == 200:

                return t.read().decode('utf-8'), None, None

        except IOError:

            pass

        raise TemplateNotFound(template)


在对应的蓝图中，设置jinja_loader为需要读取的模板文件的远程目录


@admin.route("/")

def index():

    admin.jinja_loader = UrlLoader("你的模板路径")

    return render_template("index.html")


这样，就能读取到远程模板路径下的index.html文件了。



以上是关于HTML HTML5模板跨浏览器+ CSS的主要内容，如果未能解决你的问题，请参考以下文章

如何使模板跨浏览器兼容？

Normalize.css的使用及下载

HTML5 - 跨浏览器 iframe postMessage - 子到父？

实现跨浏览器html5表单验证

normalize与reset

仅跨浏览器 HTML5 视频预加载海报