Web前端—网页制作（以“学成在线”为例）

已于 2023-11-23 15:17:09 修改
阅读量1.2k 收藏 17
点赞数 3
分类专栏： 前端学习笔记（自用） 文章标签： 前端 css html 前端框架 edge
于 2023-11-05 23:24:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65106708/article/details/134236746
版权

版本说明

当前版本号[20231105]。

版本修改说明
20231105初版

本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。

目录

文章目录

day07-学成在线

01-项目目录

网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。

1680336645218

  • 首页引入CSS文件
<!-- 顺序要求：先清除再设置 -->
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">

02-版心居中

1680336711608

.wrapper {
  margin: 0 auto;
  width: 1200px;
}

<body>
		<div class="wrapper">1</div>
</body>

image-20231024095614698

03-布局思路

  1. 布局思路：先整体再局部，从外到内，从上到下，从左到右
  2. CSS 实现思路
    1. 画盒子，调整盒子范围 → 宽高背景色
    2. 调整盒子位置 → flex 布局、内外边距
    3. 控制图片、文字内容样式

04-header区域-整体布局

1680337054328

HTML结构

<!-- 头部区域 -->
<div class="header">
  <div class="wrapper">
    <!-- logo -->
    <div class="logo">logo</div>
    <!-- 导航 -->
    <div class="nav">导航</div>
    <!-- 搜索 -->
    <div class="search">search</div>
    <!-- 用户 -->
    <div class="user">用户</div>
  </div>
</div>

CSS样式

/* 头部区域 */
.header {
  height: 100px;
  background-color: #fff;
}

.header .wrapper {
  padding-top: 29px;
  display: flex;
}

image-20231025110003943

05-header区域-logo

1680337229070

logo 功能：

  • 单击跳转到首页
  • 搜索引擎优化：提升网站百度搜索排名

实现方法：

  • 标签结构：h1 > a > 网站名称（搜索关键字）
<div class="logo">
  <h1><a href="#">学成在线</a></h1>
</div>
  • CSS 样式
/* logo */
.logo a {
  display: block;
  width: 195px;
  height: 41px;
  background-image: url(../images/logo.png);
  font-size: 0;
}

如没去掉文字，内容为：

image-20231025110727951

加入 font-size: 0;后：

image-20231025110817993

06-header区域-导航

实现方法：

  • 标签结构：ul > li * 3 > a
  • 优势：避免堆砌 a 标签，网站搜索排名降级

1680337390943

HTML结构

<ul>
  <li><a href="#" class="active">首页</a></li>
  <li><a href="#">课程</a></li>
  <li><a href="#">职业规划</a></li>
</ul>

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


/* actvie 类选择器，表示默认选中的a */
.nav li .active,
.nav li a:hover {
  border-bottom: 2px solid #00a4ff;
}

示例：

1、三个li标签要在一行，并且logo与字要有边距，是用的是display: flex;

image-20231025112536299

image-20231025113045905

2、改变字大小，间隔。

image-20231025114108736

3，为“首页”添加下划蓝线，而“课程”、“职业规划”当使用鼠标贴在字上也可以显示蓝线。

image-20231025114203925

07-header区域-搜索布局

1680337525496

HTML结构

<div class="search"></div>

CSS样式

.search {
  display: flex;
  margin-left: 64px;
  padding-left: 19px;
  padding-right: 12px;
  width: 412px;
  height: 40px;
  background-color: #f3f5f7;
  border-radius: 20px;
}

1、可以分步编写，先把输入框与“用户”输出出来，后续再调整位置。

/* 搜索 */
.search{
	margin-left: 64px;
	padding-left: 19px;
	padding-right: 12px;
	width: 412px;
	height: 48px;
	background-color: #f3f5f7;
	border-radius: 20px;
}

image-20231025114923440

2、设置好焦点框的透明和提醒的文字。

image-20231025115734663

08-header区域-搜索内容

HTML结构

<!-- 搜索 -->
<div class="search">
	<input type="text" placeholder="请输入你查询的内容">
	<a href="#"></a>
</div>

CSS样式

.search input {
   flex: 1;
   border: 0;
   background-color: transparent;
   /* 去掉表单控件的焦点框 */
   outline: none;
}

/* ::placeholder 选中就是 placeholder 属性文字样式*/
.search input::placeholder {
  font-size: 14px;
  color: #999;
}

/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
  align-self: center;
  width: 16px;
  height: 16px;
  background-image: url(../images/search.png);
}

