【前端】学成在线网页项目练习制作
2024-05-08 23:48:56
目录
html代码
css代码
Hello我是Leo，最近开始学习前端，学习的差不多了开始做简单的项目。
这是我学习前端路上的一个练习，跟着billbill黑马程序员pink老师做的,语法有不规范的地方，还请指点。
在学习制作过程中巩固之前学习的知识点，多做几个项目就会把html标签、css运用做到熟练。
html代码
收获：
1.链接要写在列表里;
2.选择器权重计算;
3.盒子模型的运用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="index.css">
</head>
<body class="hd">
<!--头部区域-->
<div class="header"><!--logo模块--><div class="logo"><img src="data:images/logo.png" height="42" width="195"/></div><!--列表模块--><div class="nva"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul><!--搜索模块--></div><div class="search"><input type="text" value="请输入关键词"><button><img src="data:images/btn.png" height="42" width="50"/></button></div><!--用户模块--><div class="user"><img src="data:images/自拍.png" height="50" width="50"/>Fan</div>
</div>
<!--导航栏-->
<div class="banner"><div class="abc w"><div class="subnav"><ul><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li></ul></div><div class="course"><h2>我的课程表</h2><div class="bp"><ul><li><h4>继续学习，程序设计语言</h4><p>正在学习-使用对象</p></li><li><h4>继续学习，程序设计语言</h4><p>正在学习-使用对象</p></li><li class="aaa"><h4>继续学习，程序设计语言</h4><p>正在学习-使用对象</p></li></ul><a href="#" class="hhh">全部课程</a></div></div></div>
</div>
<!--精品推荐-->
<div class="goods"><h3 class="sss">精品推荐</h3><ul><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li></ul><a href="#" class="lll">修改兴趣</a>
</div>
<!--box部分-->
<div class="box"><div class="box-bb"><h4 class="ddd">精品推荐</h4><a href="">检查全部</a></div><div class="box-bp"><div><ul class="clearfix"><li><img src="data:images/course01.png" height="155" width="233" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course02.png" height="155" width="228" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course03.png" height="155" width="228" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course01.png" height="155" width="233" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course04.png" height="155" width="228" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course05.png" height="154" width="227" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course06.png" height="154" width="228" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course07.png" height="155" width="228" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course08.png" height="155" width="228" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li><li><img src="data:images/course01.png" height="155" width="233" alt=""/><h4>樊欣恒亲情为你讲述他的故事</h4><div class="info"><span>高级</span> * 1125人正在观看</div></li></ul></div></div>
<!--footer模块-->
<div class="footer"><div class="boot"><img src="./images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#">下载APP</a></div><div class="put"><dl><dt>关于我们</dt><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd></dl><dl><dt>新手指南</dt><dd><a href="#">如何注册</a></dd><dd><a href="#">学分制度</a></dd></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作机构</a></dd><dd><a href="#">合作导师</a></dd></dl></div>
</div>
</div>
</body>
</html>css代码
收获：
1.消除浮动；
2.内外边距的设；
3.文字的排版。
*{margin: 0;padding: 0;
}
.li{list-style: none;
}
a{text-decoration: none;
}
.clearf:before,.clearfix:after{content:"";display: table;
}
.clearfix:after{clear: both;
}
.clearfix{*zoom:1;
}
.header{width: 1200px;/*外边距设置自动*/margin: 30px auto;height: 42px;
}
.logo{float: left;height: 42px;width: 198px;
}
.nva{float: left;margin-left: 60px;
}
.nva ul li {display: block;float: left;
}
.nva ul li a {display: block;height: 42px;color: #050505;padding: 0 10px;text-decoration: none;line-height: 42px;font-size: 18px;
}
.nva ul li a:hover {border-bottom: 2px solid #0063ff;color:#0063ff ;}
.search{float: left;width: 412px;height: 42px;background-color: #0063ff;margin-left:70px;
}
.search input{float: left;width: 345px;height:40px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
button{height: 42px;width: 50px;float:right;/*按钮默认有个边框，要去掉。*/border:0;
}
.user{float:right;margin-right: 30px;
}
.banner{height: 420px;background-color: #1c0b6a;
}
.w{width:1200px ;margin: auto;height: 420px;}
.banner .abc{background: url(images/banner2.png) no-repeat top center;
}
.subnav{width: 190px;height: 420px;background: rgba(0,0,0,0.3);float: left;
}
.subnav ul li a{font-size: 14px;color: white;text-decoration: none;
}.subnav ul li{height: 45px;line-height: 45px;padding: 0 20px;display: block;
}
.subnav ul li span{float: right;
}
.subnav ul li a:hover{color: #0063ff;
}
.course{width:230px;height: 300px;background-color: white;float: right;margin-top: 50px;
}
.course h2{height: 48px;background-color: #00a4ff;text-align: center;line-height: 48px;font-size:18px;color: #fff;
}.bp ul li {display: block;margin-left: 20px;padding: 14px 0;border-bottom: 1px solid #bfbfbf;
}
.bp ul .aaa{border-bottom: none;
}
.bp ul li h4{color: #4e4e4e;font-size: 16px;
}
.bp ul li p{color: #a5a5a5;font-size: 12px;
}
.bp .hhh {margin: 0px 14px;display: block;text-align: center;line-height: 38px;height: 38px;border: 5px solid #00a4ff;color:#00a4ff ;/*设置文本粗细*/font-weight: 700;text-decoration: none;}
.bp .hhh:active{background-color: #fff14b;color: white;
}
/*精品推荐*/
.goods{width:1200px ;margin: 10px auto auto;height: 60px;background-color: white;box-shadow: 0 2px 2px 3px rgba(0,0,0,0.2);
}
.goods .sss{float: left;font-size: 16px;color: #00a4ff;text-align: center;padding-left: 30px;padding-top: 18px;
}
.goods ul li{text-align: center;line-height: 55px;float: left;display: block;padding: 5px 10px 0;}
.goods ul li a:active{color: #00a4ff;
}
.goods ul li a {padding: 0 30px;font-size: 16px;text-decoration: none;color: #050505;border-right: 1px solid #bfbfbf;
}
.goods .lll{float: right;text-decoration: none;margin-right: 60px;margin-top: 16px;font-size: 20px;color: #050505;
}
.goods .lll:active{background-color: #a5a5a5;
}
.box{width:1220px ;margin: 20px auto auto;
}
.box .box-bb{height: 45px;
}
.box .box-bb .ddd{float: left;font-size: 20px;font-weight: 800;
}
.box .box-bb a{float: right;text-decoration: none;color: #bfbfbf;font-size: 12px;
}
.box.box-bp{float: left;width: 1300px;
}
.box .box-bp ul li{display: block;float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 16px;margin-bottom: 15px;box-shadow: 2px 1px 1px #bfbfbf;
}
.box .box-bp ul li:active{box-shadow: 4px 3px 2px #bfbfbf;
}
.box .box-bp ul li img{width: 100%;
}
.box .box-bp ul li h4{margin: 20px 20px 20px 25px;font-size:14px;color: #050505;font-weight: 700;
}
.box .box-bp .info{margin: 0 20px 0 25px;font-size: 14px;color: #999999;
}
.box .box-bp .info span{color: coral;
}
.footer{margin-top: 40px;padding-top: 30px;height: 417px;background-color: #fff;
}
.footer .boot{float: left;
}
.footer .boot p{margin: 20px 0 10px;font-size: 12px;color: #666;
}
.footer .boot a{display: inline-block;width: 120px;height: 36px;border: 1px solid #00a4ff;text-align: center;line-height: 36px;font-size: 16px;color: #00a4ff;
}
.footer .put dl{float: right;margin-left: 120px;
}
.footer .put dl dd a{font-size: 12px;color: #050505;
}谢谢大家的浏览，以上就是我的一个分享。
【前端】学成在线网页项目练习制作相关推荐
- 学成在线网页制作（详细）
项目分析 如图: 分为四个模块: header头部模块 精品推荐模块 编程入门模块 数据分析师模块 机器学习模块 前端工程师开发模块 footer模块 如果仔细观察的话,第2,5,6属于一个模块,样式 ...
- html+css制作学成在线网页
[解决chrome不能上网问题] 参考:http://www.win7zhijia.cn/jiaocheng/win7_40373.html 360断网急救箱解决 [解决vscode扩展商店连接不上的 ...
- 学成在线--0.项目概述
文章目录 0.前言 1.功能架构 2.技术架构 3.技术栈 4.开发步骤 0.前言 当前市场的在线教育模式多种多样,包括:B2C.C2C.B2B2C等业务模式,学成在线采用B2B2C业务模式,即向 企 ...
- 前端-学成在线网站首页
其中,许多图片需要使用PS软件来切图出来,借助网上的psd文件 <!DOCTYPE html> <html lang="en"><head>&l ...
- 跟着Pink老师学前端——学成在线
最近跟着pink老师学习html+css,做了一个学成在线页面,后边根据老师的框架更改了一些图片 代码部分: <!DOCTYPE html> <html lang="en ...
- 11.3学成在线网页制作
1.在制作前先对结构进行分析,如用到了那些盒子,盒子的多少. 2.对盒子进行外边距添加时有可能会使盒子整体下移动,所以综上最好用padding 对盒子内容进行调整,不会出现外边距相加. 3.什么时候用 ...
- 2023年最新黑马程序员Java微服务项目--学成在线
正式上线Java微服务项目<学成在线> 项目对程序员的重要性 不用播妞多说了吧 更重要的是 这次是完整!实战!企业级!项目! 划重点:全新发布!正式上线! <学成在线>项目以在 ...
- 网页制作流程--（项目案例）学成在线
一.根目录 目标:能根据项目需求创建根目录 根目录:网站的第一级文件夹 1.图片文件夹:images 2.样式文件夹 3.首页:index.html 二.布局流程 目标: 掌握网页布局基本步骤 从外到 ...
- 前端网页项目-学成在线案例
典型的企业级网站 目的是为了整体感知企业级网站布局流程,复习以前知识 准备素材和工具: 学成在线PSD源文件 开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(测试) ...
最新文章
- Oracle 10g安装64位图解流程
- 架构师之路 — 部署架构 — 超大规模负载均衡架构演进
- 不是python中用于开发用户界面的第三方库-20个必不可少的Python库也是基本的第三方库...
- 在局域网访问_局域网访问共享文件需要密码怎么办？取消访问密码的方法
- 洛谷P3371-【模板】单源最短路【SPFA】
- 白--留白与游戏设计
- Redis Info 命令
- 没有tpm不能装win11的解决方法
- dojo动态创建widget
- laravel--模型中各种属性详解
- Java反编译工具JAD安装与基本使用
- 像素测量工具_PicPick v5.0.6 屏幕截图工具
- 【平面设计基础】11：配色——配色原理
- 7段数码管驱动电路设计
- win的反义词_趣味记忆—小学英语必须掌握的120组反义词
- 一意孤行亚马逊----一个钓鱼疯子的巴西亚马逊之行( 3.九月19日 玛瑙斯城印象) 作者：咸水鱼...
- 群辉 Docker-x64-17.05.0-0400.spk，用来群晖洗白，安装ddsm使用
- Web前端：HTML+CSS+JS实现美女照片3D立方体旋转
- AE PR模板基本图形预设素材包动态字幕文字标题排版动画预设效果
- java包图标变白纸怎么解决_桌面图标变成一张白纸怎么办？