网页学习，尝试编写大鹏教育官网首页

最近在学习HTML和CSS，听的是pink老师的课，今天便尝试自己写出大鹏教育官网的首页。

如图是大鹏教育官网首页：

网址：https://www.dapengjiaoyu.cn/

先说一下写的过程遇到的一些问题吧。

在量图片的尺寸时，我一开始用的是qq的截图工具，但是发现比如我明明量得的是100px，但是写代码时100px显示的效果比原图大很多，我以为是qq截图工具的问题，可换用ps之后依然没用。后来查询资料，发现浏览器和系统有缩放功能，让浏览器和系统的显示比例是100%即可
在写网页头部的固定定位时，发现网页往下滚动时会压住头部区域，后来发现加个z-index=100即可,字面意思上理解就是调大该元素在z轴方向出现的重要性，数值越大越容易在z轴上方
在用原网站上的图片作为背景图片时，发现下载的大小和图片在原网站上显示的大小不一样，这时候需要自己手动修改大小，后来查到可以用“background-size” 来修改背景图片的大小
多个链接放在一起时，我们可以通过ul和li来做，像pink老师说的那样，不就结构很清晰，也可以避免链接堆砌
听pink老师讲时很懂，但自己动手起来就写很慢，看来今后加强练习，原网页后下部分我改了下，有时候改别人网页还是蛮好玩的

代码：（暂时没有遵循代码规范）

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;
}

代码截图：

效果：

网页学习，尝试编写大鹏教育官网首页相关推荐

python在线学习直播-马哥教育官网-专业Linux培训班,Python培训机构
一直以来,IT行业的高薪吸引了大量的人员进入--2017年,国家统计局发布的薪酬水平统计中,IT首次超过金融,成为平均薪资最高的行业. IT行业的高薪不是凭空而来,单单是入行门槛就拦住了一大批人.在这 ...
什么是python-马哥教育官网-专业Linux培训班,Python培训机构
今天小编要跟大家分享的文章是Python中的列表是什么?熟悉Python的小伙伴们都知道列表的定义比较简单,它由一系列按特定顺序排列的元素组成. 你可以创建包含字母表中所有字母.数字0~9或所有家庭成 ...
自动化专业学python有用吗-马哥教育官网-专业Linux培训班,Python培训机构
今天小编要来说一下Python自动化的学习思路, 对于刚刚进入的测试行业的人来说,未来该怎么样朝着自动化方向发展,即使接触到了自动化测试,又该从何下手去学呢? 简单的说, 做测试做的好,会了接口,会了 ...
python是什么-马哥教育官网-专业Linux培训班,Python培训机构
今天小编要跟大家分享的文章是Python中的列表是什么?熟悉Python的小伙伴们都知道列表的定义比较简单,它由一系列按特定顺序排列的元素组成. 你可以创建包含字母表中所有字母.数字0~9或所有家庭成 ...
python训练营免费领取-马哥教育官网-专业Linux培训班,Python培训机构
[课程第一天] [课程第二天] [课程第三天] [课程第四天] [课程第五天] [课程第六天] [课程第七天] 三.学习的具体平台和方式 1.学习的平台以录播视频和文字版本为主,QQ社群资深工程师答 ...
python类型转换-马哥教育官网-专业Linux培训班,Python培训机构
今天马哥教育要跟大家分享的文章是类型转换是什么?我们要跟大家探讨的是Python课程中类型转换的相关内容,比如将小数转化为小数如何表达?整数转化为字符如何表达? Python的几种最基本的数据类型,我 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) 文章目录 HTML5期末大作业:网页设计--小米商城官网首页(1页) 一.作品展示二.文件目录三.代码实现四.完整源码一.作品展示 ...

网页学习，尝试编写大鹏教育官网首页

最近在学习HTML和CSS，听的是pink老师的课，今天便尝试自己写出大鹏教育官网的首页。

网页学习，尝试编写大鹏教育官网首页相关推荐

最新文章

热门文章