首页 > 编程札记 > 编程

【黑马程序员】5、学成在线网页制作

阅读： 评论：0

【黑马程序员】5、学成在线网页制作

【黑马程序员】5、学成在线网页制作

目录

学成在线网页制作

1、准备工作

1.1 项目目录

1.2 默认样式代码

2、网页制作思路

3、header区域

3.1 整体布局

3.2 logo

3.3 导航功能

3.4 搜索区域

3.5 用户区域

4、banner区域

4.1 整体布局

4.2 左侧侧导航

4.3 右侧课程表

5、精品推荐区域

6、精品课程

7、前端开发工程师区域

8、人工智能开发

9、版权区域

学成在线网页制作

1、准备工作

1.1 项目目录

网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。

  • study  
    • images文件夹：放固定使用的图片，比如logo
    • uploads文件夹：放非固定使用的图片，比如商品图，宣传需要的上传的图片。
    • css文件夹：存放css文件（用link引入）
      • base.css：基础公共样式，例如清除默认样式，设置网页基本样式
      • index.css：首页css样式。
    • index.html 首页html文件

1.2 默认样式代码

见资料。

2、网页制作思路

1、布局思路：先整体再局部，从外到内，从上到下，从左到右。

2、CSS实现思路

2.1 画盒子，调整盒子范围 → 宽高背景色

2.2 调整盒子位置 → flex布局，内外边距

2.3 控制图片、文字内容样式

3、header区域

3.1 整体布局

通栏：宽度与浏览器窗口相同的盒子

标签结构：通栏->版心->logo + 导航 + 搜索 + 用户

logo：

1 单击跳转到首页  → a标签

2搜索引擎优化：提升网站百度搜索排名

实现方法：

1 标签结构： h1 > a > 网站名字（搜索关键字）

2 CSS样式： 给a标签加背景图，转 显示模式（块级），且隐藏文字（字体大小为0）

/* logo区域 */
.logo a {display: block;width: 195px;height: 41px;background-image: url(../images/logo.png);font-size: 0;
}

html

            <div class="logo"><h1><a href="#">学成在线</a> </h1></div>

提升网站百度搜索排名如何实现

标签结构要有h1，a里面放文字，未来是搜索关键字。

3.3 导航功能

导航功能：单击跳转页面

实现方法

        标签结构：ul > li*3 > a

        优点：避免堆砌a标签，网站搜索排名降级。

        布局思路：

                li 设置右侧margin

                a 设置左右padding

代码

CSS