image-20231026113209455

09-header区域-用户区域

1680337703358

HTML结构

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

CSS样式

/* 用户 */
.user {
  margin-left: 32px;
  margin-top: 4px;
}

.user img {
  margin-right: 7px;
  /* vertical-align 行内块和行内垂直方向对齐方式 */
  vertical-align: middle;
}

.user span {
  font-size: 16px;
  color: #666;
}

1、设置水平和垂直间距。

/* 用户 */
.user{
	margin-left: 32px;
	margin-top: 4px;
}

image-20231026113118554

2、设置元素的垂直对齐方式为居中。

.user img{
	vertical-align: middle;
}

image-20231026113502613

3、最后完善代码，将用户的文本信息以灰色字体显示在头像下方。

.user img{
	/* vertical-align 行内块和行内垂直方向对齐方式 */
	vertical-align: middle;
}

.user span{
	font-size: 16px;
	color: #666;
}

image-20231026113732829

10-banner区域-布局

1680337778559

HTML结构

<div class="banner">
  <div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>

CSS样式

/* banner 区域 */
.banner {
  height: 420px;
  background-color: #0092cb;
}

.banner .wrapper {
  display: flex;
  justify-content: space-between;
  height: 420px;
  background-image: url(../uploads/banner.png);
}

1、先加蓝色底色。

/* banner */
.banner{
	height: 420px;
	background-color: #0092cb;
}

/* 版心 */
.wrapper{
	margin: 0 auto;
	width: 1200px;
}

	<body>
		<!-- banner区域  -->
		<div class="banner">
			<div class="wrapper"></div>
		</div>
	</body>

image-20231026114404349

2、通栏里面套版心。

.banner .wrapper{
	height: 420px;
	background-image: url(../uploads/banner.png);
}

image-20231026114609831

3、给两个侧边栏设left和right，腾出位置。

.banner .wrapper{
	display: flex;
	height: 420px;
	background-image: url(../uploads/banner.png);
}

image-20231026115123275

4、设置水平间距为等分空间。

.banner .wrapper{
	display: flex;
	justify-content: space-between;/*在弹性布局容器中，子元素之间的水平间距为等分空间。*/
	height: 420px;
	background-image: url(../uploads/banner.png);
}

image-20231026115300660

11-banner区域-侧导航

HTML结构

<div class="left">
  <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="#">UI设计</a></li>
    <li><a href="#">产品</a></li>
  </ul>
</div>

CSS样式

/* 侧导航 */
.banner .left {
  padding: 3px 20px;
  width: 191px;
  height: 420px;
  background-color: rgba(0,0,0,0.42);
}

.banner .left a {
  /* 块级：宽度是父级的100% */
  display: block;
  height: 46px;
  background: url(../images/right.png) no-repeat right center;
  line-height: 46px;
  font-size: 16px;
  color: #fff;
}

.banner .left a:hover {
  background-image: url(../images/right-hover.png);
  color: #00a4ff;
}

1、设置该元素的背景颜色为半透明的黑色。

.banner .left{
	width: 191px;
	height: 420px;
	background-color: rgba(0, 0, 0, 0.42);
}

image-20231026140828530

2、由于我们想要的样式并不是在左上角，而是分几行，且居中。

<!-- banner区域  -->
		<div class="banner">
			<div class="wrapper">
				<div class="left">
				<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>
				</ul>
				</div>
				<div class="right">right</div>
			</div>
		</div>

.banner .left{
	padding: 3px 20px;
	width: 191px;
	height: 420px;
	background-color: rgba(0, 0, 0, 0.42);
}

image-20231026141257472

3、拉长边距。

.banner .left a{
	/* 块级：宽度就是父级的100% */
	display: block;
	height: 46px;
	line-height: 46px;
	font-size: 16px;
	color: #fff;
}

image-20231026141618746

4、开始设计箭头。

.banner .left a{
	/* 块级：宽度就是父级的100% */
	display: block;
	height: 46px;
	background: url(../images/right.png) no-repeat right center;
	line-height: 46px;
	font-size: 16px;
	color: #fff;
}

image-20231026142027247

5、设置悬停。

/* banner左边悬停变色 */
.banner .left a:hover{
	background-image: url(../images/right-hover.png);
	color: #00a4ff;
}

image-20231026142434661

12-banner区域-课程表布局

1680338145736

HTML布局

