网页单页制作

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量210 收藏
点赞数
分类专栏： 作业 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56955909/article/details/121674282
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线-不是所有的网站都叫学成在线</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			lilei-hanmm
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<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="#">UI设计 <span>></span></a></li>
					<li><a href="#">产品 <span>></span></a></li>
				</ul>
			</div>
			<!-- 右侧 course -->
			<div class="cource">
				<div class="cource-hd">
					我的课程表
				</div>
				<div class="cource-bd">
					<ul>
						<li>
							<h4>候继洲 不学习</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>天天就知道打游戏</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>哈哈哈哈</h4>
							<p>正在学习-使用对象</p>
						</li>
					</ul>
					<a href="#" class="all">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分end -->
	<!-- 精彩推荐开始 -->
	<div class="goods w">
		<h3>精彩推荐</h3>
		<div class="goods-item">
			|		<a href="#">JQuery</a>
			|		<a href="#">Spark</a>
			|		<a href="#">Hadoop</a>
			|		<a href="#">Zookeeper</a>
			|		<a href="#">Sqoop</a>
			|		<a href="#">Scala</a>
		</div>
		<div class="mod">
			修改兴趣
		</div>
	</div>

	<!-- 精彩推荐结束 -->
	<!-- 精彩内容开始 -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>• 1125人在线学习</p>
				</li>
			</ul>
		</div>
	</div>

	<!-- 精彩内容结束 -->
	<!-- 页脚开始 -->
	<div class="footer">
		<div class="w">
			<div class="copyright">
				<img src="images/end_03.png" alt="">
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
					© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
					<a href="#">下载APP</a>
			</div>
			<div class="links">
				<dl>
					<dt>关于学成网</dt>
					<dd>1</dd>
					<dd>2</dd>
					<dd>3</dd>
					<dd>4</dd>
					<dd>5</dd>
				</dl>
				<dl>
					<dt>关于学成网</dt>
					<dd>1</dd>
					<dd>2</dd>
					<dd>3</dd>
					<dd>4</dd>
					<dd>5</dd>
				</dl>
				<dl>
					<dt>关于学成网</dt>
					<dd>1</dd>
					<dd>2</dd>
				</dl>
			</div>
		</div>
	</div>
	<!-- 页脚结束 -->
	




</body>
</html>
/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*清除列表样式*/
li {
	list-style: none;
}
/*去掉button 默认自带的边框*/
button {
	border: none;
}
body {
	background-color: #f3f5f7;
	/*方便写代码 一会别忘了删除*/
	/*height: 3000px;*/
}
a {
	text-decoration: none;
}
/*清除浮动的*/
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}
/*版心 1200 水平居中*/
.w {
	width: 1200px;
	margin: auto;
}
/*header start*/
.header {
	height: 42px;
	/*background-color: pink;*/
	margin: 30px auto;
}
.logo {
	float: left;
	margin-right: 60px;
}
.nav {
	float: left;
}
.nav ul li {
	float: left;
}
.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 10px;
	margin-right: 20px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	float: left;
	margin-left: 70px;
}
.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	border-right: 0;
	padding-left: 20px;
	color: #ccc;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background: url(images/btn.png);
}
.user {
	float: left;
	height: 42px;
	line-height: 42px;
	margin-left: 30px;
	font-size: 14px;
	color: #666;
}
/*banner start*/
.banner {
	height: 420px;
	background: #1c036c url(images/banner2.jpg) no-repeat top center;
}
.subnav {
	float: left;
	width: 150px;
	height: 420px;
	padding: 0 20px;
	/*背景半透明*/
	background: rgba(0, 0, 0, .3);
}
.subnav li {
	height: 45px;
	line-height: 45px;
}
.subnav li a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
.subnav li a:hover {
	color: #00b4ff;
}
.subnav  span {
	float: right;
}


