devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）_学成在线网页代码

作者：我家小花儿 | 2024-02-29 17:33:59

赞

踩

学成在线网页代码

目录

1. 案例准备工作

1.1 准备素材和工具

1.2 vscode案例准备

2. 页面布局整体思路

3. 正式制作网页

3.1 确定版心

3.2 确定行，按顺序写列

3.2.1 页面头部制作

3.2.2 banner模块制作

3.2.3 精品推荐模块

3.2.4 精品推荐模块

3.2.5 footer尾部模块

4. 参考

4.1 HTML代码

4.2 css代码

4.3 效果图

1. 案例准备工作

1.1 准备素材和工具

（素材在最后有链接哦~）

  1. 学成在线PSD源  文件
  2. 开发工具：Photoshop（切图）/cutterman插件+vscode（写代码）+chrome（测试）

1.2 vscode案例准备

  1. 创建目录LearnOnline文件夹，存放页面的相关材料。
  2. 用vscode打开文件夹。
  3. 在LearnOnline文件夹里新建images文件夹来保存图片。
  4. 新建首页文件index.html（首页网站统一命令index.html）。
  5. 新建style.css样式（外链接样式表）文件。
  6. css样式表引入html文件
  7. style.css样式表写入清除默认的内外边距的样式（* {margin: 0;padding0;}），检测样式表是否引入成功。

 

2. 页面布局整体思路

测量确定页面的版心（可视部分）。

根据页面布局第一准则，分析页面行（标准流）和列（浮动）模块。

根据页面布局第二准则，先确定列的大小，后确定列的位置。

制做html结构。遵循先有结构，后有样式原则，结构是永远最重要的

总结：先要清除结构布局，后写代码，平时要多写多积累才行哦！

注意：建议要规范书写css属性规范，这是我们专业性的体现噢。需要的小伙伴可以在上一篇文章查阅哦~

3. 正式制作网页

3.1 确定版心

我们用PS测量页面版心是1200px，并水平居中，然后写入css文件。

  1. .w {
  2.     width: 1200px;
  3.     height: auto;
  4. }

3.2 确定行，按顺序写列

3.2.1 页面头部制作

  1.  1号版心盒子header1200*42，水平居中，给定上下margin值
  2. header盒子包括2号logo盒子、3号nav导航栏、4号search搜索栏和5号user个人信息
  3. 注意：要求4号盒子是浮动的。
  • 1号header盒子设置大小1200*42，水平居中
  • 2号logo盒子设置大小，然后再放进一个div盒子里，左浮动
  • 3号nav导航栏盒子，左浮动，里面放无序列表ul和li，li里面放a链接标签
  • 4号search搜索栏盒子左浮动，水平居中，包含2个form表单（input和button）
  • 5号user盒子右浮动，居中对齐，分为头像和用户名两部分
  • 最后设置3号a的hover属性，让鼠标经过时出现图示的效果。
  • 注意点：
  1. 实际的开发中，不会直接用链接a而且是用li包含链接（li+a）的做法。
  2.  一个盒子浮动，其他盒子都要浮动（一浮全浮）。
  3. 因为li是块级元素，需要一行显示，所以li要加浮动。
  4. 导航栏是不用给宽度的，为以后可以添加其余的文字
  5. 导航栏的文字长度不一样，最好不要给a设置宽度，给a设置padding值就好啦

  6. button按钮默认有个边框，需要去除边框，border: 0;

  7. input和button两个行内块元素之间有缝隙，这里我们用浮动去除缝隙。

