《学成在线 》 网站制作源码及总结html+css
2024-04-17 01:35:05
界面：
整体布局思路：
先用一个大的盒子，我定义为total类，这个盒子可以装下页面所有盒子。然后根据标准流文档和浮动来布局。在此，要注意的是，中间php图片占用了整个父盒子的空间，所以再定义侧边栏的时候，侧边栏会掉在下边，此时我用的相对定位，使其保持在图片的侧边栏。后面以此类推，上下用标准流，左右用浮动。大盒子嵌套小盒子反复循环。
悬浮小点用的是a标签（其他标签也可以），然后hover属性改成椭圆即可。
注意
导航栏注意点：
实际开发中我们不会直接用链接a，而是用li包含链接a的做法。
（1）li+a语义更清晰，一看这就是有条理的内容
（2）如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。
1.盒子里面放图片：
.imgconter{width:229px;height: 271px;background-color: white;margin-left: 13.75px;float: left;}.imgconter img{height: 155px;width: 100%;}
<div class="imgconter"><a href=""><img src="学成在线图片/图层135.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div>
imgconter里面要放图片完全显示的话，需对图片的宽度设置为100%！
2.中间导航栏旁边的横线制作
<div class="cdzuo"><a href="">精品推荐</a><span>|</span><a href="">JQuery</a><span>|</span><a href="">Spark</a><span>|</span><a href="">MySQl</a><span>|</span><a href="">JavaWe</a><span>|</span><a href="">MySQl</a><span>|</span><a href="">数据库</a></div>
.centerdown{width: 1200px;height: 61px;background-color: #ffffff;margin: 0 100px;}.centerdown a{display: inline-block;height: 21px;color: black;padding:20px; line-height: 21px; }.centerdown span{color: #b0b0b0 ;}
源码html：
<!-- 1.典型的企业级网站2.目的是为了整体感知企业级网站布局流程，复习以前知识。--><!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><style>*{text-decoration: none;padding: 0;margin: 0;list-style: none;}a:visited{color: black;}body{background-color: #f3f5f7;}.total{width:1402px;/* background-color: skyblue; */margin: 0 auto;}.nav{width: 1200px;height: 102px;margin: 0 100px;background-color: #eef3f6;overflow: hidden;}.xuechenglogo{height: 52px;width: 202px;/* background-color:yellow ; */float: left;margin-top:29px ;}.xuechenglogo img{height: 52px;width: 202px;}.nav li{height: 52px;/* background-color: violet; */float: left;padding-left:25px;margin-top: 29px;line-height: 82px;font-size: 18px;}.nav li a:hover{color: red;}.nav .sousuo{height: 50px;width: 363px;float: left;margin-top: 29px;margin-left: 70px;border-color: #00a4ff;}.nav .tijiao{height: 54px;width: 54px;background-color: bisque;float: left;margin-top: 29px; }.touxiang{width: 61px;height: 61px;border-radius: 50%;float: left;background-color: black;margin-top: 25px; margin-left: 32px; /* background-size: 100% 100%; */}.touxiang:hover{box-shadow: 10px 10px 10px 0.5px rgba(0, 0, 0, .3) ;}.touxiang img{border-radius: 50%;}.nav p{width: 100px;height: 30px;/* background-color: blanchedalmond; */float: left;margin-top: 45px; margin-left: 20px; }.center{width: 100%;height: 420px;background-color: #033db2;margin-top: 12px;margin-bottom: 9px;}.img{display: inline-block;width: 1200px;height: 420px;margin: 0px 100px;/* background-color: bisque; */background-image: url("学成在线图片/banner2.png");}.cebian{width: 191px;height: 420px;/* position: relative;top: -424px;left: 0px; */}.cebian a{display: block;width: 100%;height: 46.7px;padding-left: 2em;background: rgba(0, 0, 0, .3);line-height: 46.7px;color: #ffffff; }.cebian a:hover{color: #00b4ff;}.youkebiao{height: 300px;width: 230px;background-color: white;float:right;position: relative;top: -400px;right: 0;}.youkebiao li{margin:0 auto;width: 200px;height: 60px;line-height: 30px;border-bottom: 1px solid #b7b7b7;}.youkebiao .kebiao1{background-color: #9bceea;color: white;width: 230px;font-weight: 700;font-size: 20px;text-align: center;line-height: 60px;}.youkebiao li p{font-size: 8px;color: #b7b7b7;}.youkebiao li button{height: 40px;width: 200px;background-color: white;border: 3px solid #22b0ff;margin-top: 3px;color:#22b0ff ;font-weight: 700;}.youkebiao li:hover{box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .3);}/* 浮点 */.fudian a{display: inline-block;width: 15px;height: 15px;background:rgba(0, 0, 0, .3);border-radius: 50%;position: relative;margin-left: 10px;left: 450px;top: -60px;}.fudian a:hover{width: 23px;height: 15px;}.centerdown{width: 1200px;height: 61px;background-color: #ffffff;margin: 0 100px;}.centerdown a{display: inline-block;height: 21px;color: black;padding:20px; line-height: 21px; }.centerdown span{color: #b0b0b0 ;}.centerdown .cdyou{height: 61px;width: 150px;font-size: 14px;float: right;text-align: center;}.centerdown a:hover{color: red;}.cdyou a{color: #00b4ff;;}h4{margin:35px 0px 20px 100px ;/* background-color: blue; */font-size: 22px;font-weight: 400;}.fa{width: 1200px;height: 271px;/* background-color: #f3f5f7; *//* background-color: rosybrown; */margin: 0 auto;}.fa1{width: 1200px;height: 271px;/* background-color: #f3f5f7; *//* background-color: blue; */margin: 20px auto;}.imgconter{width:229px;height: 271px;background-color: white;margin-left: 13.75px;float: left;}.imgconter:hover{box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, .3);}.imgconter img{height: 155px;width: 100%;}.imgconter p{width: 179px;height: 50px;background-color: white;margin: 10px auto;}.gaoji a{color: orange;font-size: 14px;padding-left: 25px;margin-right: 50px;}</style></head><body><div class="total"><div class="nav"><!-- logo --><span class="xuechenglogo"><img src="学成在线图片/学成在线.png" alt=""></span>
<!-- 导航 --><ul><li style=" margin-left: 67px;"> <a href="">首页</a></li><li><a href="">课程</a></li><li><a href="">职业规划</a></li> </ul><!-- 提交搜索 --><span><form action="#"><input class="sousuo" type="text" name="sousuo"><input class="tijiao" type="image" src="学成在线图片/fa-search.png" name="submit"></form></span><!-- 头像 --><span class="touxiang"><img src="学成在线图片/Snipaste_2021-04-04_11-21-43.png" alt=""> </span><p>QQ：刘崽儿</p></div><div class="center"><div class="img"><!-- <a href=""><img src="学成在线图片/banner2.png" alt=""></a> --><div class="cebian"><a href="">前端开发</a><a href="">后端开发</a><a href="">移动开发</a><a href="">人工智能</a><a href="">商业预测</a><a href="">云计算&大数据</a><a href="">运维&模式</a><a href="">UI设计</a><a href="">产品</a></div><div class="fudian"><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a></div><div class="youkebiao"><ul><li class="kebiao1">我 的 课 程 表</li><li><a href="">继续学习 程序语言设计<p>正在学习-使用对象</p></a></li><li><a href="">继续学习 程序语言设计<p>正在学习-使用对象</p></a></li><li><a href="">继续学习 程序语言设计<p>正在学习-使用对象</p></a></li><li style="border-bottom: none; box-shadow: none;"><button>全部课程</button></li></ul></div></div> </div><div class="centerdown"><div class="cdyou"><a href="">修改兴趣</a></div><div class="cdzuo"><a href="">精品推荐</a><span>|</span><a href="">JQuery</a><span>|</span><a href="">Spark</a><span>|</span><a href="">MySQl</a><span>|</span><a href="">JavaWe</a><span>|</span><a href="">MySQl</a><span>|</span><a href="">数据库</a></div></div><h4>精品推荐</h4><div class="fa"><div style="margin-left: 0;" class="imgconter"><a href="#"><img src="学成在线图片/图层133.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span><!-- <span ><li style=" list-style: square;">1125人在学习</li></span> --></div><div class="imgconter"><a href=""><img src="学成在线图片/图层135.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div><div class="imgconter"><a href=""><img src="学成在线图片/图层136.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div><div class="imgconter"><a href=""><img src="学成在线图片/图层133.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div><div class="imgconter"><a href=""><img src="学成在线图片/图层137.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div></div><div class="fa1"><div style="margin-left: 0;" class="imgconter"><a href="#"><img src="学成在线图片/图层133.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span><!-- <span ><li style=" list-style: square;">1125人在学习</li></span> --></div><div class="imgconter"><a href=""><img src="学成在线图片/图层135.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div><div class="imgconter"><a href=""><img src="学成在线图片/图层136.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div><div class="imgconter"><a href=""><img src="学成在线图片/图层133.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div><div class="imgconter"><a href=""><img src="学成在线图片/图层137.png" alt=""></a><p>Think PHP 5.0博客系统实战项目演练</p><span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span></div></div></div></body></html>
《学成在线 》 网站制作源码及总结html+css相关推荐
- web前端开发 学成在线首页案例+源码
首页index.html 代码 <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
- 黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- 【前端初级项目】学成在线网站首页，HTML+CSS，附PSD设计稿！！
技术栈及工具 HTML CSS 切图/测量工具:Photoshop 编辑器:VSCode 效果预览 学成在线网站首页,只有一张首页,适合刚学HTML,CSS的同学练手,虽然只有一张静态页面,但是总体上 ...
- web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录 传统网页布局的三种方式 标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性 浮动元素会脱离标准流,可以与普通流的元素相重叠 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
- html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图 前期准备素材 一.项目页面PSD源文件 二.前期准备工作 三.CSS属性书写顺序 四.布局分析 五.布局流程 开始页面制作 头部 ...
- 学成在线网站知识分享
学成在线网站知识分享 学成在线网站是一个比较基础的网页布局,让刚刚学习前端的人通过使用工具测量大小,裁剪图片,使用盒子定位布局,利用浮动放置浮动盒子等各种知识点都会使用到.各大教学网站也会使用这个案例 ...
- HTML5期末大作业：校园篮球网页网站设计源码(5页) HTML+CSS+JavaScript 大学生体育运动网页设计模板代码 校园篮球网页作业成品 学校篮球网页制作模板 学生简单体育运动网站设计成品
HTML5期末大作业:校园篮球网页网站设计源码(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计作业题材 ...
- ccss案例：学成在线网站，浮动和定位的运用
效果图 . . . . css * {margin: 0;padding: 0; } li {list-style: none; } a {text-decoration: none; } .w {w ...
- 学成在线网页制作（详细）
项目分析 如图: 分为四个模块: header头部模块 精品推荐模块 编程入门模块 数据分析师模块 机器学习模块 前端工程师开发模块 footer模块 如果仔细观察的话,第2,5,6属于一个模块,样式 ...
最新文章
- java中获取特定时间段_获取某一时间段特定星期几的所有日期(Java实现)
- align=absmiddle 是什么意思
- 面试题 02.01. 移除重复节点
- Django Step by Step中文版，推荐一下
- python 代码排布_python实现经典排序算法的示例代码
- scaling之旅_机器学习算法之旅 - lwaif的个人空间 - OSCHINA - 中文开源技术交流社区...
- testng查看覆盖率_使用Cobertura统计单元测试覆盖率
- RAC 安装完成后 节点间通信不依赖于SSH
- RocketMQ源码解析-PushConsumer(1)
- 谷歌不是 Web 界的上帝！
- SQL语句详解（二）——select基本查询操作
- poj1942——组合数学
- 太强了，头发丝完整保留！一个开源的 Python 实时视频抠图工具
- Ubuntu录屏及gif制作
- 简单的木马编写之服务端篇
- deepfool简单实现
- 微信小程序-多层饼图/包含关系饼图/自定义饼图关系模式
- android中使用饼形图
- 远程链接linux桌面的软件,远程linux桌面软件
- [韩国KBS][伟大的遗产]
热门文章
- nohost.php,NOCOSTWebHost ：1G可绑米免费PHP空间
- 模型描边（一）—— three.js后期处理实现
- 小米开源监控系统监控mysql_小米开源监控 Open-Falcon 3.0 部署
- JAVA 黑马学习笔记记录 for switch while do...while
- 华为matebooke不能下python_华为matebook无法打开网页,怎么处理?
- The meaning of path integral formulation
- ijk播放器缓冲机制
- 网鼎杯2022青龙组
- Flutter 生成 Icon 提示徽标 Widget
- 一款基于Flutter开发的语雀APP