<div class="right">
  <h3>我的课程表</h3>
  <div class="content">1</div>
</div>

CSS样式

/* 课程表 */
.banner .right {
  margin-top: 60px;
  width: 218px;
  height: 305px;
  background-color: #209dd5;
  border-radius: 10px;
}

.banner .right h3 {
  margin-left: 14px;
  height: 48px;
  line-height: 48px;
  font-size: 15px;
  color: #fff;
  font-weight: 400;
}

.banner .right .content {
  padding: 14px;
  height: 257px;
  background-color: #fff;
  border-radius: 10px;
}

1、初步设计。

/* banner 右边课程表 */
.banner .right{
	margin-top: 60px;
	width: 218px;
	height: 305px;
	background-color: #209dd5;
	border-radius: 10px;
}

image-20231026143538645

<div class="right">
	<h3>我的课程表</h3>
</div>

2、设置元素的样式。

.banner .right h3{
	margin-left: 14px;
	height: 48px;
	line-height: 48px;
	font-size: 15px;
	color: #fff;
	font-weight: 400;
}

image-20231026144005048

3、去生成装课程的框。

<div class="right">
	<h3>我的课程表</h3>
	<div class="content">1</div>
</div>

.banner .right .content{
	height: 257px;
	background-color: #fff;
	border-radius: 10px;
}

image-20231026144254750

13-banner区域-课程表内容

HTML结构

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

CSS样式

.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 {
  color: #7d7d7d;
  font-weight: 400;
}

1、初步在框里面填写数据。

<div class="right">
					<h3>我的课程表</h3>
					<div class="content">
						<dl>
							<dt>数据可视化课程</dt>
							<dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
						</dl>
						<dl>
							<dt>数据可视化课程</dt>
							<dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
						</dl>
						<dl>
							<dt>数据可视化课程</dt>
							<dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
						</dl>
					</div>
				</div>

image-20231026145643300

2、对每个课程底下加上分割线。

/* 分割线 */
.banner .right dl{
	margin-bottom: 12px;
	border-bottom: 1px solid #e0e0e0;
}

image-20231026150207029

3、把课程表标题样式搞好。

