Embora o IE6 tenha sido ignorado, exceto por alguns requisitos exigentes, o IE8, o navegador IE8, que vem com o Win7, ainda precisa ser suportado.
A principal vantagem desse método é que eu pessoalmente acho que é menos preparação e não precisa procurar um grande número de fotos para fazer materiais online. Você só precisa preparar um bootstrap, jQuery e Photoshop. Como configurar o bootstrap e o jQuery, você pode se referir a "Bootstrap para escrever uma caixa de diálogo que pode ser fechada na página da web atual que pode ser fechada" (clique para abrir o link)
Quando solicitado a escrever um site, muitas vezes você ficará preocupado com o layout. De fato, não é difícil. Se você pode usar o Bootstrap com proficiência e tiver um método específico, ainda poderá lidar com sua lição de casa rápida e facilmente para lidar com as necessidades comuns.
Embora os modelos de página sejam pesquisados por muito tempo na Internet, a chave é poder entender o processo de criação desses modelos de página.
Depois que o download desses modelos é incompatível com o navegador e não será modificado, será um grande problema.
1. Objetivos básicos
Use Bootstrapv3 para criar a seguinte página:
A página inicial é mostrada acima. Primeiro, pendurado no cabeçalho está a navegação deste site, que é deixada, no menu do meio, direito e suspenso. A essência aqui é um grupo de botões, e o componente da barra de navegação fornecido pelo Bootstrap não pode ser usado, porque esse componente da barra de navegação não é compatível com o IE8. Para detalhes, consulte o artigo "Como resolver os defeitos da barra de navegação de bootstrap em IE8" (clique para abrir o link)
Depois, na tela gigante, existem três colunas e dois botões correspondentes. Aqui você pode colocar as partes mais importantes do site e, finalmente, como sempre, informações de direitos autorais.
A página interna é assim:
É também uma barra de navegação superior, seguida pelo título e pelo conteúdo desta página interna. O título da página interna é essencialmente uma tela gigante, mas é apenas menor que o tamanho da página inicial.
Em seguida, são informações de direitos autorais.
2. Processo de produção
1. Primeiro aberto Photoshop e crie uma nova imagem 1024x1. A largura é o mais ampla possível. Apenas tente ser o mais amplo possível. A imagem é 1. A cor do primeiro plano é verde escuro R: 0 g: 140 b: 0, a cor do fundo é verde claro R: 100 g: 200 b: 100. Use a ferramenta de gradiente para retirar a imagem a seguir. Não importa como você o puxe, você pode puxá -lo para a esquerda e a direita, e para o meio e os dois lados, dependendo de suas preferências pessoais:
Esta é a única imagem que precisamos nos preparar. Você pode fechar o Photoshop, jogá -lo de lado e salvar esta imagem na pasta do projeto do site. Esta imagem tem apenas cerca de 6k e não afeta o carregamento.
2. Página inicial
O código específico é o seguinte e, em seguida, o código é explicado um por um:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt Titled Document </title> <teta Nome = " content = "width = dispositivo de dispositivo, escala inicial = 1,0, scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jQuery-1.1.1.js" 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 ", sem serrif; } </style> </ad Head> <body> <div style = "Posição: abstraído; topo: 0; esquerda: 0; largura: 100%;"> <div> <div> <botão tipo = "buttão"> esquerda </button> </div> button <butt> <butt typen type = "buttão"> Middle <////Div> <div> <butt> <butt> <butt typen> " data-toggle = "suspenso"> suspenso <span> </span> </butut> <ul role = "menu"> <li> <a href = "#"> link suspenso </a> </li> <li> <a href = "#"> link </a> </li> </ul> </div> </div> </div> url (imagens /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 /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /<r /<r /> <r /> <r /> <r /> <r /> <br /> <r /> <r /> <r /> <H3> column2 </h3> <p> ... </p> <p> <a href = "#" role = "button"> botão </a> href = "#" role = "button"> botão </a> <a href = "#" role = "button"> botão </a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <antf) href = "#" role = "botão"> botão </a> </p> </div> </div> </div> <div> <div style = "text-align: center"> Informações sobre direitos autorais </div> </div> </div> </body> </html>(1) <head> parte
<head> <!-codificação do site, título, tela adaptativa, etc.-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt Titled Document </title> <meta name = "viewport" content = "width = depósito> que precisam ser usados-> <link href = "css/bootstrap.css" rel = "Stylesheet" Media = "Screen"> <script type = "text/javascript" src = "js/jQuery-1.11.1.js"> </script> <script = "text/javroScript" <!-Este é o único estilo CSS que precisamos nos definir para resolver o bug no sistema Win7 que a fonte preta da Microsoft não pode ser exibida normalmente, mas a fonte da música é exibida-> <style type = "text/css"> H1, H2, H3, H4, H5 {Fonts-Family: "YHOHE YAHE Neue ", Helvetica, Arial," Hiragino Sans GB "," Hiragino Sans GB W3 "," Wenquanyi Micro Hei ", Sans-Serif; } </style> </ad Head>(2) Barra de navegação
Como a barra de navegação fornecida pelo bootstrap não é aplicável, tivemos que usar o grupo de botões fornecido pelo bootstrap para escrever a barra de navegação nós mesmos
<!-Primeiro de tudo, a barra de navegação deve ser pendurada na cabeça da página da web-> <div style = "posição: abstrato; topo: 0; esquerda: 0; largura: 100%;"> <!-Defina um grupo de botão-> <div> <div> <!-escrevendo um hiperlink para um único botão na barra de navegação, ou seja, um botão sem um menu queda, sem queda, sem um menu de queda, sem um hiperlink para não ser o menu de queda. É usar a tag A e adicionar o estilo de classe, em vez da tag de botão fornecida pelo site oficial-> <a href = "#"> esquerda </a> </div> <div> <a href = "#"> médio </a> </div> menu <a href = "#"> seguido </a> </a> <! data-toggle = "suspenso"> suspenso <span> </span> </butut> <ul role = "menu"> <li> <a href = "#"> link suspenso </a> </li> <li> <a href = "#"> link </a> </li> </ul> </div> </div> </div>
Altere o sucesso do BTN no atributo de classe para BTN-Primary, BTN Danger etc. pode alterar a cor deste botão!
(3) a parte da tela gigante
A tela gigante está escrita da seguinte forma. A chave é apresentar o plano de fundo que acabamos de desenhar no Photoshop.
A razão pela qual eu tenho que adicionar tantos aqui <br> Enter é porque eu quero aumentar o tamanho desta tela gigante
<div style = "Background-imagem: url (imagens /bg.jpg); fundo-repeat: repete; text-align: center"> <r /> <r /> <r /> <r /> <r /> <Br /<r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> /> <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 /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> <r /> </div>
(4) Seção de coluna
Aqui, a organização de grade da Bootstrap é usada para digitar as três colunas
Para detalhes, você pode consultar o artigo "Bootstrap" que se adapta automaticamente ao sistema de grade de bootstrap de bootstrap PC, tablet e telefonia móvel. Divida as 12 grades de toda a página da web em 3 peças, e cada grade de 4 está certa. Cada coluna é um painel sem uma cabeça de painel, com um grande título H3 dentro e, em seguida, um texto de parágrafo de P e dois botões.
Vale a pena notar que essas coisas devem ser colocadas em um contêiner, caso contrário, essas três coisas preencherão a página inteira:
<div> <div> <div> <div> <div> <h3> coluna1 </h3> <p> ... </p> <p> <a href = "#" role = "botão"> botão </a> <a href = "#" role = "" "> botão </a> </p> </</href ="#"role =" ""> <p> ... </p> <p> <a href = "#" role = "button"> botão </a> <a href = "#" role = "botão"> botão </a> </p> </div> </div> </div> <div> <div> <div> <div> <h3> column2 </h3> <p>> Role = "Button"> Button </a> <a href = "#" role = "botão"> botão </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) parte da informação de direitos autorais
Não há nada a dizer, apenas um painel
<div> <div style = "text-align: Center"> Informações de direitos autorais </div> </div>
3. Página interna
Se você souber como fazer a página inicial, a idéia da página interna será exatamente a mesma. Não vou repetir novamente. Da mesma forma, o código é o seguinte:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt Titled Document </title> <teta Nome = " content = "width = dispositivo de dispositivo, escala inicial = 1,0, scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jQuery-1.1.1.js" 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 ", sem serrif; } </style> </head> <body> <div style="position: absolute; top: 0; left: 0; width: 100%;"> <div> <a href="#"> Left </a> </div> <div> <a href="#"> Middle </a> </div> <div> <a href="#"> Right </a> </div> <div> <button type="button" data-toggle = "suspenso"> suspenso <span> </span> </butut> <ul role = "menu"> <li> <a href = "#"> link suspenso </a> </li> <li> <a href = "#"> link </a> </li> </ul> </div> </div> </div> url (imagens/bg.jpg);O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.