html源码（html+css）

最新推荐文章于 2024-03-29 10:35:08 发布
最新推荐文章于 2024-03-29 10:35:08 发布
阅读量3.3w 收藏 48
点赞数 13
文章标签： html css html5 css3 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53127626/article/details/110846307
版权

学成在线

示例图

在这里插入图片描述
在这里插入图片描述

index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学成在线</title>
		<link rel="stylesheet" type="text/css" href="css.css"/>
	</head>
	<body>
		<div class="header">
			<div class="logo">
				<img src="images/logo.png" >
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">课程</a></li>
					<li><a href="#">职业规划</a></li>
				</ul>
			</div>
			<div class="search">
				<input type="text" value="输入关键词"/ style="outline: none;">
				<button type="button"></button>
			</div>
			<div class="user">
				<img src="images/user.png" style="vertical-align: middle;" >
				尼古拉斯~宇
			</div>
		</div>
	<div class="banner">
		<div class="banner-o">
			<div class="subnav">
				<ul>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">后端开发<span>&gt;</span></a></li>
					<li><a href="#">移动开发<span>&gt;</span></a></li>
					<li><a href="#">人工智能<span>&gt;</span></a></li>
					<li><a href="#">商业预测<span>&gt;</span></a></li>
					<li><a href="#">云计算&大数据<span>&gt;</span></a></li>
					<li><a href="#">运维&从测试<span>&gt;</span></a></li>
					<li><a href="#">UI设计<span>&gt;</span></a></li>
					<li><a href="#">产品<span>&gt;</span></a></li>
				</ul>
			</div>
			<div class="course">
				<h2>我的课程表</h2>
				<div class="course-o">
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
					</ul>
					<a href="#" class="more">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<div class="shoping">
		<h3>精品推荐 </h3>
		<ul>
			<li><a href="#">JQuery</a></li>
			<li><a href="#">Spark  </a></li>
			<li><a href="#">MySQL</a></li>
			<li><a href="#">JavaWeb </a></li>
			<li><a href="#"> MySQL</a></li>
			<li><a href="#"> JavaWeb </a></li>
		</ul>
		<a href="#" class="shoping-o">修改兴趣  </a>                                                                                   
	</div>
	<div class="box">
		<div class="box-head">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<div class="box-body">
			<ul>
				<li> 
				<em><img src="images/hot.png" ></em>
				<img src="images/pic1.png"  class="img">
				<h3>Think PHP 5.0 博客系统实战项目演练</h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div>
				</li>
				<li><em><img src="images/new.png" ></em><img src="images/pic2.png" class="img">
				<h3>Android 网络图片加载框架详解 </h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><img src="images/pic3.png" class="img">
				<h3>Angular 2 最新框架+主流技术+项目实战  </h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><img src="images/pic45.png" class="img">
				<h3>Android Hybrid APP开发实战 H5+原生！</h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><img src="images/pic45.png" class="img">
				<h3>Android Hybrid APP开发实战 H5+原生！ </h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><em><img src="images/hot.png" ></em><img src="images/pic1.png" class="img">
				<h3>Think PHP 5.0 博客系统实战项目演练</h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><em><img src="images/new.png" ></em><img src="images/pic2.png" class="img">
				<h3>Android 网络图片加载框架详解 </h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><img src="images/pic3.png" class="img">
				<h3>Angular 2 最新框架+主流技术+项目实战  </h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><img src="images/pic45.png"class="img" >
				<h3>Android Hybrid APP开发实战 H5+原生！</h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
				<li><img src="images/pic45.png" class="img">
				<h3>Android Hybrid APP开发实战 H5+原生！ </h3>
				<div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
			</ul>
		</div>
	</div>
	<div class="clear"></div>
	
	
	<div class="footer">
		  <div class="footer-o">
			<div class="footer-o-left"><img src="images/logo.png" >
			<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
			<a href="#" class="footer-o-left-app">下载APP</a>
			</div>
			<div class="footer-o-right">
				<dl>
					<dt>关于学成网</dt>
					<dd>关于</dd>
					<dd>管理团队</dd>
					<dd>工作机会</dd>
					<dd>客户服务</dd>
					<dd>帮助</dd>
				</dl>
				<dl>
					<dt>新手指南</dt>
					<dd>如何注册</dd>
					<dd>如何选课</dd>
					<dd>如何拿到毕业证</dd>
					<dd>学分是什么</dd>
					<dd>考试未通过怎么办</dd>
				</dl>
				<dl>
					<dt>合作伙伴</dt>
					<dd>合作机构</dd>
					<dd>合作导师</dd>
				</dl>
			</div>
		  </div>
	</div>
	<div class="fix">
		<img src="images/left.png" >
	</div>
	</body>