/* 课程表标题 */
.banner .right dt{
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

image-20231026150341237

4、设计正在学习这一行字的样式。

/* 小字样式 */
.banner .right dd{
	margin-bottom: 8px;
	font-size: 12px;
	line-height: 16px;
}

image-20231026150610806

5、改正在学习的颜色样式。

/* 改正在学习的颜色样式 */
.banner .right dd span{
	color: #00a4ff;
}

image-20231026150826485

6、学习内容不再加粗。

/* 学习内容不再加粗 */
.banner .right dd strong{
	color: #7d7d7d;
	font-weight: 400;
}

image-20231026151231185

14-banner区域-全部课程

HTML结构

<a href="#">全部课程</a>

CSS样式

.banner .right a {
  display: block;
  height: 32px;
  background-color: #00a4ff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #fff;
  border-radius: 15px;
}

1、加入全部课程。

<a href="#">全部课程</a>

/* 加入全部课程 */
.banner .right a{
	display: block;
	height: 32px;
	background-color: #00a4ff;
}

image-20231026151532322

2、再加入圆角和水平、垂直居中。

/* 加入全部课程 */
.banner .right a{
	display: block;
	height: 32px;
	line-height: 32px;
	background-color: #00a4ff;
	text-align: center;
	border-radius: 15px;
}

image-20231026151707325

3、修改“全部课程”这四个字的样式。

/* 加入全部课程 */
.banner .right a{
	display: block;
	height: 32px;
	line-height: 32px;
	background-color: #00a4ff;
	text-align: center;
	border-radius: 15px;
	font-size: 14px;
	color: #fff;
}

image-20231026152044693

15-精品推荐-区域布局

1680338252106

HTML结构

<!-- 精品推荐 -->
<div class="recommend wrapper">
  <h3>精品推荐</h3>
  <ul>
    <li><a href="#">HTML</a></li>
  </ul>
  <a href="#" class="modify">修改兴趣</a>
</div

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

1、给精品区域留出位置。

<!-- 精品区域 -->
		<div class="recommend wrapper">1</div>

image-20231027170929457

2、框出位置。

/* 精品推荐 */
.recommend{
	height: 60px;
	background-color: #fff;
	box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
}

image-20231027171148399

3、设置元素的行高，并且把元素的上外边距、内边距设置好。

/* 精品推荐 */
.recommend{
	margin-top: 60px;
	padding: 0 20px;
	height: 60px;
	background-color: #fff;
	box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
	line-height: 60px;
}

image-20231027171412258

4、把修改兴趣挤到最右侧并设置元素的阴影效果。

<!-- 精品区域 -->
		<div class="recommend wrapper">
			<h3>精品推荐</h3>
			<ul>
				<li><a href="#">HTML</a></li>
			</ul>
			<a href="#">修改兴趣</a>
		</div>

/* 精品推荐 */
.recommend{
	display: flex;
	margin-top: 60px;
	padding: 0 20px;
	height: 60px;
	background-color: #fff;
	box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
	line-height: 60px;
}

.recommend ul{
	/* 除去标题和修改兴趣的尺寸，父级剩余尺寸都给ul，实现把修改兴趣挤到最右侧 */
	flex: 1;
}

image-20231027172046857

5、修改好精品推荐的颜色。

.recommend h3{
	font-size: 18px;
	color: #00a4ff;
	font-weight: 400;
}

image-20231027172431230

6、将无序列表元素设置为弹性布局容器，使其子元素可以按照弹性盒子模型进行布局。设置无序列表的弹性盒子模型的主轴方向上的尺寸为1，即占据剩余的空间。这样可以实现把修改兴趣挤到最右侧的效果。

<!-- 精品区域 -->
		<div class="recommend wrapper">
			<h3>精品推荐</h3>
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">HTML</a></li>
			</ul>
			<a href="#">修改兴趣</a>
		</div>

.recommend ul{
	/* 除去标题和修改兴趣的尺寸，父级剩余尺寸都给ul，实现把修改兴趣挤到最右侧 */
	display: flex;
	flex: 1;
}

image-20231027172637225

16-精品推荐-内容样式

HTML结构

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

CSS样式

.recommend h3 {
  font-size: 18px;
  color: #00a4ff;
  font-weight: 400;
}

.recommend ul {
  /* 除去标题和修改兴趣的尺寸，父级剩余尺寸都给ul，实现把修改兴趣挤到最右侧 */
  flex: 1;
  display: flex;
}

.recommend ul li a {
  padding: 0 24px;
  border-right: 1px solid #e0e0e0;
  font-size: 18px;
}

.recommend ul li:last-child a {
  border-right: 0;
}

.recommend .modify {
  font-size: 16px;
  color: #00a4ff;
}

1、设置链接元素的内边距来增加链接与文本之间的间距。再设置链接元素的右边框。最后设置一个无序列表项中的链接元素的样式。

2、将最后一个无序列表项中的链接元素的右边框设置为无边框。这样可以避免最后一个链接元素与其父级无序列表项之间出现多余的边框。

.recommend ul li a{
	padding: 0 24px;
	border-right: 1px solid #e0e0e0;
}

.recommend ul li:last-child a{
	border-right: 0;
}

image-20231031094206800

3、修改兴趣的字体大小与颜色。

<a href="#" class="modify">修改兴趣</a>

.recommend .modify{
	font-size: 16px;
	color: #00a4ff;
}

image-20231031095412105

17-推荐课程-标题区域

1680338517515

HTML结构

<!-- 精品推荐课程 -->
<div class="course wrapper">
  <!-- 标题 -->
  <div class="hd">
    <h3>精品推荐</h3>
    <a href="#" class="more">查看全部</a>
  </div>
  <!-- 内容 -->
  <div class="bd">1</div>
</div>

CSS样式

/* 推荐课程 */
.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: url(../images/more.png) no-repeat right center;
  font-size: 14px;
  color: #999;
}

1、设置背景图片，将背景图片定位在元素的右侧中间位置。

<!-- 精品推荐课程 -->
		<div class="course wrapper">
			<!-- 标题 -->
			<div class="hd">
				<h3>精品推荐</h3>
				<a href="#" class="more">查看全部</a>
			</div>
			<!-- 内容 -->
			<div class="bd"></div>
		</div>

/* 推荐课程 */
.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:url(../images/more.png) no-repeat right center;
	font-size: 14px;
	color: #999;
}

image-20231105141328372

快捷键如下：

如：ul>li*5 按住tab键即可快速建立5个li标签

18-推荐课程-内容布局

HTML结构

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

CSS样式

/* 课程内容 - 公共类 */
.bd ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.bd li {
  margin-bottom: 14px;
  width: 228px;
  height: 271px;
  background-color: pink;
}

