What is a promise in Javascript?

Question

Mari Cruz

Asked: 2020-12-22 16:23:05 +0800 CST 2020-12-22 16:23:05 +0800 CST 2020-12-22 16:23:05 +0800 CST

How can I give a better appearance to a website? [closed]

772

I'm starting to create a website looking at different examples, but it doesn't look very good. The example that I saw consisted of a central part with two lateral parts where to put links to other sites. What am I doing wrong, did I want to use bootstrap? I show the code I picked up from the community example.

body {
                min-width: 630px;
            }
    
            #container {
                padding-left: 200px;
                padding-right: 190px;
            }
            
            #container .column {
                position: relative;
                float: left;
            }
            
            #center {
                padding: 10px 20px;
                width: 100%;
            }
            
            #left {
                width: 180px;
                padding: 0 10px;
                right: 240px;
                margin-left: -100%;
            }
            
            #right {
                width: 130px;
                padding: 0 10px;
                margin-right: -100%;
            }
            
            #footer {
                clear: both;
            }
            
            /* IE hack */
            * html #left {
                left: 150px;
            }
    
            /* Make the columns the same height as each other */
            #container {
                overflow: hidden;
            }
    
            #container .column {
                padding-bottom: 1001em;
                margin-bottom: -1000em;
            }
    
            /* Fix for the footer */
            * html body {
                overflow: hidden;
            }
            
            * html #footer-wrapper {
                float: left;
                position: relative;
                width: 100%;
                padding-bottom: 10010px;
                margin-bottom: -10000px;
                background: #fff;
            }
    
            /* Aesthetics */
            body {
                margin: 0;
                padding: 0;
                font-family:Sans-serif;
                line-height: 1.5em;
            }
            
            p {
                color: #555;
            }
    
            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            nav ul a {
                color: darkgreen;
                text-decoration: none;
            }
    
            #header, #footer {
                font-size: large;
                padding: 0.3em;
                background: #BCCE98;
            }
    
            #left {
                background: #DAE9BC;
            }
            
            #right {
                background: #F7FDEB;
            }
    
            #center {
                background: #fff;
            }
    
            #container .column {
                padding-top: 1em;
            }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <title>PROBANDO UNA WEB</title>
    </head>
    
    <body>
    
        <header id="header">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a href="#">CASA</a>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Recursos <span class="caret"></span></a>
                            <ul class="dropdown-menu" aria-labelledby="about-us">
                                <li><a href="#">PRODUCTOS</a></li>
                                <li><a href="#">NOTICIAS</a></li>
                                <li><a href="#">RECURSOS</a></li>
                            </ul>
                        </li>
                    </ul>
    
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Search</button>
                    </form>
    
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
        <div id="container">
    
            <main id="center" class="column">
                <article>
                
                    <h1>SEAN BIENVENIDOS A MI SITIO WEB...</h1>
                    <p>HOLA, ESTOY EMPEZANDO EN EL DESARROLLO WEB</p>
       
                    <h2>CURRICULUM</h2>

                    <h2>ESPEDIENTE ACADEMICO</h2>
                    <p>AQUI QUIERO PONER LOS ESTUDIOS REALIZADOS<a href="proyectos-4.html">humilde aplicacion.</a></p>
                    
                    <h2>EXPERIENCIA</h2>
                </article>								
            </main>
    
            <nav id="left" class="column">
                <h3>DATOS PERSONALES</h3>
                <ul>
                    <li><a target="_blank" href="#"TRABAJO</a></li><br>
                    <li><a target="_blank" href="#">DIPLOMATURAS</a></li><br>

                </ul>
                <br>
                <br>

            </nav>
    
            <div id="right" class="column">
                <h3>FOTO DE PERFIL</h3>
                
            </div>
    
        </div>
    
       <!-- <div id="footer-wrapper">
            <footer id="footer"><p>Footer...</p></footer>
        </div>-->
    
    </body>
    
    </html>

1 Answers

Voted

Miguel Espeso · Answer 1 · 2020-12-22T16:34:09+08:00