</html>
css.css
* {
	margin: 0;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}
body {
	background-color: #f3f5f7;
}
a {
	text-decoration: none;
}
.header {
	width: 1200px;
	height: 42px;
	margin: 30px auto;
}
.logo {
	width: 197px;
	height: 42px;
	float: left;
}
.nav ul li a {
	text-decoration: none;
	padding: 0 10px;
	height: 42px;
	display: block;
	line-height: 42px;
	font-size: 18px;
	color: #050505;
	font-family: 微软雅黑;
}
li {
	list-style: none;
}
.nav {
	height:  42px;
	float: left;
	margin-left: 80px;
}
.nav ul li {
	float: left;
	margin: 0 15px;
}
.nav ul li a:hover {
   border-bottom: 2px solid #00a4ff;	
   color: #00a4ff;
}
.search {
	width: 412px;
	height: 42px;
	float: left;
	margin-left: 50px;
}
.search input {
	float: left;
	width: 345px;
	height: 40px;
	border: 1px solid #00A4FF;
	border-right: 0px;
	font-size: 14px;
	font-family: 微软雅黑;
	color: #bfbfbf;
	padding-left: 15px;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background:url(images/search.png);
	border: 0;
}
.user  {
	font-size: 14px;
	color: #666666;
	float: right;
	line-height: 42px;
	margin-right: 30px;
}
.banner {
	height: 420px;
	background-color: #1c036c;
}
.banner-o {
	width: 1200px;
	height: 420px;
	margin: 0 auto;
	background: url(images/banner2.png);
	background-repeat: no-repeat;
	background-position: top center;
}
.subnav {
	width: 190px;
	height: 420px;
	background: rgba(0,0,0,0.3);
	float: left;
}
.subnav ul li a {
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
}
.subnav ul li {
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
}
.subnav ul li a span {
	float: right;
}
.subnav ul li a:hover{
	color: #00b4ff;
}
.course {
	width: 230px;
	height: 300px;
	float: right;
	background-color: #ffffff;
	margin-top: 50px;
}
.course h2 {
	width: 230px;
	height: 48px;
	line-height: 48px;
	color:#ffffff;
	text-align: center;
	font-size: 18px;
	background-color: #9bceea;
}
.course-o {
	padding: 0 20px;
}
.course-o ul li {
	padding: 15px 0;
	border-bottom: 1px solid #a5a5a5;
}
.course-o ul li h4 {
	font-size: 16px;
	color: #4e4e4e;
	}
.course-o ul li p {
	font-size: 12px;
	color: #a5a5a5;
}
.course-o .more{
	display: block;
	color: #00a4ff;
	border: 1px solid #00a4ff;
	height: 40px;
	font-size: 16px;
	text-align: center;
	line-height: 40px;
	margin-top: 3px;
	font-weight: 700;
}
.shoping {
	height: 60px;
	width: 1200px;
	background-color: #ffffff;
	margin: 10px auto;
	box-shadow: 0px 2px 3px 3px rgba(0,0,0,0.1);
	line-height: 60px;
}
.shoping h3{
	margin-left: 30px;
	float: left;
	font-size: 16px;
	color: #00a4ff;
}
.shoping ul li a {
	float: left;
	padding: 0 30px;
	font-size: 16px;
	color: #050505;
}
.shoping .shoping-o{
	margin-right: 30px;
	float: right;
	font-size: 14px;
	color: #00a4ff;
	}
.box {
	width: 1200px;
	margin: 34px auto;
}
.box-head {
	height: 40px;
	
	}
	.box-head h3{
	font-size: 20px;
	color: #494949;
	line-height: 34px;
	float: left;
	}
.box-head a {
	font-size: 12px;
	color: #a5a5a5;
	float: right;
	line-height: 34px;
	padding-right: 30px;
}
.box-body ul {
	width: 1225px;
}
.box-body ul li {
	width: 228px;
	height: 270px;
	float: left;
	background-color: #ffffff;
	margin-right:15px ;
	margin-bottom: 15px;
}
.box-body ul li {
	position: relative;
}
.box-body ul li .img {
	width: 100%;
}
.box-body ul li h3 {
	font-size: 14px;
	color: #050505;
	margin: 25px 20px 15px 25px;
}
.box-body ul .box-body-div{
	font-size: 12px;
	color: #999999;
	margin-left: 25px;
}
.box-body ul .box-body-div span{
	color: #ff7c2d;
}
.box-body ul li em img{
	position: absolute;
	top: 4px;
	right: -4px;
}
.footer {
	height: 417px;
}
.clear {
	clear: both;
}
.footer-o {
	width: 1200px;
	margin: 0 auto;
	padding-top: 35px;
}
.footer-o-left{
	float: left;
}
.footer-o-right {
	float: right;
}
.footer-o-left p {
	font-size: 12px;
	color: #666666;
	margin: 20px 0px 15px 0px;
}
.footer-o-left-app {
	display: block;
	font-size: 16px;
	color: #00a4ff;
	border: 1px solid #00a4ff;
	width: 120px;
	height: 35px;
	line-height: 35px;
	text-align: center;
}
dl {
	float: left;
}
.footer-o-right dt {
	font-size: 16px;
	color: #333333;
	margin-bottom: 15px;
}
.footer-o-right dd {
	font-size: 12px;
	color: #333333;
	padding-bottom: 5px;
}
.footer-o-right dl {
	margin-left: 150px;
}