1、将一个无序列表设置为弹性布局，并允许项目在需要时换行。

<!-- 精品推荐课程 -->
		<div class="course wrapper">
			<!-- 标题 -->
			<div class="hd">
				<h3>精品推荐</h3>
				<a href="#" class="more">查看全部</a>
			</div>
			<!-- 内容 -->
			<div class="bd">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
				</ul>
			</div>
		</div>

/* 课程内容-公共类 */
.bd ul{
	display: flex;
	flex-wrap: wrap;
}

.bd li{
	width: 228px;
	height: 271px;
	background-color: pink;
}

image-20231105142358105

2、在主轴上将元素之间的空白区域均匀分布，并在两端留有相等的空间。

/* 课程内容-公共类 */
.bd ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.bd li{
	width: 228px;
	height: 271px;
	background-color: pink;
	margin-bottom: 14px;
}

image-20231105142648364

19-推荐课程-内容样式

HTML结构

<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/course02.png" alt=""></div>
      <div class="text">
        <h4>Vue.js实战——面经全端项目</h4>
        <p><span>高级</span> · <i>2726</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course03.png" alt=""></div>
      <div class="text">
        <h4>玩转Vue全家桶，iHRM人力资源项目</h4>
        <p><span>高级</span> · <i>9456</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course04.png" alt=""></div>
      <div class="text">
        <h4>Vue.js实战医疗项目——优医问诊</h4>
        <p><span>高级</span> · <i>7192</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course05.png" alt=""></div>
      <div class="text">
        <h4>小程序实战：小兔鲜电商小程序项目</h4>
        <p><span>高级</span> · <i>2703</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course06.png" alt=""></div>
      <div class="text">
        <h4>前端框架Flutter开发实战</h4>
        <p><span>高级</span> · <i>2841</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course07.png" alt=""></div>
      <div class="text">
        <h4>熟练使用React.js——极客园H5项目</h4>
        <p><span>高级</span> · <i>95682</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course08.png" alt=""></div>
      <div class="text">
        <h4>熟练使用React.js——极客园PC端项目</h4>
        <p><span>高级</span> · <i>904</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course09.png" alt=""></div>
      <div class="text">
        <h4>前端实用技术，Fetch API 实战</h4>
        <p><span>高级</span> · <i>1516</i>人在学习</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course10.png" alt=""></div>
      <div class="text">
        <h4>前端高级Node.js零基础入门教程</h4>
        <p><span>高级</span> · <i>2766</i>人在学习</p>
      </div>
    </a>
  </li>
</ul>

CSS样式

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

1、将两个部分分出来。

<li>
	<div class="pic">1</div>
	<div class="text">2</div>
</li>

.bd li .pic{
	height: 156px;
}

.bd li .text{
	height: 115px;
	background-color: #fff;
}

image-20231105143421066

2、将图片及文字附上去。

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

image-20231105144511611

3、同样的li复制十个即可。

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

image-20231105165751158

20-前端开发工程师区域

1680339112336

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/web01.png" alt=""></div>
              <div class="text">
                <h4>JS高级javaScript进阶面向对象ES6</h4>
                <p><span>高级</span> · <i>101937</i>人在学习</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/web02.png" alt=""></div>
              <div class="text">
                <h4>零基础玩转微信小程序</h4>
                <p><span>高级</span> · <i>133781</i>人在学习</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/web03.png" alt=""></div>
              <div class="text">
                <h4>JavaScript基础——语法解析+项目实战</h4>
                <p><span>高级</span> · <i>8927</i>人在学习</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/web04.png" alt=""></div>
              <div class="text">
                <h4>前端框架Vue2+Vue3全套视频</h4>
                <p><span>高级</span> · <i>26022</i>人在学习</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS样式

/* 前端 */
.hd ul {
  display: flex;
}

.hd li {
  margin-right: 60px;
  font-size: 16px;
}

.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 {
  margin-bottom: 15px;
  height: 100px;
}

1、设置中间栏。

<!-- 前端  -->
		<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>

/* 前端 */
.hd ul{
	display: flex;
}

.hd li{
	margin-right: 60px;
	font-size: 16px;
}

.hd li .active{
	color:#00a4ff;
}

image-20231105171138567

1、将框规划出来。

<!-- 身体 -->
<div class="bd">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

.bd{
	display: flex;
	/* 主轴对齐 */
	justify-content: space-between;
}