3.2.2 banner模块制作

  • 1号banner大盒子不设宽度，设背景色、居中对齐
  • 2号版心盒子水平居中，设背景图（盒子有宽度时设置水平居中：margin {0 auto;}）
  • 3号subnav侧导航栏左浮动，设背景，包含ul无序列表，subnav设左对齐
  • 4号course盒子包含theme盒子、无序列表ul、a标签，右浮动
  • 最后使用hover伪元素，让鼠标经过时字体变色
  • 注意：
  1. 设置边距时，使用padding后一定要将weight/height减去padding值，这样才不会撑大盒子；使用margin不会影响盒子大小
  2. 不用给span设置颜色，他会继承a里面的颜色，如果设置了颜色，hover里面就不会变色了
  3. 浮动的盒子不会有外边距合并的问题
  4. a是行内元素无法改变大小，需要用display改为块级元素改变大小

3.2.3 精品推荐模块

  • 1号goods精品大盒子居中对齐，注意还有个阴影
  • 2号标题H3盒子设置左浮动、居中对齐
  • 2号盒子放a链接，设左浮动、无序列表<ul><li>里面放a标签）
  • 4号盒子放a链接，设右浮动

3.2.4 精品推荐模块

  • 1号box大盒子居中对齐
  • 2号box-hd盒子设左浮动，它包含p标签和a标签
  • 2号box-bd盒子设置左浮动，它包含ul和10个li标签，li标签里面放a标签、h标签、span标签、div标签，a标签放img标签
  • 最后还要给li加hover伪元素，达到鼠标经过出现阴影的效果

注意：当一行装不下元素时，把父级元素修改为合适的宽度即可（例如：3号盒子li）

           在做这个板块时需要清除浮动，这样后面可以放下更多的盒子。

3.2.5 footer尾部模块

  • 1号footer盒子设置高度宽度、背景色（白色）
  • 2号w版心盒子模块居中对齐
  • 3号copyright版权盒子，左浮动
  • 4号links链接盒子，右浮动

4. 参考