Maybe the problem is that you don't call the bootstrap functions. Let's see if this works for you:

      <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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
      <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.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>PROBANDO UNA WEB</title>
    </head>
    
    <body>
    
        <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
        

                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a href="#">CASA</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Recursos<span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                  <li><a href="#">PRODUCTOS</a></li>
                                  <li><a href="#">NOTICIAS</a></li>
                                  <li><a href="#">RECURSOS</a></li>
                             </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>
    
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
        <div id="container">
    
            <main id="center" class="column">
                <article>
                
                    <h1>SEAN BIENVENIDOS A MI SITIO WEB...</h1>
                    <p>HOLA, ESTOY EMPEZANDO EN EL DESARROLLO WEB </p>

                    <h2>ESPEDIENTE ACADEMICO</h2>
              <p>AQUI QUIERO PONER LOS ESTUDIOS REALIZADOS<a href="#">DIPLOMATURAS.</a></p>
                    
                    <h2>EXPERIENCIA</h2>            
                
                </article>								
            </main>
    
            <nav id="left" class="column">
                <h3>DATOS PERSONALES</h3>
                <ul>
                    <li><a target="_blank" href="#"TRABAJO</a></li><br>
                    <li><a target="_blank" href="#">DIPLOMATURAS</a></li><br>

                </ul>
                <br>
                <br>
                <br>
              
            </nav>
    
            <div id="right" class="column">
                <h3>FOTO DE PERFIL</h3>
                
            </div>
    
        </div>
    
       <!-- <div id="footer-wrapper">
            <footer id="footer"><p>Footer...</p></footer>
        </div>-->
    
    </body>
    </html>

body {
                min-width: 630px;
            }
    
            #container {
                padding-left: 200px;
                padding-right: 190px;
            }
            
            #container .column {
                position: relative;
                float: left;
            }
            
            #center {
                padding: 10px 20px;
                width: 100%;
            }
            
            #left {
                width: 180px;
                padding: 0 10px;
                right: 240px;
                margin-left: -100%;
            }
            
            #right {
                width: 130px;
                padding: 0 10px;
                margin-right: -100%;
            }
            
            #footer {
                clear: both;
            }
            
            /* IE hack */
            * html #left {
                left: 150px;
            }
    
            /* Make the columns the same height as each other */
            #container {
                overflow: hidden;
            }
    
            #container .column {
                padding-bottom: 1001em;
                margin-bottom: -1000em;
            }
    
            /* Fix for the footer */
            * html body {
                overflow: hidden;
            }
            
            * html #footer-wrapper {
                float: left;
                position: relative;
                width: 100%;
                padding-bottom: 10010px;
                margin-bottom: -10000px;
                background: #fff;
            }
    
            /* Aesthetics */
            body {
                margin: 0;
                padding: 0;
                font-family:Sans-serif;
                line-height: 1.5em;
            }
            
            p {
                color: #555;
            }
    
            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            nav ul a {
                color: darkgreen;
                text-decoration: none;
            }
    
            #header, #footer {
                font-size: large;
                padding: 0.3em;
                background: #BCCE98;
            }
    
            #left {
                background: #DAE9BC;
            }
            
            #right {
                background: #F7FDEB;
            }
    
            #center {
                background: #fff;
            }
    
            #container .column {
                padding-top: 1em;
            }

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
      <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.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>PROBANDO UNA WEB</title>
    </head>
    
    <body>
    
        <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
        

                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a href="#">CASA</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Recursos<span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                  <li><a href="#">PRODUCTOS</a></li>
                                  <li><a href="#">NOTICIAS</a></li>
                                  <li><a href="#">RECURSOS</a></li>
                             </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>
    
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
        <div id="container">
    
            <main id="center" class="column">
                <article>
                
                    <h1>SEAN BIENVENIDOS A MI SITIO WEB...</h1>
                    <p>HOLA, ESTOY EMPEZANDO EN EL DESARROLLO WEB </p>

                    <h2>ESPEDIENTE ACADEMICO</h2>
              <p>AQUI QUIERO PONER LOS ESTUDIOS REALIZADOS<a href="#">DIPLOMATURAS</a></p>
                    
                    <h2>EXPERIENCIA</h2>            
                
                </article>								
            </main>
    
            <nav id="left" class="column">
                <h3>DATOS PERSONALES</h3>
                <ul>
                    <li><a target="_blank" href="#"TRABAJO</a></li><br>
                    <li><a target="_blank" href="#">DIPLOMATURAS</a></li><br>

                </ul>
                <br>
                <br>
                <br>
              
            </nav>
    
            <div id="right" class="column">
                <h3>FOTO DE PERFIL</h3>
                
            </div>
    
        </div>
    
       <!-- <div id="footer-wrapper">
            <footer id="footer"><p>Footer...</p></footer>
        </div>-->
    
    </body>
    </html>

How can I give a better appearance to a website? [closed]

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?