IFE html

In this example below you will see how to do a IFE html with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1206189299, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1206189299 ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>IFE html</title>
  
  
  
  
  
</head>

<body>

  <header>
		<h1>月亮和六便士</h1>
			 <nav>
			<a href="#">面纱</a>
			<a href="#">你只是看起来很努力</a>
			<a href="#">人类群星闪耀时</a>
			<a href="#">红楼梦</a>
			 </nav>
	</header>
    <div>
    	<section>
    		<h2>第一章</h2>
	    		<section>
	    			<h2>我对斯特里克兰的认识</h2>
	    			<address>作者:威廉-萨默塞特-毛姆&nbsp;&nbsp;&nbsp;发布时间:<time>2017-2-27</time></address>
	    			
	    				<p>这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长<a href="#">www.baidu.com</a>很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的段落。</p>
	    				<figure>
	    					<img src="figure.jpg" />
	    				</figure>
	    				<p>
	    				这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长的段落。	
	    				</p>
	    				<p>
	    				这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长的段落。	
	    				</p>
	    			
	    		</section>
    	</section>
    	<section>
    		<h2>第二章</h2>
    		    <section>
    		    	<h2>我所生活的环境</h2>
    		    	<address>作者:威廉-萨默塞特-毛姆&nbsp;&nbsp;&nbsp;发布时间:<time>2017-2-27</time></address>
    		    	
    		    		<p>
    		    			这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长这是一个很长很长很长很长很长很长很长很长很长很长的段落。
    		    		</p>
    		    		<figure>
    		    			<img src="figure.jpg" />
    		    		</figure>
    		    		<ul>
    		    			<li>1</li>
    		    			<li>2</li>
    		    			<li>3</li>
    		    		</ul>
    		    	
    		    </section>
    		    <section>
    		    	<h2>图片</h2>
    		    	<figure>
					   <figcaption>好看的图片啊</figcaption>
	    		    		<img src="figure.jpg.jpg" />
    		    	</figure>
    		    	<figure>
					   <figcaption>好看的图片啊</figcaption>
	    		    		<img src="figure.jpg" />
    		    	</figure>
    		    	<figure>
					   <figcaption>好看的图片啊</figcaption>
	    		    		<img src="figure.jpg" />
    		    	</figure>
    		    	<figure>
					   <figcaption>好看的图片啊</figcaption>
	    		    		<img src="figure.jpg" />
    		    	</figure>
    		    </section>
    	</section>
    	<section>
    		<h2>第三章</h2>
    		<section>
    			<h2>和情人私奔到巴黎的斯里特克兰</h2>
    			<address>
    				作者:威廉-萨默塞特-毛姆&nbsp;&nbsp;&nbsp;发布时间:<time>2017-2-27</time>
    				
    					<ol>
    						<li>A</li>
    						<li>B</li>
    						<li>C</li>
						</ol>
    						<table border="1" cellspacing="3" cellpadding="10">
    						<caption>这是一个表格!</caption>
    							<tr>
    								<td>1</td>
    								<td>2</td>
    								<td>3</td>
    							</tr>
    							<tr>
    								<td>1</td>
    								<td>2</td>
    								<td>3</td>
    							</tr>
    							<tr>
    								<td>1</td>
    								<td>2</td>
    								<td>3</td>
    							</tr>
    						</table>
    					<aside>
    						<h2>标题</h2>
    						<section>
    							<h2>入口标题</h2>
    							Email:<input type="text" name="email" placeholder="输入Email" />
    							<br>
    							<span> 邮箱地址按要求格式输入</span>
    							<br>
    							请输入密码:<input type="password" name="pwd" />&nbsp;&nbsp;
    							请在次输入密码:<input type="password" name="pwdOnece" /> br
    							<br>
    							<span>密码长度在6-12位数字</span>
    							<br>
    							性别:&nbsp;<input type="checkbox" name="men"/>男&nbsp;<input type="checkbox" name="women">女&nbsp;&nbsp;
    							城市:<select>
    								<option value="长沙">长沙</option>
    								<option value="上海">上海</option>
    								<option value="北京">北京</option>
		    						  </select>
		    				    &nbsp;&nbsp;
		    				    运动:<input type="radio" name="sport"/>&nbsp;&nbsp;
		    				    艺术:<input type="radio" name="art" />&nbsp;&nbsp;
		    				    科学:<input type="radio" name="science" />&nbsp;&nbsp;
		    				    个人描述:<textarea rows="3" cols="7"></textarea><input type="submit" name="sub" value="提交" />
    						</section>	
    					</aside>
    				
    			</address>
    		</section>
    	</section>
    </div>
  
  

</body>

</html>

Comments