Aunque IE6 ha sido ignorado, excepto por algunos requisitos exigentes, IE8, el navegador IE8, que viene con Win7, todavía debe ser apoyado.
La principal ventaja de este método es que personalmente creo que es que es menos preparación y no necesita buscar una gran cantidad de imágenes para hacer materiales en línea. Solo necesitas preparar una bota de arranque, jQuery y Photoshop. Cómo configurar Bootstrap y JQuery, puede consultar "Bootstrap para escribir un cuadro de diálogo que pueda cerrarse en la página web actual que puede cerrarse" (haga clic para abrir el enlace)
Cuando se le pide que escriba un sitio web, a menudo se le preocupará cómo diseñarlo. De hecho, no es difícil. Si puede usar Bootstrap de manera competente y tener un método específico, aún puede manejar su tarea de manera rápida y fácil para tratar las necesidades ordinarias.
Aunque las plantillas de página se buscan durante mucho tiempo en Internet, la clave es poder comprender el proceso de creación de estas plantillas de página.
Una vez que descargar estas plantillas es incompatible con el navegador y no se modificará, será un gran problema.
1. Objetivos básicos
Use BootstraPV3 para crear la siguiente página:
La página de inicio se muestra arriba. Primero, colgando en el encabezado se encuentra la navegación de este sitio web, que son menú de izquierda, media, derecha y desplegable. La esencia aquí es un grupo de botones, y el componente de la barra de navegación proporcionado por Bootstrap no se puede usar, porque este componente de la barra de navegación no es compatible con IE8. Para obtener más detalles, consulte el artículo "Cómo resolver los defectos de la barra de navegación Bootstrap Navbar en IE8" (haga clic para abrir el enlace)
Posteriormente, debajo de la pantalla gigante, hay tres columnas y dos botones correspondientes. Aquí puede colocar las partes más importantes del sitio web y, finalmente, como de costumbre, información de derechos de autor.
La página interior se ve así:
También es una barra de navegación superior, seguida del título y el contenido de esta página interna. El título de la página interior es esencialmente una pantalla gigante, pero es solo más pequeño que el tamaño de la página de inicio.
El siguiente es la información de los derechos de autor.
2. Proceso de producción
1. Primero abra Photoshop y cree una nueva imagen 1024x1. El ancho es lo más amplio posible. Solo trata de ser lo más amplio posible. La imagen es 1. El color de primer plano es verde oscuro R: 0 G: 140 b: 0, el color de fondo es verde claro R: 100 G: 200 B: 100. Use la herramienta de gradiente para extraer la siguiente imagen. No importa cómo lo tire, puede tirar de él hacia la izquierda y la derecha, y hacia el medio y ambos lados, dependiendo de sus preferencias personales:
Esta es la única imagen que necesitamos para preparar. Puede cerrar Photoshop, tirarlo a un lado y guardar esta imagen en la carpeta del proyecto del sitio web. Esta imagen es de solo 6k y no afecta la carga en absoluto.
2. Página de inicio
El código específico es el siguiente, y luego el código se explica uno por uno:
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Title titleed Document </title> <meta name = "Viewport" content = "width = dispositivo-width, inicial-escala = 1.0, user-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" medios = "pantalla"> <script type = "text/javaScript" src = "js/jQuery-1.11.1.1.js"> </script> <script type = "text/javaScript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", Sans-Serif; } </style> </head> <body> <div style="position: abstracted; top: 0; left: 0; width: 100%;"> <div> <div> <button type="button"> Left </button> </div> <div> <button type="button"> Middle </button> </div> <div> <button type="button"> Right </button> </div> <div> <button type="button" data-toggle = "desplegable"> desplegable <span> </span> </boton> <ul roly = "menú"> <li> <a href = "#"> enlace desplegable </a> </li> <li> <a href = "#"> enlace de retiro </a> </li> </ul> </div> </div> </div> </div> <iv estilo = " url (imágenes /bg.jpg); <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /br /> <br /> <br /br /> <br /> <br /> <br /> <br /> <br /> <br /> <Br /br /> <br /> <br />> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <> <Br /> <> <Shive <Dive <Dive <Shiz <Shiz <ShiD <Dive <Dive <Shiz <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role = "botón"> botón </a> </p> </div> </div> </div> <div> <div style = "text-align: Center"> Información de copyright </div> </div> </div> </body> </html>(1) <Head> Parte
<HEAD> <!-Codificación del sitio web, título, pantalla adaptativa, etc.-> <meta http-oquiv = "content-type" content = "text/html; charset = utf-8"/> <title> un documento titulado </title> <meta name = "viewport" content = "width = dispositivo-width, escala inicial = 1.0, user-scalable = no" <! Viewport "y csss y css Stys y csylys. that need to be used--> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <!--This is the only css style that we need to define ourselves to solve the bug in the win7 system that Microsoft's black font cannot be displayed normally, but the Song font is displayed--> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", Sans-Serif; } </style> </head>(2) barra de navegación
Dado que la barra de navegación proporcionada por Bootstrap no es aplicable, tuvimos que usar el grupo de botones proporcionado por Bootstrap para escribir la barra de navegación nosotros mismos
< Es para usar la etiqueta A y luego agregar el estilo de clase, en lugar de la etiqueta de botón proporcionada por el sitio web oficial-> <a href = "#"> izquierda </a> </div> <div> <a href = "#"> Middle </a> </div> <div> <divil <a href = "#"> correcto </a> </div> < data-toggle = "desplegable"> desplegable <span> </span> </button> <ul role = "menú"> <li> <a href = "#"> enlace desplegable </a> </li> <li> <a href = "#"> enlace desplegable </a> </li> </ul> </div> </div> </div>
Cambie el Atributo BTN-Success en el Atributo de clase a BTN-Primary, BTN-Danger, etc. ¡Puede cambiar el color de este botón!
(3) La parte de la pantalla gigante
La pantalla gigante está escrita de la siguiente manera. La clave es introducir el fondo que acabamos de dibujar en Photoshop.
La razón por la que tengo que agregar tantos aquí <br> Enter es porque quiero aumentar el tamaño de esta pantalla gigante
<div style = "Background-Image: url (imágenes /bg.jpg); background-repeat: repetir; text-align: centro"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <> <> <> <> <> <> <<r </> <> <<r <<b. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> <Br /> < /div>
(4) Sección de columna
Aquí, la organización de cuadrícula de Bootstrap se utiliza para escribir las tres columnas
Para obtener más detalles, puede consultar el artículo "Bootstrap" que se adapta automáticamente al sistema de cuadrícula PC, tableta y teléfono móvil de Bootstrap. Divida las 12 cuadrículas de toda la página web en 3 piezas, y cada 4 cuadrícula es correcta. Cada columna es un panel sin cabezal de panel, con un gran título de H3 en el interior, y luego un texto de párrafo de P y dos botones.
Vale la pena señalar que estas cosas deben colocarse en un contenedor, de lo contrario, estas tres cosas llenarán toda la página:
<Div> <VIV> <VIV> <VIV> <VIV> <H3> columna1 </h3> <p> ... </p> <p> <a href = "#" role = "botón"> botón </a> <a href = "#" role = "botón"> Botón </a> </p> </div> </div> </div> </iv> <iv> <hiv> <h3> columna <h3> columna </a> </p> </div> </div> </div> </iv> <iv> <hiv> <h3> columna <h3> </p> <p> <a href = "#" role = "botón"> botón </a> <a href = "#" role = "botón"> botón </a> </p> </div> </div> </div> <div> <div> <div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <p> <p> <a href = "#"#"Button" <a href = "#" role = "botón"> botón </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) Parte de información de derechos de autor
No hay nada que decir, solo un panel
<Div> <div style = "text-align: centro"> Información de copyright </div> </div>
3. Página interior
Si sabe cómo hacer la página de inicio, la idea de la página interior será exactamente la misma. No lo volveré a repetir. Del mismo modo, el código es el siguiente:
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Title titleed Document </title> <meta name = "Viewport" content = "width = dispositivo-width, inicial-escala = 1.0, user-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" medios = "pantalla"> <script type = "text/javaScript" src = "js/jQuery-1.11.1.1.js"> </script> <script type = "text/javaScript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", Sans-Serif; } </style> </head> <body> <div style = "posición: absoluto; top: 0; izquierda: 0; ancho: 100%;"> <div> <a href = "#"> izquierda </a> </div> <div> <a href = "#"> medio </a> </div> <div> <a href = "#"> Derecho </a> </div> <viV> "Button" data-toggle = "desplegable"> desplegable <span> </span> </boton> <ul roly = "menú"> <li> <a href = "#"> enlace desplegable </a> </li> <li> <a href = "#"> enlace de retiro </a> </li> </ul> </div> </div> </div> </div> <iv estilo = " url (imágenes/bg.jpg); Repeat de fondo: repetir; "> <h1> <font color ="#ffffff "> title </font> </h1> </div> <div> <div> <div> contenido </div> </div> <div> <divye =" text-align: Center "> Información de copyLo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.