.fix {
	position: fixed;
	top: 550px;
	left: 20px;
}
源码下载地址：

公众号：奇遇少年
回复：web
在这里插入图片描述

奇遇少年
关注
  • 13
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
简单网页HTML5源代码
2301_76496802的博客
06-12 3541
简单网页HTML5源代码。
【html】简单网页模板源码
weixin_56334307的博客
06-07 637
大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用，大家也可以利用自己的想法去做空间的美化和完善。
学成在线网站首页制作
07-31
使用HTML和CSS完成的学成在线网站首页案例，压缩包中附有完成制作所需要的图片素材，代码大概1000多行，适合初学者练手。
HTML语言源代码实例
qq_38220914的博客
10-29 3651
HTML语言源代码实例
分享66个HTML&CSS源码，总有一款适合您
zy0412326的专栏
01-15 4905
html
HTML源码大放送1
分享编程技术，让编程的世界没有孤岛。
06-19 5166
HTML源码大放送1
HTML+css3个人博客html源码
weixin_44201095的博客
11-24 2828
HTML+css3个人博客html源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="t
学成在线前端html+css源码
nuomi_w的博客
11-11 399
html部分： <!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" /&gt...
HTML+CSS作业静态页面源码
12-17
在“HTML+CSS作业静态页面源码”中，我们可以期待看到一系列使用HTML和CSS编写的网页文件。这些源码可能是为了教学目的或个人项目而创建的，展示了如何使用这两种技术来构建静态网页。静态页面意味着它们不包含...
HTML+CSS+JavaScript实现登录注册源码
05-31
HTML、CSS和JavaScript是网页开发的三大核心技术，它们共同构建了网页的结构、样式和交互功能。本资源提供了使用这三种技术实现的登录注册源码，对于初学者或希望提升前端技能的开发者来说，这是一个非常实用的学习...
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
HTML+CSS+JS实现的下拉菜单源码
最新发布
07-02
HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单...
HTML+CSS+DIV网页设计源码.zip
06-20
HTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML...
学成在线首页静态页面（HTML+CSS）
m0_68259809的博客
07-11 2659
本文主要介绍学成在线首页静态页面的制作。
制作一个简单HTML中华传统文化网页设计源码（HTML+CSS）
网页设计与制作
03-29 2234
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 3万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
CSS静态网页制作
weixin_42280470的博客
11-10 1225
效果如图所示 css代码如下 * { padding: 0; margin: 0; } body { background-color: #f3f5f7; } a { text-decoration: none; } li { list-style: none; } .w { width: 1200px; margin: 0 auto; } .header { margin: 50px auto; height: 40px; text-align: center; } .cle
36个精美完整网站网页完整源码HTML+CSS+JS
热门推荐
叶绿体不忘呼吸
07-13 4万+
如果有搭建网站的需要，可以考虑使用云产品，而云产品现在比较推荐腾讯的，感兴趣的可以看看，现在有很多优惠https://curl.qcloud.com/CURGxRiw微信公众号：创享日记 发送：36 获取全部完整源码（打开.html文件均即可用） 以下列举前9个效果图，源码详见微信公众号下载①效果图 ②效果图 ③效果图 ④效果图 ⑤效果图 ⑥效果图 ⑦效果图 ⑧效果图 ⑨效果图
html的基础网页代码源（超基础）
2301_76565425的博客
03-28 3577
网页基础版纯手写
HTML与CSS入门指南：实战源码解析
书中提供的源码实践是学习过程中不可或缺的一部分，通过实际操作，读者可以更好地理解HTML和CSS如何协同工作，创建出功能完备、美观的网页。这些源码可以作为实例，帮助读者解决实际项目中的问题，提升技能。 此外...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

奇遇少年

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

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

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

打赏作者

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

抵扣说明：

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

余额充值