.cource {
	float: right;
	margin-top: 50px;
	width: 230px;
	height: 300px;
	background-color: #fff;
}
.cource-hd{
	height: 48px;
	line-height: 48px;
	text-align: center;
	background-color: #9bceea;
	font-size: 18px;
	color: #ffffff;
	font-weight: 700;
}
.cource-bd {
	padding: 0 15px;
}
.cource-bd ul {
	padding-top: 10px;
}
.cource-bd li {
	height: 50px;
	margin-top: 10px;
	border-bottom: 1px solid #efefef;
}
.cource-bd li h4 {
	font-size: 16px;
	color: #4e4e4e;
}
.cource-bd li p {
	 font-size: 14px;
	 color: #a5a5a5;
}
.all {
	display: block;
	margin-top: 10px;
	height: 38px;
	line-height: 38px;
	border: 1px solid #33b0ff;
	text-align: center;
	color: #00a4ff;
	font-size: 16px;
}
.goods {
	height: 60px;
	line-height: 60px;
	background-color: #fff;
	margin-top: 10px;
	/* 设置盒子阴影 */
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.goods h3 {
	float: left;
	margin: 0 30px;
	font-size: 16px;
	color: #00a4ff;
}
.goods-item {
	float: left;
	color: #bfbfbf;
}
.goods-item a {
	margin: 0 30px;
	font-size: 16px;
	color: #050505;
}
.mod {
	float: right;
	font-size: 16px;
	color: #00a4ff;
	margin-right: 30px;
}
 .box {
	 margin-top: 15px;
 }
 .box-hd {
	 height: 60px;
	 line-height: 60px;
 }
 .box h3 {
	 float: left;
	 font-size: 20px;
	 color: #494949;
 }
 .box a {
	 float: right;
	 font-size: 12px;
	 color: #a5a5a5;
 }
 .box-bd {
	 width: 1215px;
 }
 .box-bd li {
	 float: left;
	 width: 228px;
	 height: 270px;
	 margin-bottom: 15px;
	 margin-right: 15px;
	 background-color: #fff;
	 box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
 }
 .box-bd img {
	 width: 100%;
 }
 .box-bd h4 {
	 margin: 24px;
	 font-size: 14px;
	 color: #050505;
 }
 .box-bd p {
	 margin: 0 20px;
	 font-size: 12px;
	 color: #999999;
 }
 .box-bd span {
	 color: #ff7c2d;
 }
 .footer {
	 padding-top: 30px;
	 height: 420px;
	 background-color: #fff;
 }
 .copyright {
	 float: left;
 }
.copyright p {
	margin: 30px 0;
	font-size: 12px;
	color: #666666;
}
.copyright a{
	display: block;
	width: 120px;
	height: 35px;
	line-height: 35px;
	border: 1px solid #00a4ff;
	text-align: center;
	color: #00a4ff;
}
.links {
	float: right;
}
.links dl {
	float: left;
	margin-left: 100px;
}
.links dt {
	height: 30px;
	font-size: 16px;
	color: #333333;
}
.links dd {
font-size: 12px;
color: #333333;
}

 

朱子青
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
有问必答，欢迎打扰，项目开发，网页设计
10-20 825
1网页简介：此作品为学生个人主页网页设计题材，学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。一套合格的网页应该包含(具体可根据个人要求而定)
期末前端web大作业——名侦探柯南网页制作 Hbuiderx制作网页 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
dreamweaver网页设计
10-21 425
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
web结课作业的源码——名侦探柯南网页制作 Hbuiderx制作网页 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
HTML网页设计 专注大学生网页设计
10-12 925
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
学生单页面网页作业下载 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页下载
12-06
这个作业是基于Dreamweaver进行制作的，Dreamweaver是一款由Adobe公司开发的知名网页设计软件，它提供了可视化的编辑界面，适合初学者和专业开发者快速构建网页。 首先，我们要理解什么是404错误页面。当用户尝试...
一份前端基于jq网页单页面
07-07
5. **路由管理**：虽然未明确提及，但在单页应用中，通常会用到路由管理，比如使用`hashchange`事件或者现代前端框架（如React Router或Vue Router）进行页面导航。 6. **JSON格式**：可能涉及到与服务器的数据交换...
网页制作作业
12-18
另外，像React或Vue这样的前端框架，它们专门用于构建大型、复杂的单页应用程序（SPA），能够轻松处理状态管理和组件化，从而创建出高度互动的网页。 动态效果可能包括但不限于滑动导航、轮播图、下拉菜单、淡入...
个性网页作品展示单页网站模板
04-02
制作这样的单页网站模板时，设计师需要考虑响应式设计，确保模板在不同设备上都能良好显示。同时，优化加载速度和用户体验也非常重要，比如通过合理的图片压缩、代码优化等方式来提升网站性能。此外，考虑到SEO...
pixelArtMaker:单页网页艺术制作应用
05-09
像素艺术制作器（PixelArtMaker）是一个基于JavaScript、HTML和CSS构建的单页网页应用程序，专为创作像素艺术提供了一个直观且便捷的平台。在这个应用中，用户可以在浏览器上直接创作，无需安装任何桌面软件，体现了...
HTML-01.新浪新闻-标题-排版
程小白的博客
08-02 202
-- 编码字符集为UTF-8 -->-- 设置浏览器的兼容性 -->焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻-- 1.图片标签：src：指定图像的url（绝对路径/相对路径）width：图像的宽度 [像素（单位px）/相对于父元素（
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1414
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 324
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 896
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 383
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
【前端面试】五、框架
weixin_49015558的博客
07-31 508
1 Vue2 2 Vue3 3 React 4 Angular
electron 主进程和渲染进程
qq_21087199的博客
07-29 387
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2386
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端 axios 封装
清云
07-29 503
前端 axios 封装
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 731
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
前端代码混淆加密（使用Terser、WebpackObfuscator）
@Fonden
07-30 368
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
构建新闻网站的全面指南：网页制作与管理系统
"网页制作完全手册是一本详细指导如何创建新闻网站和大型文章网站的教程，主要使用Visual Studio和C#技术。该手册涵盖了从创建新闻中心栏目到灵活设置页面布局，以及会员系统、广告管理、在线编辑器和一系列辅助功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值