html 01_final.html

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 01_final.html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}
header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}
nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}
article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>    
    
    
</head>
<body>

<div class="container">

<header>
   <h1>Hola Mundo</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</nav>

<article>
  <h1>Bienvenido</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo ex. Fusce dui neque, lobortis vel nibh quis, viverra bibendum turpis. Morbi in venenatis ex. </p>
  <p>Mauris vel auctor justo. Pellentesque vel malesuada purus. Vestibulum rhoncus finibus augue, scelerisque maximus arcu varius nec. Quisque venenatis vulputate nulla, ac commodo enim tincidunt quis. Cras lacus nisl, finibus sollicitudin semper nec, ultrices et lectus.</p>
  <button type="button" name="button" data-type="add_to_cart" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Añadir al carrito</button>
    
    
      <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" data-type="close_window">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <p>Producto añadido al carrito</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" data-type="close_window">Seguir comprando</button>
        </div>
      </div>
      
    </div>
  </div>

</article>

<footer>Copyright ©</footer>

</div> 
    
<script type="text/javascript">
    var sp=sp||[];(function(){var e=["init","identify","track","trackLink","pageview"],t=function(e){return function(){sp.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)sp[e[n]]=t(e[n])})(),sp.load=function(e,o){sp._endpoint=e;if(o){sp.init(o)};var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d21ey8j28ejz92.cloudfront.net/analytics/v1/sp.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
    
    sp.load("http://awt.jrcajide.com:3001"); 
    
    sp.init({
        tracking_pageview: true,      
        cookie_name: "_sp",             
        cookie_expiration: 365   
    });
    sp.identify("007", {
        email: "jhondoe@gmail.com",
        age: 30,
        gender: "male"
    });
</script>    

<script>
//**** eventos ****//
          $(document).ready(function(){
            $('button').click(function(){
                sp.track('Click Button', {
                    button: $(this).data('type'),
                    loggedin: false
                });
            });
        });  
    
</script>    
    
</body>
</html>

以上是关于html 01_final.html的主要内容，如果未能解决你的问题，请参考以下文章

html 01__modal_window.html

html IF_05_01_Office_Page_HTML

html IF_04_01_Button_Event_Binding_HTML

html 01_track.html

html 01_css.html

html IF_03_01_Header_And_Footer