.bd .left{
	width: 228px;
	background-color: pink;
}

.bd .right{
	width: 957px;
	background-color: pink;
}

image-20231105171651324

2、将图片进行插入。

<!-- 身体 -->
			<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>
							
						</ul>
					</div>
				</div>
			</div>

image-20231105172220195

3、设置边距。

.bd .right top{
	height: 100px;
	margin-bottom: 15px;
}

image-20231105174835635

21-版权-布局

1680339154682

HTML结构

<!-- 版权 -->
<div class="footer">
  <div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>

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

1、初步设计。

<!-- 版权  -->
		<div class="footer">
			<div class="wrapper">
				<div class="left">left</div>
				<div class="right">right</div>
			</div>
		</div>

/* 版权 */
.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;
}

image-20231105175206519

22-版权-内容

HTML结构

<div class="left">
  <a href="#"><img src="./images/logo.png" alt=""></a>
  <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
  <a href="#" class="download">下载APP</a>
</div>
<div class="right">
  <dl>
    <dt>关于学成网</dt>
    <dd><a href="#">关于</a></dd>
    <dd><a href="#">管理团队</a></dd>
    <dd><a href="#">工作机会</a></dd>
    <dd><a href="#">客户服务</a></dd>
    <dd><a href="#">帮助</a></dd>
  </dl>
  <dl>
    <dt>新手指南</dt>
    <dd><a href="#">如何注册</a></dd>
    <dd><a href="#">如何选课</a></dd>
    <dd><a href="#">如何拿到毕业证</a></dd>
    <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>

CSS样式

.footer .left p {
  margin-top: 24px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 17px;
  color: #666;
}

.footer .left .download {
  display: block;
  width: 120px;
  height: 36px;
  border: 1px solid #00a4ff;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
  color: #00a4ff;
}

.footer .right {
  display: flex;
}

.footer .right dl {
  margin-left: 130px;
}

.footer .right dt {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 23px;
}

.footer .right a {
  font-size: 14px;
  color: #666;
  line-height: 24px;
}

1、插入文字。

<!-- 版权  -->
		<div class="footer">
			<div class="wrapper">
				<div class="left">
					<a href="#"><img src="images/logo.png" alt=""></a>
					<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
						© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
					<a href="#" class="download">下载APP</a>
				</div>
				<div class="right">right</div>
			</div>
		</div>

image-20231105175636435

2、改变字体大小和边距。

.footer .left p{
	margin-top: 24px;
	margin-bottom: 14px;
	font-size: 12px;
	line-height: 17px;
	color: #666;
}

image-20231105175924151

3、设置框。

.footer .left .download{
	display: block;
	width: 120px;
	height: 36px;
	border: 1px solid #00a4ff;
	text-align: center;
	line-height: 34px;
	font-size: 16px;
	color: #00a4ff;
}

image-20231105180224059

4、将右边的三类文字放进去。

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

.footer .right{
	display: flex;
}

image-20231105180613885

5、统一改好边距。

.footer .right dl{
	margin-left: 130px;
}

.footer .right dt{
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 23px;
}

.footer .right a{
	font-size: 14px;
	color: #666;
	line-height: 24px;
}

image-20231105180944645

