La última vez que escribí "Bootstrap escribe una página de estilo de pantalla gigante de la audiencia compatible con los navegadores convencionales" (haga clic para abrir el enlace) Algunas de las necesidades de la generación anterior pueden no estar satisfechas con este estilo posmoderno. No importa, podemos cambiar completamente el diseño a un estilo de portal, e inmediatamente lo aceptaron:
En primer lugar, debe ser claro sobre el diseño del portal. Esto nos ayudará a diseñar rápidamente. El comienzo es una pantalla gigante más pequeña, seguida de una barra de navegación, y el grupo de botones se usa aquí, seguido de varias columnas. Aquí se trata del uso del sistema de cuadrícula de arranque y los paneles, y finalmente la información de los derechos de autor, y aquí todavía hay un panel.
De todos modos, personalmente creo que este estilo de diseño de portal es un desastre, pero no sé por qué parece ser muy popular.
Necesitamos preparar algo, solo una barra de gradiente con una altura de 1 en Photoshop. Primero, abra Photoshop y cree una nueva imagen de 1024x1. El ancho es gratuito, solo trate 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.
Después de eso, el código específico de la página web es el siguiente. El principio es exactamente lo mismo que las piezas en "Bootstrap Escribir una página de estilo de pantalla gigante de la audiencia compatible con los navegadores convencionales" (haga clic para abrir el enlace), excepto que la ubicación del código es diferente, por lo que no la describiré aquí.
< xmlns = "http://www.w3.org/1999/xhtml"> <toad> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> teta </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> <viv> <div style = "Background-image: url (imágenes/bg.jpg); background-repeat: repetir; text-align: centro"> <h1> <font color = "#ffffff"> banner: el titular principal </font> </h1> <h2> <font color = "#ffffffff"> </h2> </div> <div> <div> <div> <a href = "#"> botón1 </a> </div> <div> <a href = "#"> botón2 </a> </div> <div> <button type = "button" data-toggle = "desplegable"> desplegable href="#">button1</a> </li> <li> <a href="#">button2</a> </li> </ul> </div> <div> <button type="button" data-toggle="dropdown"> Dropdown2 <span></span> </button> <ul role="menu"> <li> <a href="#">button1</a> </li> <li> <a href = "#"> Button2 </a> </li> <li> <a href = "#"> Button3 </a> </li> <li> </li> <li> <a href = "#"> Button4 </a> </li> </ul> </div> </div> </div> <div> <div> <viV> <viV> <viV> <ViV> <HIV> <HIV> ... </p> <p> <a href = "#"> Button4 </a> </li> </ul> </div> </div> </div> <div> <div> <div> <div> <div> <div> <h3> column1 </h3> <p> ... </p> <p> <p> <a href = "#" rol de rol "> 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> <a href = "#" role = "botón"> botón </a> <a href = "#" role = "botón" </div> </div> </div> <div> <div> <div> <h3> column3 </h3> <p> ... </p> <p> <a href = "#" role = "botón"> botón </a> </p> </div> </div> </div> </div> <div> <div> <div> <iv> <h3> columna 3 </h3> ... <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> <iv style = "text-align: centro"> Información de copyright </iv> </div> </body> </htmy>Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo 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.