tema
Analizando el diseño de la página de inicio de Baidu, escribiendo código para realizar el proceso de diseño de toda la página web. Domina el proceso básico de maquetación de diseño web.
Imagen original
El primer paso es el bloque div
Inicialmente, se puede dividir en cinco secciones y
analizar una por una. La
primera sección son
algunos hipervínculos, escriba algunos espacios y agregue un botón para colocar el todo a la derecha.
Adjunte el código
<div align="right">
<a href="#">糯米</a>
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">登陆</a>
<a href="#">设置</a>
<input id="b" type="button" name="" value="更多产品">
</div>
La segunda pieza de
texto no se puede diseñar, por lo que adoptamos un enfoque diferente y optamos por citar una imagen en el centro.
<div align="center">
<img src="baidu.jpg" width="20%;">
</div>
El tercer bloque es
un cuadro de entrada, un botón de botón
<div align="center" >
<input id="k"type="text" name="" size="120px;" value="" >
<input id="b" type="button" name="" value="百度一下">
</div>
El cuarto bloque,
podemos tener el mismo hipervínculo que el primer bloque, pero aquí solo se está imitando a Baidu, no se requiere respuesta de página, y para más práctica, elegimos usar la etiqueta p aquí.
<div align="center">
<p id="g">2016年高考闪电估分，真题答案发布</p>
</div>
La quinta pieza
también es la más complicada aquí, así que tenemos que dividirla en piezas más complicadas.
Después de dividirlo en bloques, el código de escritura está más organizado y proporciono mi código.
<div>
<div id="erweima">
<div id="d1"><img src="er1.png" width="100px;"></div>
<div id="d2"><p><b>手机百度</b> <br>快人一步</p> </div>
<div id="d3"><img src="er1.png" width="100px;"></div>
<div id="d4"><p><b>百度糯米</b><br>一元大餐</p></div>
<div id="da">
<div id="d5"><p id="g">把百度设置为主页</p></div>
<div id="d6"><p id="g">关于百度</p></div>
<div id="d7"><p id="g">About Baidu</p></div>
<div id="d8"> @2016 Baidu 使用百度前必读 意见反馈 京LCP证030173号</div>
<div id="d9">京公安网备案11000002000001号</div>
</div>
</div>
</div>
Debido a que el código general es más largo, se usa CSS para estandarizar la página y el código se adjunta nuevamente.
css
<style type="text/css">
a{
text-decoration: underline;color: black;}
#g{
text-decoration: underline;}
#k{
height: 30px;}
#b{
height: 30px; background:blue; color: white;}
#erweima{
position: absolute; top: 500px; left: 300px;}
#d1{
float: left;}
#d2{
float: left; position: relative; left: 10px;}
#d3{
float: left; position: relative; left: 100px;}
#d4{
float: left; position: relative; left: 110px;width: 80px;}
#da{
position: absolute;left: 500px;width: 500px; height: 100px}
#d5{
float:left; height: 30%}
#d6{
float: left;position: relative;left: 80px; height: 30%}
#d7{
float: left;position: relative;left: 150px; height: 30px;}
#d8{
clear:both; height: 30%； position:relative; padding-top:10px;}
#d9{
height: 40%}
</style>
Al final, el bloguero experimentó casi 4 horas de estallido del hígado y escribió esta página web de Baidu. Adjunta una foto de mis resultados.
