Diseño de la Página del Cantro de Servicios
Código de diseño
<html>
<head>
<meta charset="utf-8">
<title>Centro de Servicios--Diseño</title>
<style>
*{
margin: 0;
padding: 0;
}
.contenedor{
width: 800px;
height: 670px;
margin: 0px auto;
border: 2px solid;
}
.cabecera{
width: 100%;
height: 100px;
text-align: center;
background-color: lightcyan;
}
.menu{
width: 100%;
height: 60px;
text-align: center;
background-color: lightpink;
}
.principal{
width: 100%;
height: 480px;
}
.izquierda{
width: 200px;
height: 480px;
text-align: center;
float: left;
background-color: lightgoldenrodyellow;
}
.derecha{
text-align: center;
width: 600px;
height: 480px;
margin-left: 200px;
background-color: lightgreen;
}
table{
width:600px;
height: 200px;
margin-top: 255px;
}
td{
width: 300px;
height: 200px;
background-color: aliceblue;
}
.pie{
width: 100%;
height: 30px;
text-align: center;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="cabecera">cabecera</div>
<div class="menu">menú</div>
<div class="principal">
<div class="izquierda">izquierda</div>
<div class="derecha">derecha
| A | B | C |
|---|---|---|
</div>
</div>
<div class="pie">pie</div>
</div>
</body>
</html>
Ejemplo de código con imágenes
<html>
<head>
<meta charset="utf-8">
<title>Centro de Servicios</title>
<style>
*{
margin: 0;
padding: 0;
}
.contenedor{
width: 800px;
height: 700px;
margin: 0px auto;
}
.cabecera{
width: 100%;
height: 100px;
text-align: center;
background: url(img/logo2.jpg) no-repeat;
}
.menu{
width: 100%;
height: 60px;
text-align: center;
}
.menu img{
float: right;
width: 120px;
height: 40px;
padding: 5px;
}
.principal{
width: 100%;
height: 480px;
}
.izquierda{
width: 200px;
height: 480px;
float: left;
}
.derecha{
width: 600px;
height: 480px;
margin-left: 200px;
line-height: 25px;
}
table{
width: 150px;
height: 200px;
margin-top: 80px;
}
td img{
width: 198px;
height: 200px;
}
.pie{
width: 100%;
height: 30px;
text-align: center;
background: url(img/footer.jpg);
}
</style>
</head>
<body>
<div class="contenedor">
<div class="cabecera"></div>
<div class="menu">
</div>
<div class="principal">
<div class="izquierda">
</div>
<div class="derecha">
<h3 align="center">Preguntas Frecuentes</h3>
<h3>1. ¿Cómo contactar al servicio al cliente?</h3>
<p>Muchos usuarios han preguntado por qué el servicio al cliente no está en línea, no responde, etc. Puedes contactarnos a través de este QQ: 123000000.</p>
<h3>2. ¿Por qué mi pedido sigue en proceso?</h3>
<p>Si tu pedido sigue en proceso, te recomendamos que te pongas en contacto con nosotros para entender la razón. Puedes contactarnos a través de este QQ: 123000000.</p>
|  |  |  |
|---|---|---|
</div>
</div>
<div class="pie">
</div>
</div>
</body>
</html>
Diseño de la Página de Escalada en Roca
Código de diseño
<html>
<head>
<meta charset="utf-8">
<title>Escalada en Roca--Diseño</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.encabezado{
height: 70px;
background-color: gainsboro;
}
.principal{
width: 800px;
margin-left: auto;
margin-right: auto;
}
.superior{
width: 800px;
height: 104px;
}
.a-izquierda{
width: 400px;
height:100px;
float: left;
border: 2px solid;
}
.a-derecha{
width: 400px;
height:100px;
margin-left: 400px;
border: 2px solid;
}
.b,.d,.f{
width: 820px;
height: 30px;
background-color: gray;
}
.c{
width: 820px;
height: 250px;
border: 2px solid;
}
.e{
width: 800px;
height: 254px;
}
.e-izquierda{
width: 400px;
height: 250px;
float: left;
border: 2px solid;
}
.e-derecha{
width: 400px;
height:250px;
margin-left: 400px;
border: 2px solid;
}
.g{
width: 820px;
height:30px;
border: 2px solid;
}
.inferior{
height:50px;
background-color: gainsboro;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="encabezado">encabezado</div>
<div class="principal">
<div class="superior">
<div class="a-izquierda">A-izquierda</div>
<div class="a-derecha">A-derecha</div>
</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">
<div class="e-izquierda">E-izquierda</div>
<div class="e-derecha">E-derecha</div>
</div>
<div class="f">F</div>
<div class="g">G</div>
</div>
<div class="inferior">inferior</div>
</div>
</body>
</html>
Ejemplo de código con imágenes
<html>
<head>
<meta charset="utf-8">
<title>Escalada en Roca</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.contenedor{
background:url(img/bg.jpg)
}
.encabezado{
height: 70px;
background: url(img/header_bg.jpg);
}
.principal{
width: 800px;
margin-left: auto;
margin-right: auto;
}
.superior{
width: 800px;
height: 104px;
}
.a-izquierda{
width: 400px;
height:100px;
float: left;
background: url(img/logo.jpg) no-repeat;
}
.a-derecha{
width: 400px;
height:100px;
margin-left: 450px;
}
.b,.d,.f{
width: 820px;
height: 30px;
background: url(img/h_line.png) no-repeat center;
}
.c{
width: 820px;
height: 260px;
}
.e{
width: 800px;
height: 304px;
}
.e-izquierda{
width: 400px;
height: 300px;
float: left;
}
.e-derecha{
width: 400px;
height:300px;
margin-left: 400px;
}
.g{
width: 820px;
height:30px;
text-align: center;
}
.inferior{
height:50px;
background-color: gainsboro;
background: url(img/bottom_bg.jpg);
}
.a-izquierda p{
font-family: '宋体';
font-style: italic;
color: white;
margin-top: 55px;
margin-left: 120px;
font-size: 24px;
}
h2{
color: darkgray;
font-size: 30px;
font-family: '宋体';
}
p,span{
color: white;
font-weight: bold;
}
a{
color: white;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="encabezado"></div>
<div class="principal">
<div class="superior">
<div class="a-izquierda">
<p>Escalada en Roca</p>
</div>
<div class="a-derecha">
</div>
</div>
<div class="b"></div>
<div class="c">
<h2>Escalada en Roca</h2>
<p>La escalada en roca es un deporte que se practica en paredes de roca utilizando las fisuras, huecos y salientes naturales como agarres. Este deporte mejora la resistencia, la fuerza, la flexibilidad y la capacidad de toma de decisiones. La escalada sin equipo adicional y protección es extremadamente peligrosa y se considera uno de los deportes más riesgosos del mundo. Sin embargo, su atractivo y personalidad única atraen a muchos entusiastas.</p>
<span>En Europa, EE.UU., Japón y Corea, la escalada en roca es muy popular. Francia y EE.UU. son líderes en este deporte, con Francia destacando en muros artificiales y EE.UU. en rutas naturales. En Asia, Japón y Corea tienen un alto nivel, mientras que China, Hong Kong y Taiwán están en un nivel medio.</span>
<a href="#">Leer Más...</a>
</div>
<div class="d"></div>
<div class="e">
<div class="e-izquierda">
<h2>Origen</h2>
<p>La escalada en roca se originó en Europa en el siglo XVIII y se convirtió en un deporte independiente en 1970. Consiste en escalar sin ayuda de equipos adicionales, solo con la fuerza del escalador.</p>
<p>En Europa, EE.UU., Japón y Corea, la escalada en roca es muy popular. Francia y EE.UU. son líderes, con Francia destacando en muros artificiales y EE.UU. en rutas naturales. En Asia, Japón y Corea tienen un alto nivel, mientras que China, Hong Kong y Taiwán están en un nivel medio.</p>
</div>
<div class="e-derecha">
<h2>Características del Deporte</h2>
<p>La escalada en roca requiere realizar movimientos peligrosos en diferentes alturas y ángulos, combinando fitness, entretenimiento y competición. Aunque es un deporte de alta demanda física, cada vez más personas lo disfrutan. Sin embargo, la escalada sin equipo es extremadamente peligrosa para principiantes sin entrenamiento adecuado.</p>
</div>
</div>
<div class="f"></div>
<div class="g">
<span>Copyright ©</span><a href="#">Escalada en Roca
</div>
</div>
<div class="inferior"></div>
</div>
</body>
</html>