/* 导航区域 */
.nav {margin-left: 102px;
}
.nav ul {display: flex;
}
.nav li {margin-right: 24px;
}
.nav li a {display: block;padding: 6px 8px;line-height: 27px;font-size: 19px;
}/* active 类选择器，表示m默认选中的a */
.nav li .active,
.nav li a:hover {border-bottom: 2px solid #00a4ff;}

HTML

            <!-- 导航 --><div class="nav"><ul><li><a href="#" class="active">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div>

3.4 搜索区域

实现方法：

  • 标签结构： .search > input + a/button

两部分内容在一行排：display： flex

代码

/* 搜索 */
.search {display: flex;width: 412px;height: 40px;background-color: #f3f5f7;border-radius: 20px;margin-left: 64px;padding-left: 19px;padding-right: 12px;
}
.search input {flex: 1;background-color: transparent;border: 0;outline: none;  /* 去掉焦点框 */
}
/* placeholder选中placeholder属性文字样式 */
.search input:placeholder {font-size: 14px;color: #999;
}
/* 父级是flex布局，子级变弹性盒子 */
/* 弹性盒子加宽高生效 */
.search a {width: 16px;height: 16px;background-image: url(../images/search.png);align-self: center;/* 侧轴居中 */
}

HTML

            <!-- 搜索 --><div class="search"><input type="text" placeholder="请输入关键词"><a href="#"></a></div>

3.5 用户区域

实现方法

  • 标签结构: user > a > img + span

span选一个不换行的。

代码

CSS


/* 用户 */
.user {margin-left: 32px;margin-top: 4px;}
.user img {/* vertical-align 处理行内块和行内垂直方向对齐方式 */vertical-align: middle;margin-right: 7px;
}
.user span {font-size: 16px;color: #666;
}

HTML

            <!-- 用户 --><div class="user"><a href="#"><img src="./uploads/user.png" alt=""><span>波仔学前端</span></a></div>

4、banner区域

4.1 整体布局

结构：通栏banner > 版心 > .left + .right

代码实现

4.2 左侧侧导航

实现方法：

标签结构： .left > ul > li*9 > a

布局思路： a 默认状态 箭头是装饰性的，所以用背景图。

箭头是装饰性的，所以用背景图  

4.3 右侧课程表

标签结构：.right > h3 + .content

代码实现

CSS

/* 课程表 */
.banner .right {margin-top: 60px;width: 218px;height: 205px;border-radius: 10px;background-color: #209dd5;
}
.banner .right h3 {margin-left: 14px;height: 48px;line-height: 48px;font-size: 15px;color: #fff;font-weight: 400;
}
.banner .right .content {height: 257px;background-color: #fff;border-radius: 10px;padding: 14px;
}
.banner .right  dl {margin-bottom: 12px;border-bottom: 1px solid #e0e0e0;
}
.banner .right dt {margin-bottom: 8px;font-size: 14px;line-height: 20px;font-weight: 700;
}
.banner .right dd {margin-bottom: 8px;font-size: 12px;line-height: 16px;
}
.banner .right dd span {color: #00a4ff;
}
.banner .right dd strong {font-weight: 400;color: #7d7d7d;
}
.banner .right a {display: block;height: 32px;background-color: #00a4ff;border-radius: 15px;text-align: center;line-height: 32px;font-size: 14px;color: #fff;}

HTML

  <div class="right"><h3>我的课程表</h3><div class="content"><dl><dt>数据可视化课程</dt><dd><span>正在学习</span>-<strong>echarts使用步骤</strong> </dd></dl><dl><dt>Vue3医疗项目课程</dt><dd><span>正在学习</span>-<strong>认识组合式API</strong> </dd></dl><dl><dt>React核心技术课程</dt><dd><span>正在学习</span>-<strong>rudex配合TS使用</strong> </dd></dl><a href="#">全部课程</a></div></div>

5、精品推荐区域

实现方法：

标签结构： .recommend > h3 + ul + a.modify

代码实现

CSS 

/* 精品推荐 */
.recommend {display: flex;margin-top: 11px;padding: 0 20px;height: 60px;background-color: #fff;box-shadow: 0px 1px 2px 0px rgba(211,211,211,0.5);line-height: 60px;
}
.recommend h3 {font-size: 18px;color: #00a4ff;font-weight: 400;
}
.recommend ul {display: flex;flex: 1;
}
.recommend ul li a {padding: 0 24px;border-right: 1px solid #e0e0e0;color: 18px;
}
.recommend ul li:last-child {border-right: none;
}
.recommend .modify {color: #00a4ff;font-size: 16px;
}

HTML

    <!-- 精品推荐 --><div class="recommend wrapper"><h3>精品推荐</h3><ul><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">JavaScript</a></li><li><a href="#">Node.js</a></li><li><a href="#">Ajax</a></li><li><a href="#">Vue2.0</a></li><li><a href="#">Vue3.0</a></li><li><a href="#">TypeScript</a></li><li><a href="#">React</a></li></ul><a href="#" class="modify">修改兴趣</a></div>

6、精品课程

实现方法

标签结构： .hd + .bd

布局思路：盒子模型

代码实现

CSS

/* 精品课程 */
/* 公共类hd，与其他类共用，减少代码量 */
.course {margin-top: 15px;
}
.hd {display: flex;justify-content: space-between;height: 60px;line-height: 60px;
}
.hd h3 {font-size: 21px;font-weight: 400;
}
.hd .more {padding-right: 20px;background-image: url(../images/more.png);background-repeat: no-repeat;background-position: right center;font-size: 14px;color: #999;
}
/* 课程内容  公共类 */
.bd ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
.bd li {margin-bottom: 14px;width: 228px;height: 271px;background-color: pink;
}
.bd li .pic {height: 156px;}
.bd li .text {padding: 20px;height: 115px;background-color: #fff;}
.bd li .text h4 {margin-bottom: 13px;height: 40px;font-size: 14px;line-height: 20px;font-weight: 400;
}
.bd li .text p {font-size: 14px;line-height: 20px;color: #999;
}
.bd li .text p span {color: #fa6400;
}
.bd li .text p i {font-style: normal;/* 不倾斜 */
}

HTML

    <!-- 精品课程 --><div class="course wrapper"><div class="hd"><h3>精品推荐</h3><a href="#" class="more">查看全部</a></div><!-- 内容 --><div class="bd"><ul><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li></ul></div>

7、前端开发工程师区域

使用section6 的公共类。

代码实现

CSS

/* 前端 */
.hd ul {display: flex;}
.hd li {font-size: 16px;margin-right: 60px;
}
.hd li .active {color: #00a4ff;
}.bd {display: flex;justify-content: space-between;
}
.bd .left {width: 228px;/* background-color: pink; */
}
.bd .right {width: 957px;/* background-color: pink; */
}
.bd .right .top {height: 100px;margin-bottom: 15px;
}

HTML

<!-- 前端 --><div class="wrapper"><div class="hd"><h3>前端开发工程师</h3><ul><li><a href="#" class="active">热门</a></li><li><a href="#">初级</a></li><li><a href="#">中级</a></li><li><a href="#">高级</a></li></ul><a href="#" class="more">查看全部</a></div><div class="bd"><div class="left"><img src="./uploads/web_left.png" alt=""></div><div class="right"><div class="top"><img src="./uploads/web_top.png" alt=""></div><div class="bottom"><ul><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li></ul></div></div></div></div>

8、人工智能开发

自己实现。直接用精品课程部分不行，重新写了一个类，调用bd里面的li，bd被替换。

代码实现

CSS

/* 人工智能开发 */
.cont ul {display: flex;justify-content: space-between;
}

HTML

<!-- 人工智能开发 --><div class="wrapper"><div class="hd"><h3>人工智能开发</h3><ul><li><a href="#" class="active">热门</a></li><li><a href="#">初级</a></li><li><a href="#">中级</a></li><li><a href="#">高级</a></li></ul><a href="#" class="more">查看全部</a></div><!-- 内容 --><div class="cont"><ul><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/course01.png" alt=""> </div><div class="text"><h4>JavaScript数据看板项目实践</h4><p><span>高级</span> · <i>1125</i>人在学习</p></div></a></li></ul></div></div>

9、版权区域

代码实现

CSS

/* 版权 */
.footer {margin-top: 60px;padding-top: 60px;height: 273px;background-color: #fff;
}
.footer .wrapper {display: flex;justify-content: space-between;
}
.footer .left {width: 440px;/* background-color: pink; */
}
.footer .left p {margin-top: 24px;margin-bottom: 14px;font-size: 12px;line-height: 17px;color: #666;
}
.footer .download {display: block;/* a自己在一行，所以就display转成块，不需要父级转成flex */width: 120px;height: 36px;border: 1px solid #00a4ff;text-align: center;line-height: 34px;color: #00a4ff;font-size: 16px;}
.footer .right {display: flex;/* justify-content: space-between; */
}
.footer .right dl {margin-right: 130px;
}.footer .right dt {margin-bottom: 12px;font-size: 16px;line-height: 23px;
}
.footer .right a {font-size: 14px;color: #666;line-height: 24px;
}

HTML

    <!-- 版权 --><div class="footer"><div class="wrapper"><div class="left"><a href="#"><img src="./images/logo.png" alt=""></a><p>xxxxxx</p><a href="#" class="download">下载APP</a></div><div class="right"><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>

本文发布于:2024-01-30 17:17:42，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170660626521602.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

上一篇：〖Python网络爬虫实战㊳〗
下一篇：电子科技大学——知识表示与推理（包含prolog运行逻辑说明部分）
标签：在线   网页制作   黑马   程序员
留言与评论（共有 0 条评论）
   
验证码：
推荐文章
排行榜
热门标签

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23