Recently I was learning HTML and CSS, and I was listening to teacher Pink's class. Today, I tried to write the homepage of Dapeng Education's official website.
The picture is the homepage of Dapeng Education's official website:
Website: https://www.dapengjiaoyu.cn/
Let me talk about some of the problems encountered during the writing process.
- When measuring the size of the picture, I used the qq screenshot tool at first, but found that, for example, I clearly measured 100px, but when I wrote the code, the 100px display effect was much larger than the original image. I thought it was the qq screenshot tool. The problem is still useless after switching to ps. Later, I searched for information and found that the browser and system have zoom function, so that the display ratio of the browser and system is 100%.
- When writing the fixed positioning of the head of the webpage, I found that the webpage will press down the head area when scrolling down. Later, I found that adding a z-index=100 is enough. The literal understanding is to increase the element that appears in the z-axis direction. Importance, the larger the value, the easier it is above the z-axis
- When using the picture on the original website as the background picture, I found that the downloaded size is different from the size of the picture displayed on the original website. At this time, you need to manually modify the size. Later, I found out that you can use "background-size" to modify the background picture. size
- When multiple links are put together, we can do it through ul and li. Like Teacher Pink said, not only the structure is very clear, but also link stacking can be avoided.
- I understand it very well when listening to teacher pink, but it is very slow to write by myself. It seems that I will strengthen the practice in the future. I modified the next part of the original webpage. Sometimes it is fun to change other people's webpage
Code: (not following the code specification for the time being)
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;
}
Code screenshot:
Effect:
