internos , juntamente com três diferentes estilos CSS . Coisas que você precisa
computador executando o Windows 7
Bloco de Notas ou outro editor de texto
Internet Explorer ou outro navegador
Show Mais instruções
Criar uma página Web
1
Clique no botão "Iniciar" , aponte para o item de menu "Todos os Programas " , clique em " Acessórios" item de menu e clique em " Notepad" item de menu.
2
Digite o seguinte marcação na janela do documento :
Nested Div <html> é o elemento mais externo e permite que o navegador sabe que deve traduzir o conteúdo como HTML. O elemento <head> contém elementos que definem as informações gerais sobre a página . Neste exemplo , o elemento <title> define o texto mostrado na barra de título quando a página é exibida. O elemento <body> contém o conteúdo apresentado na página. <br> 3 <p> Clique no menu "Arquivo" e clique em " Salvar" item de menu para exibir o " Salvar como " caixa de diálogo . <br> 4 <p> Escolha "Todos os arquivos " do "Salvar como tipo " drop-down list . Isto é necessário para evitar que o " . Txt" de ser adicionado ao final do nome do arquivo . <br> 5 <p> Type " DivsExample.html " no campo " Nome do arquivo " . <br> <br> 6 <p> Navegue até o local onde você deseja salvar o arquivo. Certifique-se de lembrar -lo para uso em etapas posteriores. <br> 7 <p> Clique no botão "Salvar" para salvar o arquivo. <br> Teste sua página <br> 8 <p> Clique no botão "Iniciar" e clique em " computador" item de menu. <br> 9 <p> Navegue até o local onde você salvou " DivsExample.html " . <br> 10 <p> clique duas vezes em " DivsExample.html " e verifique se as telas de título corretos na barra de título do browser. Se isso não acontecer , verifique a marcação que você digitou para se certificar de que você não digitar nada incorretamente. <br> Crie o <br> Outer Div <br> 11 <p> Digite o seguinte marcação entre a tag <head> eo <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> tag: <br> <p> <style type="text/css"> <br> <p> outerDiv { <br> <p> fronteira. : 2px sólida <style> elemento é usado para definir estilos CSS embutidos . Você preceder o nome do estilo com um "." para indicar que o estilo é selecionado com base no valor do atributo do elemento de "classe" . Portanto, você acabou de criar um estilo CSS em linha que será aplicada também todos os elementos com um atributo de classe definido como " outerDiv " . Você define as propriedades do estilo dentro de chaves. As propriedades são definidas como " name: . Pares de valores " <br> 12 <p> Digite o seguinte marcação entre a tag <body> e </body> tag: <br> <p> < div class = " outerDiv " > <br> <p> caixa Outer <br> <p> < /div > <br> <p> ao definir o atributo " class " do elemento <div> para " outerDiv " , indica que o estilo que você definiu no passo 1 deve ser aplicado ao div . O conteúdo do elemento <div> é " caixa exterior . " Este é o texto que será exibido dentro da caixa. <br> 13 <p> Clique no menu "Arquivo" e clique em " Salvar" item de menu. <br> 14 <p> Trazer o " demonstração janela do navegador Nested Div " para o primeiro plano . Botão direito do mouse na janela e clique no botão " Atualizar" item de menu. Uma caixa com uma borda bronzeado deve ser exibido. Ele deve conter texto " caixa exterior . " O Se ele não for exibido corretamente, verifique a sua marcação e corrigir eventuais erros . <br> Criar um Inner Div <br> 15 <p> Adicione a seguinte marcação CSS dentro do elemento <style> abaixo da chave de fechamento (}) do outerDiv estilo será aplicado a qualquer elemento que tem o atributo "class" definido para " vBarDiv " . O estilo define um 100 por cento barra preta 100 pixels de altura e 300 pixels de comprimento que serão posicionados em relação aos outros elementos <br> 16 <p> Digite o seguinte marcação abaixo da "caixa externa " de texto: . <br> <p> <div class="vBarDiv"> <br> <p> </div> <br> 17 <p> Clique no menu "Arquivo" e clique em " Salvar" item de menu. <br> <br> 18 <p> Traga a janela do navegador " Nested Div demonstração " para o primeiro plano . Botão direito do mouse na janela e clique no botão " Atualizar" item de menu. A caixa-preta deve ser elaborado dentro da caixa de fronteira - marrom, sob o texto . Se não for , verifique se você não cometeu um erro de digitação. <br> Criar outros Inner Divs <br> 19 <p> Digite o seguinte marcação CSS abaixo da chave de fechamento de o estilo varBarDiv definição de estilo cria uma caixa vermelha que é de 100 pixels de largura. O conteúdo da caixa será centrado <br> 20 <p> Adicione a seguinte marcação após o " caixa externa " de texto: . <br> <p> <div Class="wordDiv"> <br> <p> Inner <br> <p> </div> <br> 21 <p> Adicione a seguinte marcação abaixo do elemento <div> que chama a barra preta : <br> <p> < div class = " wordDiv " > <br> <p> Box <br> <p> </div> <br> 22 <p> Clique no menu "Arquivo" e clique em " Salvar" item de menu . <br> 23 <p> Traga a janela do navegador " Nested Div demonstração " para o primeiro plano . Botão direito do mouse na janela e clique no botão " Atualizar" item de menu. Uma caixa vermelha com a palavra " interior" deve ser exibido acima da barra preta. Uma caixa vermelha com a palavra " Caixa " deve ser exibido abaixo da barra preta. As caixas vermelhas devem estar alinhados com a borda esquerda da caixa exterior . Se eles não são exibidos corretamente , verifique a sua marcação para erros. <br> <br>
<div class=ptad2><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script><!-- pt computador 4 --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="5429850767" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script></div>
</div>
</div>
<div class=ptnrx></div>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Anterior : <a class='LinkPrevArticle' href='/P/computer-programming-languages/87803.html' >Como editar dados em um objeto DataSet </a> </p></td>
</tr>
<tr>
<td width="49%"> Próximo : No</li></td>
</tr>
</table></td>
</tr>
</table>
<div class=bai7></div>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Os artigos relacionados </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87029.html" title="O que é uma soma de verificação em um Mac " target="_self">O que é uma soma de verificação em um Mac </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87081.html" title="Como escrever um programa que gera um número aleatório inteiro entre 1 e 100 " target="_self">Como escrever um programa que gera um número aleatóri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/86677.html" title="Função Callback " target="_self">Função Callback </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87022.html" title="Como fazer Variáveis arquivo no GNU " target="_self">Como fazer Variáveis arquivo no GNU </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87458.html" title="Diferença entre indexador e Matriz " target="_self">Diferença entre indexador e Matriz </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/86365.html" title="Diferença entre pacotes e arquivos de cabeçalho " target="_self">Diferença entre pacotes e arquivos de cabeçalho </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/86372.html" title="Quais são Sintaxe Protocolos " target="_self">Quais são Sintaxe Protocolos </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87504.html" title="A diferença entre excluir e truncar no Oracle " target="_self">A diferença entre excluir e truncar no Oracle </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87208.html" title="Como converter de espaço para Newline " target="_self">Como converter de espaço para Newline </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/86482.html" title="O que é o Protocolo de Incompatibilidade " target="_self">O que é o Protocolo de Incompatibilidade </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artigos em destaque </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/cc-programming/86040.html" title="Como descompactar um arquivo em C # " target="_self">Como descompactar um arquivo em C # </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87070.html" title="Vs JavaScript. Applets Java " target="_self">Vs JavaScript. Applets Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87424.html" title="Como Subconjunto uma matriz no MATLAB " target="_self">Como Subconjunto uma matriz no MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/cc-programming/85865.html" title="Como converter INT variável para String " target="_self">Como converter INT variável para String </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/cc-programming/85322.html" title="Como limitar a casa decimal em Linguagem C " target="_self">Como limitar a casa decimal em Linguagem C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87721.html" title="Como fazer seu próprio personagem Keyboard " target="_self">Como fazer seu próprio personagem Keyboard </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/cc-programming/85717.html" title="Como converter INT para Flutuante " target="_self">Como converter INT para Flutuante </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/cc-programming/85296.html" title="Como ler dados em Xcode " target="_self">Como ler dados em Xcode </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/computer-programming-languages/87558.html" title="Quais são conversão Tags " target="_self">Quais são conversão Tags </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/P/cc-programming/85707.html" title="Como converter Vácuo para Int " target="_self">Como converter Vácuo para Int </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div class=bai7></div>
<div class="ptbottom bs">
Cop e direita © Conhecimento computador https://ptcomputador.com Todos os Direitos Reservados
</div>
</div>
</body>
</html>