4.1 HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>学成在线网页首页</title>
  9.     <!-- 引入css文件 -->
  10.     <link rel="stylesheet" href="style.css">
  11. </head>
  12.  
  13. <body>
  14.     <!-- 一、网页头部 -->
  15.     <div class="header w">
  16.         <!-- 网页logo -->
  17.         <div class="logo"><img src="images/logo.png"></div>
  18.         <!-- 导航栏 -->
  19.         <div class="nav">
  20.             <ul>
  21.                 <li><a href="#">首页</a></li>
  22.                 <li><a href="#">课程</a></li>
  23.                 <li><a href="#">职业规划</a></li>
  24.             </ul>
  25.         </div>
  26.         <!-- 搜索栏 -->
  27.         <div class="search">
  28.             <form action="#">
  29.                 <input type="text" value="请输入关键字">
  30.                 <button></button>
  31.             </form>
  32.         </div>
  33.         <!-- user登录注册区 -->
  34.         <div class="user">
  35.             <img src="images/user.png">
  36.             qq-leishui
  37.         </div>
  38.  
  39.     </div>
  40.     <!-- 二、网页banner模块 -->
  41.     <div class="banner">
  42.         <!-- 版心 -->
  43.         <div class="w">
  44.             <!-- 侧导航栏 -->
  45.             <div class="subnav">
  46.                 <ul>
  47.                     <li><a href="#">前端开发<span>&gt</span></a></li>
  48.                     <li><a href="#">后端开发<span>&gt</span></a></li>
  49.                     <li><a href="#">移动开发<span>&gt</span></a></li>
  50.                     <li><a href="#">人工智能<span>&gt</span></a></li>
  51.                     <li><a href="#">商业预测<span>&gt</span></a></li>
  52.                     <li><a href="#">云计算&大数据<span>&gt</span></a></li>
  53.                     <li><a href="#">云计算&<span>&gt</span></a></li>
  54.                     <li><a href="#">ul设计<span>&gt</span></a></li>
  55.                     <li><a href="#">产品<span>&gt</span></a></li>
  56.                 </ul>
  57.             </div>
  58.             <!-- course区域 -->
  59.             <div class="course">
  60.                 <div class="theme">我的课程表</div>
  61.                 <ul>
  62.                     <li> 继续学习&nbsp;<span>程序语言设计</span>
  63.                         <div>正在学习-使用对象</div>
  64.                     </li>
  65.                     <li> 继续学习&nbsp;<span>程序语言设计</span>
  66.                         <div>正在学习-使用对象</div>
  67.                     </li>
  68.                     <li> 继续学习&nbsp;<span>程序语言设计</span>
  69.                         <div>正在学习-使用对象</div>
  70.                     </li>
  71.                 </ul>
  72.                 <a href="#">全部课程</a>
  73.             </div>
  74.         </div>
  75.     </div>
  76.     <!-- 三、精品推荐模块 -->
  77.     <div class="goods w">
  78.         <h3>精品推荐</h3>
  79.         <div class="list">
  80.             <ul>
  81.                 <li><a href="#">JQuery</a></li>
  82.                 <li><a href="#">Spark</a></li>
  83.                 <li><a href="#">MySQL</a></li>
  84.                 <li><a href="#">JavaWeb</a></li>
  85.                 <li><a href="#">MySQL</a></li>
  86.                 <li><a href="#">JavaWeb</a></li>
  87.             </ul>
  88.         </div>
  89.         <span> <a href="#" class="mod">修改兴趣</a></span>
  90.     </div>
  91.     <!-- 四、精品推荐模块 -->
  92.     <div class="box w">
  93.         <div class="box-hd">
  94.             <p>精品推荐</p>
  95.             <a href="#">查看全部</a>
  96.         </div>
  97.         <div class="box-bd">
  98.             <ul class="clearfix">
  99.                 <li>
  100.                     <a href="#"><img src="images/good1.png"></a>
  101.                     <a href="#" class="h">Think PHP 5.0 博客系统实战项目演练</a>
  102.                     <span class="orange">高级</span>
  103.                     <div>• 1125人在学习</div>
  104.                 </li>
  105.                 <li>
  106.                     <a href="#"><img src="images/good2.png"></a>
  107.                     <a href="#" class="h">Android 网络图片加载框架详解</a>
  108.                     <span class="orange">高级</span>
  109.                     <div>• 1125人在学习</div>
  110.                 </li>
  111.                 <li>
  112.                     <a href="#"><img src="images/good3.png"></a>
  113.                     <a href="#" class="h">Angular 2 最新框架+主流技术+项目实战</a>
  114.                     <span class="orange">高级</span>
  115.                     <div>• 1125人在学习</div>
  116.                 </li>
  117.                 <li>
  118.                     <a href="#"><img src="images/good5.png"></a>
  119.                     <a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a>
  120.                     <span class="orange">高级</span>
  121.                     <div>• 1125人在学习</div>
  122.                 </li>
  123.                 <li>
  124.                     <a href="#"><img src="images/good5.png"></a>
  125.                     <a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a>
  126.                     <span class="orange">高级</span>
  127.                     <div>• 1125人在学习</div>
  128.                 </li>
  129.                 <li>
  130.                     <a href="#"><img src="images/good1.png"></a>
  131.                     <a href="#" class="h">Think PHP 5.0 博客系统实战项目演练</a>
  132.                     <span class="orange">高级</span>
  133.                     <div>• 1125人在学习</div>
  134.                 </li>
  135.                 <li>
  136.                     <a href="#"><img src="images/good2.png"></a>
  137.                     <a href="#" class="h">Android 网络图片加载框架详解</a>
  138.                     <span class="orange">高级</span>
  139.                     <div>• 1125人在学习</div>
  140.                 </li>
  141.                 <li>
  142.                     <a href="#"><img src="images/good3.png"></a>
  143.                     <a href="#" class="h">Angular 2 最新框架+主流技术+项目实战</a>
  144.                     <span class="orange">高级</span>
  145.                     <div>• 1125人在学习</div>
  146.                 </li>
  147.                 <li>
  148.                     <a href="#"><img src="images/good5.png"></a>
  149.                     <a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a>
  150.                     <span class="orange">高级</span>
  151.                     <div>• 1125人在学习</div>
  152.                 </li>
  153.                 <li>
  154.                     <a href="#"><img src="images/good5.png"></a>
  155.                     <a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a>
  156.                     <span class="orange">高级</span>
  157.                     <div>• 1125人在学习</div>
  158.                 </li>
  159.  
  160.  
  161.             </ul>
  162.         </div>
  163.     </div>
  164.     <!-- 五、footer模块 -->
  165.     <div class="footer">
  166.         <div class="w">
  167.             <div class="copyright">
  168.                 <img src="images/logo.png">
  169.                 <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
  170.                     © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
  171.                 </p>
  172.                 <a href="#"><button>下载APP</button></a>
  173.             </div>
  174.             <div class="links">
  175.                 <dl>
  176.                     <dt>
  177.                         关于新成网
  178.                     <dd><a href="#">关于</a></dd>
  179.                     <dd><a href="#">管理团队</a></dd>
  180.                     <dd><a href="#">工作机会</a></dd>
  181.                     <dd><a href="#">客户服务</a></dd>
  182.                     <dd><a href="#">帮助</a></dd>
  183.                     </dt>
  184.                 </dl>
  185.                 <dl>
  186.                     <dt>
  187.                         新手指南
  188.                     <dd><a href="#">如何注册</a></dd>
  189.                     <dd><a href="#">如何选课</a></dd>
  190.                     <dd><a href="#">如何拿到毕业证</a></dd>
  191.                     <dd><a href="#">学分是什么</a></dd>
  192.                     <dd><a href="#">考试为通过怎么办</a></dd>
  193.                     </dt>
  194.                 </dl>
  195.                 <dl>
  196.                     <dt>
  197.                         合作伙伴
  198.                     <dd><a href="#">合作机构</a></dd>
  199.                     <dd><a href="#">合作导师</a></dd>
  200.                     </dt>
  201.                 </dl>
  202.             </div>
  203.         </div>
  204.     </div>
  205. </body>
  206.  
  207. </html>

