Recientemente estaba aprendiendo HTML y CSS, y estaba escuchando la clase de la maestra Pink. Hoy, traté de escribir la página de inicio del sitio web oficial de Dapeng Education.
La imagen es la página de inicio del sitio web oficial de Dapeng Education:
Sitio web: https://www.dapengjiaoyu.cn/
Permítanme hablarles sobre algunos de los problemas encontrados durante el proceso de escritura.
- Al medir el tamaño de la imagen, usé la herramienta de captura de pantalla qq al principio, pero descubrí que, por ejemplo, medía claramente 100 px, pero cuando escribí el código, el efecto de visualización de 100 px era mucho más grande que la imagen original. Pensé era la herramienta de captura de pantalla qq. El problema sigue siendo inútil después de cambiar a ps. Más tarde, busqué información y descubrí que el navegador y el sistema tienen función de zoom, por lo que la relación de visualización del navegador y el sistema es del 100%.
- Al escribir el posicionamiento fijo del encabezado de la página web, descubrí que la página web presiona hacia abajo el área del encabezado cuando se desplaza hacia abajo. Más tarde, descubrí que agregar un índice z = 100 es suficiente. El significado literal es agrandar el elemento que aparece en la dirección del eje z. Importancia, cuanto mayor sea el valor, más fácil será por encima del eje z
- Cuando utilicé la imagen del sitio web original como imagen de fondo, descubrí que el tamaño descargado es diferente del tamaño que se muestra en el sitio web original. En este momento, debe modificar manualmente el tamaño usted mismo. Más tarde, descubrí que puede utilizar "background-size" para modificar el tamaño de la imagen de fondo.
- Cuando se juntan varios enlaces, podemos hacerlo a través de ul y li. Como dijo el profesor Pink, no solo la estructura es muy clara, sino que también se puede evitar el apilamiento de enlaces.
- Lo entiendo muy bien cuando escucho a Teacher Pink, pero es muy lento para escribir solo. Parece que fortaleceré la práctica en el futuro. He cambiado la siguiente parte de la página web original. A veces es bastante divertido cambiar las páginas web de otras personas.
Código: (no sigue la especificación del código por el momento)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大鹏教育-千万人的兴趣学习社区</title>
<link rel="stylesheet" href="../css/1.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="midheader">
<div class="year">
<img src="../images/过大年.png" alt="过大年" width="131px">
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">体验课</a></li>
<li><a href="#">正式课</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="search">
<input type="text" value="搜索更多课程">
</div>
<div class="download">
<img src="../images/下载app.png" alt="下载" width="124px">
</div>
<div class="user"><a href="#">和谐创新</a></div>
</div>
</div>
<!-- 左侧 -->
<div class="leftnav">
<ul>
<li><a href="#">关注</a></li>
<li><a href="#">推荐</a></li>
<li><a href="#">成长</a></li>
<li><a href="#">作业 </a></li>
<li><a href="#">作品 </a></li>
<li><a href="#">动态 </a></li>
<li><a href="#">阅读 </a></li>
<li><a href="#">视频 </a></li>
<li><a href="#">小视频</a></li>
</ul>
</div>
<!-- 右侧 -->
<div class="rightuser">
<div class="touimg">
<a href="#"></a>
</div>
<h4 class="username">
<a href="#">和谐创新</a>
</h4>
<h5 class="number">
<a href="#">学籍号: 2020121600460</a>
</h5>
<div class="classes">
<ul>
<li class="b1"><a href="#" class="c1">我的体验课</a></li>
<li><a href="#" class="c2">我的正式课</a></li>
<li><a href="#" class="c3">我的发布</a></li>
</ul>
</div>
</div>
<!-- 右下侧 -->
<div class="box">
<div class="c1"><h4>体验课作业提交</h4></div>
<div class="c2"><h4>正式课作业提交</h4></div>
<div class="c3"><h4>作品发布</h4></div>
<div class="c4"><h4>发布动态</h4></div>
</div>
<div class="mid w">
<div class="select">
<ul>
<li><a href="#" class="span"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<div class="midcon w">
<div class="box1">
<div class="big">
<div class="bigleft" id="c1"></div>
<div class="bigright" >喜欢姐姐~</div>
</div>
</div>
<div class="box1">
<div class="big">
<div class="bigleft" id="c2"></div>
<div class="bigright">喜欢姐姐~</div>
</div>
</div>
<div class="box1">
<div class="big">
<div class="bigleft" id="c3"></div>
<div class="bigright">喜欢姐姐~</div>
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
height: 72px;
background-color: #282836;
}
.header .midheader {
height: 72px;
width: 1160px;
margin: 0 188px 20.8px 174.4px;
}
.header .midheader .year {
float: left;
width: 131px;
height: 72px;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #b9b9c4;
}
.header .nav {
float: left;
margin-left: 45px;
}
.header .nav ul li {
float:left;
margin-right: 26px;
}
.header .nav ul li a {
font-size: 19px;
line-height: 72px;
}
.header .nav ul li a:hover {
color: #fff;
}
.header .search {
float: left;
margin-left: 240px;
width: 131px;
height: 72px;
}
.header .search input {
width: 118px;
height: 24px;
margin-top: 25px;
background-color: #282836;
color: #b9b9c4;
font-size: 12px;
padding-left: 9.6px;
border: 1px solid white;
border-radius: 2px;
}
.header .search input:hover {
background-color: #fff;
}
.header .download {
float: left;
margin-top: 20px;
margin-left: 4px;
width: 124px;
height: 32px;
}
.header .user {
float: left;
width: 75px;
height: 16px;
font-size: 14.5px;
color: #b9b9c4;
margin-left: 4px;
margin-top: 26.4px;
background: url(../images/头像.png) no-repeat right center;
background-size: 13px;
}
.leftnav {
position: fixed;
top: 93px;
left: 174.5px;
width: 108px;
height: 442px;
}
.leftnav ul li {
width: 108px;
height: 40px;
margin-bottom: 8px;
text-align: center;
}
.leftnav ul li a {
display: block;
width: 108px;
height: 40px;
color: black;
font-size: 16px;
line-height: 40px;
border: 1px solid #fff;
border-radius: 6px;
}
.leftnav ul li a:hover {
background-color: #18D386;
}
.rightuser {
position: fixed;
z-index: 100;
top: 93px;
right: 205px;
width: 250px;
height: 208px;
background-color: #f5f8f8;
}
.rightuser .touimg a {
display: block;
width: 64px;
height: 64px;
margin-left: 92.8px;
margin-top: 19.2px;
border: 2px solid white;
border-radius: 50%;
background: url(../images/头像2.png) no-repeat;
background-size: 64px;
}
.rightuser .username {
margin-top: 7px;
margin-left: 94px;
font-size: 16px;
font-weight: 400;
color: #000;
}
.rightuser .number {
margin-top: 3px;
margin-left: 60px;
font-size: 9.6px;
color: #b9b9c4;
}
.rightuser .classes ul li {
float: left;
}
.rightuser .classes ul .b1 {
margin-left: 2px;
}
.rightuser .classes ul li a {
display: inline-block;
width: 79px;
height: 80px;
text-align: center;
font-size: 12.8px;
color: #8d9596;
line-height: 100px;
}
.rightuser .classes ul li .c1 {
background: url(../images/img5.png) no-repeat center 10px;
}
.rightuser .classes ul li .c2 {
background: url(../images/img6.png) no-repeat center 10px;
}
.rightuser .classes ul li .c3 {
background: url(../images/img7.png) no-repeat center 10px;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 220px;
background-color: rgb(245,248,248);
margin-top: 324px;
margin-left: 1065px;
}
.box div {
display: inline-block;
width: 120px;
height: 110px;
text-align: center;
background-repeat: no-repeat;
background-position: center 15px;
background-size: 60px;
}
.box .c1 {
background-image: url(../images/img1.png);
}
.box .c2 {
background-image: url(../images/img2.png);
}
.box .c3 {
background-image: url(../images/img3.png);
}
.box .c4 {
background-image: url(../images/img4.png);
}
.box div h4 {
color: rgb(28, 29, 29);
font-size: 10px;
font-weight: 400;
margin-top: 82px;
}
.w {
width: 760px;
margin-left: 292px;
}
.mid {
position: relative;
top: 0;
left: 0;
height: 270px;
background-color: pink;
margin-top: 93px;
background: url(../images/banner.png) no-repeat;
background-size: 760px;
border: 1px solid transparent;
border-radius: 13px;
}
.select {
position: absolute;
top: 100%;
left: 50%;
margin-top: -29px;
margin-left: -68px;
width: 136px;
height: 17.6px;
background-color: rgba(0,0,0,.2);
border: 1px solid transparent;
border-radius: 8.8px;
}
.select li .span {
width: 26.4px;
height: 7px;
}
.select li {
float: left;
line-height: 13.6px;
}
.select li a {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 3.5px;
background-color: rgba(225, 230, 208, 0.8);
margin-left: 7px;
}
.midcon>div {
height: 250px;
/* background-color: rgba(241, 155, 155, 0.2); */
border-bottom: 1px solid black;
}
.midcon .box1 .big {
width: 760px;
height: 189px;
}
.midcon .box1 .big .bigleft {
float: left;
width: 252px;
height: 189px;
margin-top: 30px;
}
.midcon .box1 .big #c1 {
background: url(../images/box1.png) no-repeat center;
}
.midcon .box1 .big #c2 {
background: url(../images/box2.png) no-repeat center;
}
.midcon .box1 .big #c3 {
background: url(../images/box3.png) no-repeat center;
}
.midcon .box1 .big .bigright {
float: left;
width: 480px;
margin-top: 30px;
padding: 10px;
color: #000;
font-size: 20px;
text-align: center;
line-height: 189px;
background: url(../images/爱心.png) no-repeat 90px center;
background-size: 340px;
}
Captura de pantalla del código:
Efecto:
