Stap 4: De hoofdtekst Container
< sectie id = "body_container" >
< sectie id = "top_section" >
< h2 > Welkom bij < span > Project < / span >< / h2 >
< img src="common/images/van_img.jpg" alt = "#" class = "van_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< img src="common/images/house_img.jpg" alt = "#" class = "house_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< / afdeling >
Tot nu toe hebben we het logo, de contactpersonen niet geplaatst. op de top, de bar van de navigatie, de tekst-container en de schuifregelaar. Nu is het tijd om de container van de hoofdmacht waar we plaatsen de kop, twee beelden en de respectieve tekst. Zorg dus voor een nieuwe div met een klasse van wrapper, dan maken twee sectie tags, één met een id van body_container, en ten tweede met een id van top_section.
Nu maken een H2-tag en plaats de kop erin. Vervolgens de afbeelding label herinneren de eerste afbeelding te gebruiken voor het bovenste gedeelte. Controleer voor de verwijzing naar de afbeelding, het ontwerp-bestand. Zoals u in het ontwerp, zien kunt dat de tekst in twee alinea's is geplaatst, dus maak twee nieuwe alineacodes en plaats van de juiste inhoud binnen hen beiden.
Nu kopieer en plak deze stap om de tweede afbeelding en de tekst te plaatsen. Vergeet niet te vervangen door het pad van de afbeelding en tekst met het juiste beeld & alineatekst en sluit de sectie tag.
Onderkant Container
< sectie id = "bottom_container" >
< klasse afdeling = "common_box" >
< h3 > Testimonials < / h3 >
< p klasse "laatste" = > "Lorem ipsum dolor sit amet, consectetur adipiscing elit. DUIS ullamcorper mollis diam in sagittis." < /p >
< een href = "#" class = "naam" >-Vijay Kumar < /a >
< / afdeling >
< klasse afdeling = "common_box tweede" >
< h3 > Contact & adres < / h3 >
< p > 1234 Nodia Road (boven in de hoek van de spoorweg-St.) M.G. nagar, Nodia 14007 < /p >
< ul klasse = "contact" >
< li >< span > telefoon: < / span > 123-456-7890 < /li >
< li >< span > Fax: < / span > 987-654-3210 < /li >
< li >< span > E-mail: < / span >< een href = "mailto:thesignguy
< /ul >
< / afdeling >
< / afdeling >
< / afdeling >
< / div >
We maken de bodem-container voor het plaatsen van de getuigenis nu en contactadres. Dus, maak een nieuwe sectie label en geef het een klasse van onderkant container. Dan een andere sectie-tag met een klasse van common_box, en plaatst de kop voor de getuigenis van kolom binnen een H3-code. Nu met behulp van de alineacode, plaatst u de getuigenis tekst erin, en vergeet niet te geven deze alineacode een klasse van laatste. Nu voor de getuigenis afzender naam, maken van een anker-tag met een klasse van naam, plaatst u de naam van de afzender erin, en sluit de sectie tag om te voltooien de getuigenis kolom.
Nu voor contactadres, maak een nieuwe sectie-tag met een klasse van common_box_second. Vervolgens plaatst u de titel, dat wil zeggen, 'Contact & adres' in een H3-code en het gehele adres met postcode plaats met de alineacode. En zoals u in het PSD-bestand zien kunt, moeten ook de telefoon, Fax en E-mail, dus laten we dat nu doen.
Een ongeordende lijst markering met een klasse van contact maken. Binnen deze ul-tag, make drie lijst of li-tags en plaats de telefoon, Fax en E-mail in dezelfde volgorde. Maar zoals je al gemerkt hebben wellicht, de tekst van hun kop is in zwarte kleur, dus een span-tag in elke li-tag toevoegen en sluit deze af net na de kop.
Bovendien, in de sectie e-mail het e-mailadres moet door met hyperlinks met een mailto actie zo doen dat met behulp van de anker-tag, en sluiten de ongeordende lijst, drie sectie tags en de div-tag.