4.2 css代码

  1. *{
  2.     padding: 0px;
  3.     margin: 0px;
  4. }
  5. body {
  6.     background-color: #f3f5f7;
  7. }
  8.  
  9. .w {
  10.     width: 1200px;
  11.     height: auto;
  12. }
  13.  
  14. li {
  15.     list-style: none;
  16. }
  17.  
  18. a {
  19.     text-decoration: none;
  20. }
  21. /* 清除浮动，可以放更多的盒子 */
  22. .claearfix:before,.claearfix:after {
  23.  
  24.     content: "";
  25.     display: table;
  26.  
  27. }
  28.  
  29. .claearfix:after {
  30.  
  31. clear: both;
  32.  
  33. }
  34.  
  35. .clearfix {
  36.  
  37. *zoom: 1;
  38. }
  39.  
  40. /* 一、header头部样式 */
  41. .header {
  42.     height: 42px;
  43.     margin: 30px auto;
  44.     /* 注意这里的margin会层叠.w里面的margin */
  45. }
  46.  
  47. .logo {
  48.     float: left;
  49.     width: 198px;
  50.     height: 42px;
  51.     margin-right: 70px;
  52. }
  53.  
  54. .nav {
  55.     float: left;
  56.     height: 42px;
  57. }
  58.  
  59. .nav ul li {
  60.     float: left;
  61.     margin: 0px 10px;
  62. }
  63.  
  64. .nav ul li a {
  65.    display: block;
  66.    height: 42px;
  67.    padding: 0 10px;
  68.    line-height: 42px;
  69.    font-size: 18px;
  70. }
  71.  
  72. .nav ul li a:hover {
  73.     border-bottom: 2px  solid #00a4ff;
  74.     color: #00a4ff;
  75. }
  76.  
  77. .search {
  78.     float: left;
  79.     width: 412px;
  80.     height: 42px;
  81.     margin-left: 50px;
  82. }
  83. .search input {
  84.     float: left;
  85.     width: 345px;
  86.     height: 40px;
  87.     line-height: 42px;
  88.     border: 1px solid #00a4ff;
  89.     background: #f3f5f7;
  90.     border-right: 0px;
  91.     color: #bfbfbf;
  92.     font-size: 14px;
  93.     padding-left: 15px;
  94. }
  95. .search button {
  96.     float: left;
  97.     width: 50px;
  98.     height: 42px;
  99.     /* 去除按钮默认边框 */
  100.     border: 0;
  101.     background: url(images/btn.png);
  102. }
  103. .user {
  104.     float: right;
  105.     line-height: 42px;
  106.     margin-right: 30px;
  107.     font-size: 14px;
  108.     color: #666666;
  109. }
  110.  
  111. /*二、banner区域样式  */
  112. .banner {
  113.     height: 420px;
  114.     background-color: #1c036c;
  115. }
  116. .banner .w {
  117.     height: 420px;
  118.     margin: 0 auto;
  119.     background: url(images/banner.png);
  120. }
  121. .subnav {
  122.     float: left;
  123.     background: url(images/sub.png);
  124.  
  125. }
  126. .subnav ul {
  127.     height: 400px;
  128. }
  129. .subnav ul li {
  130.     width: 150px;
  131.     height: 42px;
  132.     padding:0px 20px;
  133.     line-height: 42px;
  134. }
  135. .subnav ul li a{
  136.     font-size: 14px;
  137.     color: #ffffff;
  138. }
  139. .subnav ul li a span {
  140.     float: right;
  141. }
  142.  
  143. .subnav ul li a:hover { 
  144.     color: #00b4ff;
  145. }
  146.  
  147. .course {
  148.     float: right;
  149.     width: 230px;
  150.     height: 300px;
  151.     background-color: #fff;
  152.     margin-top: 50px;
  153. }
  154. .course .theme { 
  155.     width: 230px;
  156.     height: 48px;
  157.     background-color: #9bceea;
  158.     font-size: 18px;
  159.     font-weight: 700;
  160.     line-height: 48px;
  161.     text-align: center;
  162.     color: #ffffff;
  163. }
  164. .course ul {
  165.     width: 190px;
  166.     height: 183px;
  167.     padding : 10px 20px 0px 20px;
  168. }
  169. .course ul li {
  170.     height: 50px;
  171.     font-size: 16px;
  172.     color: #5a5a5a;
  173.     border-bottom: 1px solid #a5a5a5;
  174.     padding-top: 10px;
  175.     
  176. }
  177. .course ul li span {
  178.     font-size: 14px;
  179.     color: #4e4e4e;
  180.     
  181. }
  182. .course ul li div { 
  183.     font-size: 12px;
  184.     color: #a5a5a5;
  185.     
  186. }
  187. .course a {
  188.     display: inline-block;
  189.     height: 38px;
  190.     width: 200px;
  191.     border: 1px solid #00b4ff;
  192.     line-height: 38px;
  193.     text-align: center;
  194.     color: #00a4ff;
  195.     font-size: 14px;
  196.     margin: 7px 15px 10px 15px;
  197. }
  198. /* 三、精品推荐模块 */
  199. .goods {
  200.     height: 60px;
  201.     margin: 10px auto;
  202.     background-color: #fff;
  203.     box-shadow: 2px 5px 2px 0px rgba(0, 0, 0, 0.07);
  204. }
  205. .goods h3 {
  206.     float: left;
  207.     width: 130px;
  208.     margin-top: 23px;
  209.     text-align: center;
  210.     color: #00a4ff;
  211.     font-size: 16px;
  212. }
  213. .goods .list ul li a {
  214.     float: left;
  215.     width: 125px;
  216.     height: 18px;
  217.     margin-top: 23px;
  218.     border-left: 1px solid #bfbfbf;
  219.     color: #050505;
  220.     font-size: 16px;
  221.     text-align: center;
  222. }
  223. .goods span .mod {
  224.     float: right;
  225.     height: 58px;
  226.     margin-top: 23px;
  227.     margin-right: 25px;
  228.     color: #00a4ff;
  229.     font-size: 14px;
  230.  
  231. }
  232. /* 四、精品推荐模块 */
  233. .box {
  234.     height: 600px;
  235.     margin: 0 auto;
  236.     margin-top: 33px;
  237. }
  238. .box-hd {
  239.     float: left;
  240.     width: 1200px;
  241.     height: 50px;
  242. }
  243. .box-hd p {
  244.     float: left;
  245.     color: #494949;
  246.     font-size: 20px;
  247. }
  248. .box-hd a {
  249.     float: right;
  250.     margin: 8px 30px 0px 0px;
  251.     color: #a5a5a5;
  252.     font-size: 12px;
  253. }
  254. .box-bd ul {
  255.     float: left;
  256.     width: 1200px;
  257.     height: 560px;
  258. }
  259. .box-bd ul {
  260.     width: 1225px;
  261.     /* 为了使五个li盒子能在一行上 */
  262. }
  263. .box-bd ul li {
  264.     float: left;
  265.     width: 228px;
  266.     height: 270px;
  267.     margin-right: 15px;
  268.     margin-bottom: 13px;
  269.     background-color: #ffffff;
  270. }
  271. .box-bd ul li img {
  272.     width: 100%;
  273. }
  274. .box-bd ul li .h {
  275.     float: left;
  276.     width: 185px;
  277.     height: 35px;
  278.     margin: 18px 20px 20px 24px;
  279.     color: #050505;
  280.     font-size: 14px;
  281.  
  282. }
  283. .box-bd ul li .orange {
  284.     float: left;
  285.     margin-left: 20px;
  286.     color: #ff7c2d;
  287.     font-size: 12px;
  288. }
  289. .box-bd ul li div {
  290.     float: right;
  291.     margin-right: 85px;
  292.     color: #999999;
  293.     font-size: 12px;
  294. }
  295. .box-bd ul li:hover {
  296.     box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.1);
  297. }
  298. /* 五、footer模块 */
  299. .footer {
  300.     height: 415px;
  301.     margin:0px auto;
  302.     margin-top: 40px;
  303.     background-color: #ffffff;
  304. }
  305. .footer .w {
  306.     height: 415px;
  307.     margin: 0px auto;
  308. }
  309. .copyright {
  310.     float: left;
  311.     width: 475px;
  312.     height: 190px;
  313.     margin:30px 0px 0px 10px;
  314. }
  315. .copyright p {
  316.     margin: 25px 0px 15px 0px;
  317.     color: #666666;
  318.     font-size: 12px;    
  319. }
  320. .copyright button {
  321.     width: 120px;
  322.     height: 35px;
  323.     border: 1px solid #00a4ff;
  324.     background-color: #fff;
  325.     color: #00a4ff;
  326. }
  327. .links {
  328.     float: right;
  329.     
  330. }
  331. .links dl {
  332. float: left;
  333. padding-left: 115px;
  334. padding-top: 33px;
  335. }
  336. .links dl dt {
  337.     padding-bottom: 14px;
  338.     
  339.     color: #333333;
  340.     font-size: 16px;
  341. }
  342. dd {
  343.     width: 100px;
  344.     margin-bottom: 8px;
  345.     font-size: 12px;
  346. }
  347. .links a {
  348.     color: #333333;
  349. }
  350.  
  351. .links dd a:hover {
  352.     color: #00a4ff;
  353. }

4.3 效果图

 （ps 相同效果的网页制作方法有很多哦，小伙伴们也可以尝试其他的方法去完成这个效果滴~）

素材文件在下方链接提取哦~

链接: https://pan.baidu.com/s/1l2liO-E9_WzIbIB4Nl7Isw 提取码: i33d 复制这段内容后打开百度网盘手机App，操作更方便哦

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/167174
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号