É hora de passar para a segunda tarefa neste curso.
Esta semana tivemos cobertos botões, formulários,
tabelas, cartões, imagens e mídia e, finalmente, cobrimos emblema.
Então, esta tarefa vamos olhar
para tentar explorar sua compreensão de todos esses tópicos.
Sua segunda tarefa consiste em três tarefas.
Vamos passar por cada um deles passo a passo.
Sua primeira tarefa é criar um formulário no campo da tabela de estratégia de índice.
Então, isso é logo após as descrições que temos para
usar outra linha com o conteúdo da linha lá.
Crie um cartão lá com um título.
Reserve uma mesa e, em seguida, dentro desse cartão,
no bloco de cartas, inclua um formulário.
O formulário conterá botões de opção.
Você pode verificar a documentação para obter formulários para entender como criar botões de opção.
Eles são bastante simples.
Então, temos botões de rádio inline todo o caminho variando de um a
seis e você permitirá que o usuário selecione qualquer um desses botões de opção.
Então, clicando em um deles,
permitirá que você selecione o número de convidados.
E o segundo pedaço de informação é data,
e o terceiro pedaço de informação é tempo.
Então, a data e hora vão ser suportados por dois campos de entrada
aqui e, em seguida, temos um botão enviar aqui chamado
“reserve” com o botão sendo na cor azul.
Então, lembre-se de todos esses detalhes diferentes aqui e isso está em um cartão.
Agora, este cartão se estiver em um tamanho de tela pequeno a extra grande,
ele será centralizado nesta linha e ocupará oito colunas.
Então você tem duas colunas restantes aqui e duas colunas esquerda lá.
Estas são algumas pistas sobre como você vai posicionar isso.
Para tamanhos de tela extra pequenos,
você ocupa toda a largura da tela,
caso contrário seu formulário não pode ser acomodado de forma significativa.
Então, essa é a primeira tarefa na sua segunda tarefa.
Se você se lembra, a esquerda o segundo sorteio de nosso conteúdo sem estilo,
você vai usar o objeto de mídia agora para estilizar este conteúdo.
Observe em particular que,
para o objeto de mídia, sua imagem aparecerá no lado direito,
então use o conjunto direito de
classes para fazer com que sua imagem apareça no lado direito do conteúdo,
ao contrário dos outros em que a imagem aparece no lado esquerdo.
E tem que ser centrado verticalmente aqui.
Além disso, observe que você precisa incluir um emblema aqui com a palavra “novo”.
E assim já vimos isso
no exercício antes, então isso não deve ser muito difícil de alcançar.
Então, sua segunda tarefa, novamente,
é usar o objeto de mídia para estilizar isso através.
A tarefa final na segunda tarefa,
é criar um botão aqui.
Isso seria um botão de bloqueio.
Então, classe de bloco de botões que você vai usar.
Agora, o que você pode fazer é você pode reposicionar este conteúdo
aqui para ocupar metade da tela e
, em seguida, esses dois vão gostar da parte restante da tela.
E use a mesa de reserva de palavras lá.
Não só isso, quando você clicar neste botão,
você será levado para o formulário na parte inferior da página,
que permite que você faça a reserva.
Então, é aqui que você precisa usar as formas HTML de
especificar IDs para alcançar essa ação.
Então, voltando novamente, este botão deve ser posicionado verticalmente na
tabela e deve compartilhar a metade do espaço da tela com o seu logotipo aqui.
As palavras aqui podem ocupar a metade restante dos scripts.
Então você pode usar as classes de coluna para ajustar essas coisas.