放下华子我只抽RuiKe5
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端学习：学成网在线.rar
08-14
网页制作 前端学习 内含psd文件
HTML 教程：学习如何构建网页||HTML 简介
爱编程的鱼的博客
06-24 3420
我的第一个网站
web前端网页制作课作业——用DIV+CSS技术设计的家乡旅游主题网站
最新发布
dreamweaver网页设计
03-08 911
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
web开发课程设计（静态界面）
01-05
一个旅游服务网站的静态界面制作，也是由其他模板更改而成的，基本满足大学期间的web开发课程期末项目开发需求，用于HTML,CSS,javascript课程的学习需要，根据模板直接更改相关信息即可，其中也包含课程设计报告，写的比较马虎，但是也能作为一个差不多的期末设计。大致能让你顺利完成web开发的期末作业。项目用到了比较多的css动画样式以及第三方库的ui效果和js，可用作学习了解，并不包含vue或者其他主流前端框架。
web前端特效JavaScript
10-06
人是感官动物，看到新奇的事物都有兴趣了解一番。网页设计也是这样，用户一眼看到视觉效果很棒而又很有趣的网站，一般也都会停留下来浏览一番。由此可见，网页视觉效果设计的好真的很重要！开发一个网站产品，需要经过“产品设计-视觉设计-前端开发-后台开发”四个阶段。其中产品设计和视觉设计师主要是确定网站产品的视觉要求，而后台开发则是注重网站的核心功能以及数据存储，前端开发则作为视觉和功能的核心连接，支撑整个项目的顺利完成，这个过程中前端开发主要是通过编程的形式将原型设计和图片内容制作成服务器可以识别的机器语言，从而与后端开发技术相关联，实现整个网站的正常运行。
dreamweaver网页设计作业制作 宠物网页设计 WEB静态网页作业模板 大学生个人主页博客网页代码 dw个人网页作业成
07-28
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的个人网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 临近期末，大一新生的各种考试和专业结课作业纷至沓来。什么高数啊、线代啊、C语言、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说 用DIV+CSS技术设计的个人网页 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面
HTML网页制作——制作一个属于自己的网页
一起努力共同进步，为了未来一起奋斗吧！
10-04 5万+
不想要一个属于自己的网页嘛，想要就进来看看吧，手把手教你制作一个属于自己的网页
学成在线网页制作（详细）
egg_er的博客
10-25 2万+
项目分析 如图： 分为四个模块： header头部模块 精品推荐模块 编程入门模块 数据分析师模块 机器学习模块 前端工程师开发模块 footer模块 如果仔细观察的话，第2，5，6属于一个模块，样式结构相同。同样的3，4模块相同，这样只要做出一个另外一个复制黏贴即可。 详细制作 先确定版心，版心的宽度，然后给他封装成类，这样方便后面每个模块的父盒子调用。 初始化一些值： * { margin: 0; padding: 0; } .ul { list-style: none;
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-15 1647
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
WEB入门一 网页设计基础
张晨光老师的播客
02-14 2万+
本章简介 在当今社会，网页是网络信息共享和发布的主要形式。而HTML (Hyper Text Mark-up Language)，即超文本标记语言，是创建网页基础。本章将学习HTML文档的基本结构、组成HTML文档的各类常见标签。HTML 标签可以说明文字、图形、动画、声音、表格和链接等。本章重点是各种标签的基本语法和用法。核心技能部分1.1HTML文档基本结构首先我们来
web前端简易网页制作
ZYN_8620的博客
04-06 2万+
简易旅游网，静态网页制作 页面效果
基于编译原理所学词法分析、语法分析制作而成的简约计算器.zip
02-11
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 21万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
用js做一个简单的网页,用javascript做一个网页
2301_79533350的博客
11-05 2129
大家好，小编为大家解答用javascript写简单网页家乡的介绍代码的问题。很多人还不知道用javascript写简单网页小游戏，现在让我们一起来看看吧！
计算机毕业设计——简单的网页设计
网页设计与制作 | HTML+CSS+JS
12-22 4568
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 2868
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
网页制作步骤
jianxingkkk的博客
11-16 2万+
1、开始先点击桌面空白处右击鼠标，新建文档。 2、随便编辑一些东西，切忌编辑网页内容的命令一点都不能输错，那怕少输一个空格都没用。 3、编辑好了点击文件、另存为。 4、这一步是关键，要在文件名后面加上 点html（是. 这个点）、保存类型选所有文件、然后保存。 5、保存完了返回桌面会多出一个网页版的文档，这个网页版的图标不固定的，你用的是什么浏览器就会是什么图标。 6、然后打开，选择打开方式...
web前端 校园网站设计
m0_74394367的博客
10-12 1963
web前端 校园网站设计
HTML-CSS学成在线案例 | pink老师讲解思路 | 完整源代码
m0_67495444的博客
09-30 1444
实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法；一个search大盒子里面包含2个表单。
制作web前端网页设计
01-18
制作web前端网页设计可以使用HTML、CSS和JavaScript来实现。下面是一个简单的示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>Web前端网页设计</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个示例网页</p> <script src="script.js"></script> </body> </html> ``` CSS部分（style.css）： ```css h1 { color: blue; } p { font-size: 18px; } ``` JavaScript部分（script.js）： ```javascript console.log("这是一个JavaScript示例"); ``` 通过以上代码，你可以创建一个简单的网页，其中包含一个标题、一个段落和一个JavaScript脚本。你可以根据自己的需求修改和扩展这些代码，添加更多的HTML元素、样式和交互功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

放下华子我只抽RuiKe5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值