学成在线网页

最新推荐文章于 2022-05-25 22:13:41 发布

m0_62741969

最新推荐文章于 2022-05-25 22:13:41 发布

阅读量98

点赞数 1

文章标签： html css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_62741969/article/details/121961109

版权

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>学成在线-不是所有的网站都叫学成在线</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="header w">

<div class="logo">

<img src="images/logo.png" alt="">

</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="输入关键词">

<button></button>

</div>

<div class="user">

<img src="images/user.jpg" alt="">

lilei-hanmm

</div>

</div>

<div class="banner">

<div class="w">

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

<div class="course">

<div class="course-hd">

我的课程表

</div>

<div class="course-bd">

<ul>

<li>

<h4>继续学习，程序设计语言</h4>

<p>正在学习-使用对象</p>

</li>

<li>

<h4>继续学习，程序设计语言</h4>

<p>正在学习-使用对象</p>

</li>

<li>

<h4>继续学习，程序设计语言</h4>

<p>正在学习-使用对象</p>

</li>

</ul>

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

</div>

</div>

</div>

<div class="banner">

</div>

<div class="goods w">

<h3>精品推荐</h3>

<div class="goods-item">

| <a href="#">JQuery</a>

| <a href="#">Spark</a>

| <a href="#">MySQL</a>

| <a href="#">JavaWeb</a>

| <a href="#">HTML</a>

| <a href="#">CSS</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="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/images/pic.jpg" alt="">

<h4>Think PHP 5.0 博客系统实战项目演练</h4>

<p><span>高级</span> • 1125人在学习</p>

</li>

<li>

<img src="../demo/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="../demo/images/lo_07.png" alt="">

<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。

<br>

© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>

<a href="#">下载APP</a>

</div>

<div class="links">

<dl>

<dt>

关于学成网

</dt>

<dd>

关于

</dd>

<dd>

团队管理

</dd>

<dd>

关于

</dd>

<dd>

关于

</dd>

</dl>

<dl>

<dt>

关于学成网

</dt>

<dd>

关于

</dd>

<dd>

团队管理

</dd>

<dd>

关于

</dd>

<dd>

关于

</dd>

</dl>

<dl>

<dt>

关于学成网

</dt>

<dd>

关于

</dd>

<dd>

团队管理

</dd>

<dd>

关于

</dd>

<dd>

关于

</dd>

</dl>

</div>

</div>

</div>

</body>

</html>

CSS

/*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;

}

.course {
float: right;

margin-top: 50px;

width: 230px;

height: 300px;

background-color:#fff ;

}

.course-hd {
height: 48px;

line-height: 48px;

text-align: center;

background-color: #9bceea;

font-size: 18px;

color: #ffffff;

font-weight: 700;

}

.course-bd {
padding: 0 15px;

}

.course-bd ul {
padding-top: 10px;

}

.course-bd li {
height: 50px;

margin-top: 10px;

border-bottom: 1px solid #efefef;

}

.course-bd li h4 {
font-size: 16px;

color: #4e4e4e;

}

.course-bd li p {
font-size: 12px;

color: #a5a5a5;

}

.all {
display: block;

margin-top: 10px;

height: 38px;

line-height: 38px;

border: 1px solid #22b0ff;

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: 14px;

counter-reset: #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: 20px;

font-size: 14px;

color: #050505;

}

.box-bd p {
margin: 0 20px;

font-size: 14px;

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;

}

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学成在线网页

HTML<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>学成在线-不是所有的网站都叫学成在线</title><link rel="stylesheet" href="style.css"></head><body>&...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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