Pesquisar na Comunidade
Mostrando resultados para as tags ''template responsivo''.
Atualmente, o índice de pesquisa está sendo processado. Os resultados atuais podem não estar completos.
Encontrado 1 registro
-
Nada melhor que um site responsivo não é mesmo? E se você não sabe o que isso significa é basicamente: Uma única pagina HTML adaptável para todo e qualquer tamanho de tela. O site responsivo ele tem uma condição, o site deve se adaptar conforme vc diminua ou aumente o tamanho da tela, se precisar de um reloud para se adaptar já não é mais responsivo. Um excelente exemplo é a WebCheats, o Youtube, 4Shared entre vários outros. Se você ficar diminuindo ou aumentando a tela, os elementos vão se adaptando automaticamente. Isso é muito vantajoso. No desenvolvimento de uma pagina responsiva temos de trocar os acostumado 'px' por 'em' e '%'. A '%' porcetagem é adaptavel em relação ao tamanho total do elemento pai e o 'em' é relativo a '%' do elemento pai, já o 'px' é um valor fixo. Não existe nenhum segredo. Por exemplo tenho um elemento pai, o filho e o neto. Para ele se adaptar ficar assim: <div id="pai"> <div id="filho"> <div id="neto"><span>Aqui vem um conteúdo qualquer, só para ter com o que preencher mesmo</span></div> </div> </div> A estilização ficaria assim: #pai { width:100%; } #filhos { width:98%; padding:0 1%; } #neto { padding:0.625em; /* 10px */ font-size:1em; /* 16px */ } Para converter o 'px' em 'em' basta dividir por 16 function convertPxToEm(px) { reuturn px/16; } ou EM = PX / 16 E o site será adaptável, é fácil basta estudar... e por isso fiz um exemplo bacana para estudos: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Hidden Content]; <html xmlns="[Hidden Content]; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WC - A sua comunidade de jogos online</title> <link href="[Hidden Content]" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="all"> <!-- TOPO --> <div class="topo"> <h1><span class="topo-text-a">WEB</span><span class="topo-text-b">CHEATS</span></h1> <h2>A sua comunidade de jogos online</h2> </div> <!-- topo --> <!-- MENU --> <div class="menu"> <ul class="menu-block-a"> <li><a href="#">Home</a></li> <li><a href="#">Fóruns</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">Membros</a></li> </ul> <ul class="menu-block-b"> <li><input type="text" name="buscar" placeholder="Pesquisar..." /></li> <li><a href="#">Criar Conta</a></li> <li><a href="#">Acessar</a></li> </ul> <div style="clear:both"></div> </div> <!-- menu --> <!-- FORUM --> <div class="forum"> <div class="forum-box"> <div class="forum-box-titulo"> <a href="#"><span>Anúncios/Eventos</span></a> </div> <!-- box-titulo --> <div class="forum-box-content"> <div class="forum-box-show"> <div class="forum-box-show-titulo"> <a href="#"><span>Anúncios</span></a> </div> <div class="forum-box-show-informacao"> <span>Discussões:</span> <span>1,000</span> <span>Posts:</span> <span>1,000</span> </div> </div> <!-- box-show --> </div> <!-- box-content --> <div class="forum-box-last"> <div class="forum-box-last-titulo"> <a href="#"><span>Melhorias na Área de Desenvolvimento Já</span></a> </div> <div class="forum-box-last-member"> <a href="#"><span>Juliana~*</span></a> </div> </div> <div style="clear:both"></div><!-- box-last --> <div class="forum-box-content"> <div class="forum-box-show"> <div class="forum-box-show-titulo"> <a href="#"><span>Suporte</span></a> </div> <div class="forum-box-show-informacao"> <span>Discussões:</span> <span>1,000</span> <span>Posts:</span> <span>1,000</span> </div> </div> </div> <!-- box-content --> <div class="forum-box-last"> <div class="forum-box-last-titulo"> <a href="#"><span>Melhorias na Área de Desenvolvimento Já</span></a> </div> <div class="forum-box-last-member"> <a href="#"><span>Juliana~*</span></a> </div> </div> <div style="clear:both"></div><!-- box-last --> <div class="forum-box-content"> <div class="forum-box-show"> <div class="forum-box-show-titulo"> <a href="#"><span>Sugestões</span></a> </div> <div class="forum-box-show-informacao"> <span>Discussões:</span> <span>1,000</span> <span>Posts:</span> <span>1,000</span> </div> </div> </div> <!-- box-content --> <div class="forum-box-last"> <div class="forum-box-last-titulo"> <a href="#"><span>Melhorias na Área de Desenvolvimento Já</span></a> </div> <div class="forum-box-last-member"> <a href="#"><span>Juliana~*</span></a> </div> </div> <div style="clear:both"></div><!-- box-last --> </div> <!-- box --> </div> <!-- forum --> </div> </body> </html> style.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; transition:color 0.5s ease; } body { background:url(../images/bg_body.png); } #all { width:100%; } a { font-family:Oswald; color:#FFF; text-decoration:none; } a:visited { font-family:Oswald; color:#FFF; } .topo { margin:0 auto; padding:1.56em 0; width:100%; min-width:200px; background:#111; font-family:'Oswald', serif; text-align:center; } .topo-text-a, .topo-text-b { font-size:2em; font-weight:bold; } .topo-text-a { color:#FFF; } .topo-text-b { color:#F00; } .topo h2 { color:#FFF; font-size:1em; } .menu { width:100%; background:url(../images/bg_block.png); border-bottom:5px solid rgba(204,0,0,1); } .menu-block-a, .menu-block-b { list-style:none; float:left; } .menu-block-a { float:left; } .menu-block-b { float:right; } .menu li { display:inline-block; padding:0.6em 1.25em; } .menu li:hover { background:rgba(204,0,0,1); } .forum { width:98%; margin:0.9375em 1%; margin-bottom:0; font-family:Lato; } .forum-box { background:#FFF; } .forum-box-titulo { padding:0.625em; background:url(../images/bg_block.png); border-radius:5px 5px 0 0; } .forum-box-content { margin:0.9375em 0; float:left; } .forum-box-show { padding:0.3125em 0; padding-left:3.75em; background: url(../images/icon_forum.png); background-size:3.125em 3.125em; background-repeat:no-repeat; background-position:0.3125em 0; } .forum-box-show-titulo span { color:#666; font-size:0.875em; } .forum-box-show-titulo span:hover { color:#000; } .forum-box-show-informacao span { font-size:0.625em; font-weight:none; } .forum-box-last { margin:1.6em 0; margin-right:0.5000em; float:right; } .forum-box-last-titulo { padding-left:1.25em; background: url(../images/bg_list_post.png); background-size:1.125em 1.75em; background-repeat:no-repeat; background-position:0.15625px -0.3125em; } .forum-box-last-titulo span { font-family:Lato; font-size:0.875em; color:#000; } .forum-box-last-member { padding-left:1.25em; } .forum-box-last-member span { font-family:Lato; font-size:0.75em; color:#666; } Uma réplica muito feia da WC kkkk UPDATE [spoiler=Menu Responsivo]index.html <script src="js/ready.js"></script> {...} <!-- MENU --> <div class="menu"> <div class="res_menu" style="display:none"> <div class="res_menu_op"> <span style="color:#CCC">☰</span> <span>MENU</span> </div> </div> <ul class="menu-block-a"> {...} style.css /* menu responsivo */ .res_menu_op { padding:1em; } .res_menu_op span { color:#FFF; font-weight:bold; } .res_menu_op span:hover { cursor:pointer; } ready.js // JavaScript Document $(document).ready(function() { // var menuBlockA = '.menu-block-a', menuBlockB = '.menu-block-b', resMenu = '.res_menu', forum = '.forum', keys = [true,true,true,true]; $(window).resize(function() { resizeResponsivo(); }); resizeResponsivo(); function resizeResponsivo() { var width = window.innerWidth, height = window.innerHeight; if ( width < 651 && keys[0]) { keys[0] = false; keys[2] = true; $(menuBlockB).css('float','left'); resizeResponsivo(); // } else if (width < 362 && keys[1]) { keys[1] = false; keys[3] = true; $(menuBlockA).remove().appendTo(resMenu).hide(); $(menuBlockB).remove().appendTo(resMenu).hide(); $(resMenu).click(function() { // $(menuBlockA+' li').css('display','block'); $(menuBlockB+' li').css('display','block'); // $(menuBlockA).slideDown(function() { $(menuBlockB).slideDown(function() { // perda do foco $(forum).one('mouseenter', function() { // $(menuBlockB).slideUp(function() { $(menuBlockA).slideUp(function() { // $(menuBlockA+' li').css('display','inline-block'); $(menuBlockB+' li').css('display','inline-block'); }); }); }); }); }); resizeResponsivo(); }).toggle(); // } else if (width > 651 && keys[2]) { keys[2] = false; keys[0] = true; if ( $(menuBlockB).css('float') == 'left' ) { $(menuBlockB).css('float','right'); } resizeResponsivo(); // } else if (width > 362 && keys[3]) { keys[3] = false; keys[1] = true; // $(menuBlockB).slideUp(function() { $(menuBlockA).slideUp(function() { // $(menuBlockA+' li').css('display','inline-block'); $(menuBlockB+' li').css('display','inline-block'); // $(menuBlockA).remove().insertAfter(resMenu).fadeIn(function() { $(menuBlockB).remove().insertAfter(menuBlockA).fadeIn(function() { $(resMenu).slideUp(); }); }); }); }); resizeResponsivo(); } } });
