模仿学成网-页面代码-2021 06 02

最新推荐文章于 2023-05-31 14:20:33 发布

@依米

最新推荐文章于 2023-05-31 14:20:33 发布

阅读量190

点赞数

文章标签： css html5 css3

本文链接：https://blog.csdn.net/qq_43617294/article/details/117487734

版权

第一次写博客，自学了几天的h5和css样式，尝试做了学成在线案例，虽然不是特别完善，但毕竟是自己的努力成果，希望通过博客可以与大家一起学习，同时想要学成网案例的psd文件同仁可以联系我。下面附上效果图和代码

<!DOCTYPE html>

<head>

<title>学成网在线</title>

</head>

<body>

</div>

<!-- 实际开发中，不会直接用链接a而是用li 包含(li+a)的做法

因为直接用a搜索引擎容易辨别为由堆砌字嫌疑影响网站排名 -->

<ul>

</ul>

</div>

</div>

qq-lilie

</div>

<ul>

</ul>

</div>

<h2>我的课程表</h2>

<ul>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

</ul>

</div>

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

</div>

</div>

<li>

<div>

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

</div>

</li>

<li>

<div>

<h3>Android 网络图片加载框架详解 </h3>

</div>

</li>

<li>

<div>

<h3>Angular 2 最新框架+主流技术+项目实战 </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！</h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

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

</div>

</li>

<li>

<div>

<h3>Android 网络图片加载框架详解 </h3>

</div>

</li>

<li>

<div>

<h3>Angular 2 最新框架+主流技术+项目实战 </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

</ul>

</div>

<ul>

</ul>

</div>

<h3>PHP入门</h3>

<h3>基础语法到实际运用</h3>

<h5><img src="images/椭圆5拷贝2.png" alt="">零基础入门：语法与界</h5>

<h5><img src="images/椭圆5拷贝2.png" alt="">进阶：网络与数据缓存 </h5>

<h5><img src="images/椭圆5拷贝2.png" alt="">界面到数据存储 </h5>

</div>

</div>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

<h3>Cocos2d-x 引擎源码中的纹理优化</h3>

</div>

</li>

</ul>

</div>

<h3>数据分析师</h3>

<ul>

</ul>

</div>

<h3>PHP入门</h3>

<h3>基础语法到实际运用</h3>

<h5><img src="images/椭圆5拷贝2.png" alt="">零基础入门：语法与界</h5>

<h5><img src="images/椭圆5拷贝2.png" alt="">进阶：网络与数据缓存 </h5>

<h5><img src="images/椭圆5拷贝2.png" alt="">界面到数据存储 </h5>

</div>

</div>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

<li>

<div>

<h3>Cocos2d-x 引擎源码中的纹理优化</h3>

</div>

</li>

</ul>

</div>

<h3>机器学习工程师</h3>

<ul>

</ul>

</div>

<li>

<div>

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

</div>

</li>

<li>

<div>

<h3>Android 网络图片加载框架详解 </h3>

</div>

</li>

<li>

<div>

<h3>Angular 2 最新框架+主流技术+项目实战 </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！</h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

</ul>

</div>

<h3>前端开发工程师</h3>

<ul>

</ul>

</div>

<li>

<div>

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

</div>

</li>

<li>

<div>

<h3>Android 网络图片加载框架详解 </h3>

</div>

</li>

<li>

<div>

<h3>Angular 2 最新框架+主流技术+项目实战 </h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！</h3>

</div>

</li>

<li>

<div>

<h3>Android Hybrid APP开发实战 H5+原生！ </h3>

</div>

</li>

</ul>

</div>

</div>

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

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

</div>

<dl>

<dt>关于学成网</dt>

</dl>

<dl>

<dt>关于学成网</dt>

</dl>

<dl>

<dt>关于学成网</dt>

</dl>

</div>

</body>

</html>

-----------

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

a {

text-decoration: none;

}

.clearfix:before,

.clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

/* 定义公共类 */

.w {

width: 1200px;

margin: auto;

}

body {

background-color: #f3f5f7;

height: 3000px;

}

.header {

height: 42px;

/* 此处会层叠w里margin */

margin: 30px auto;

}

.logo {

float: left;

width: 198px;

height: 42px;

}

.nav {

float: left;

margin-left: 60px;

}

.nav ul li {

float: left;

margin: 0 15px;

}

.nav ul li a {

display: block;

height: 42px;

padding: 0 10px;

line-height: 42px;

font-size: 18px;

color: #050505;

}

.nav ul li a:hover {

border-bottom: 2px solid #00a4ff;

color: #00a4ff;

}

/* search搜索模块 */

.search {

float: left;

width: 412px;

height: 42px;

margin-left: 70px;

}

.search input {

float: left;

width: 345px;

height: 40px;

border: 1px solid #00a4ff;

color: #bfbfbf;

font-size: 14px;

padding-left: 15px;

}

.search button {

float: left;

width: 50px;

height: 42px;

background: url(images/btn.png);

/* 按钮button默认有个边框需要手动去掉 */

border: 0;

}

.user {

float: right;

line-height: 42px;

margin-right: 30px;

font-size: 14px;

color: #666;

}

.banner {

height: 420px;

background-color: #1c036c;

}

.banner .w {

height: 421px;

background: url(images/banner2.png) no-repeat top center;

}

.subnav {

float: left;

width: 190px;

height: 421px;

background: rgba(0, 0, 0, 0.3);

}

.subnav ul li a {

font-size: 14px;

color: #fff;

}

.subnav ul li {

height: 45px;

line-height: 45px;

padding: 0 20px;

}

.subnav ul li a span {

float: right;

}

.subnav ul li a:hover {

color: #00a4ff;

}

.course {

float: right;

width: 230px;

height: 310px;

background-color: white;

/* 不会塌陷浮动的盒子不会有外边距合并的问题 */

margin-top: 50px;

}

.course h2 {

height: 48px;

background-color: #9bceea;

text-align: center;

line-height: 48px;

font-size: 18px;

color: #fff;

}

.bd {

padding: 0 20px;

}

.bd ul li {

padding: 14px 0;

border-bottom: 1px solid #ccc;

}

.bd ul li h4 {

font-size: 16px;

color: #4e4e4e;

}

.bd ul li p {

font-size: 14px;

color: #a5a5a5;

}

.bd .more {

display: block;

height: 38px;

border: 1px solid #00a4ff;

margin-top: 5px;

text-align: center;

line-height: 38px;

color: #00a4ff;

font-size: 16px;

font-weight: 700;

}

/* 精品推荐模块 */

.goods {

height: 60px;

background-color: #fff;

box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

margin-top: 10px;

/* 行高会继承给三个孩子 */

line-height: 60px;

}

.goods h3 {

float: left;

margin-left: 30px;

font-size: 16px;

color: #00a4ff;

}

.goods ul {

float: left;

margin-left: 30px;

}

.goods ul li {

float: left;

}

.goods ul li a {

padding: 0 30px;

font-size: 16px;

color: #050505;

border-left: 1px solid #ccc;

}

.mod {

float: right;

margin-right: 30px;

font-size: 14px;

color: #00a4ff;

}

.box {

margin-top: 30px;

}

.box-hd {

height: 45px;

}

.box-hd h3 {

float: left;

font-size: 20px;

color: #494949;

}

.box-hd a {

display: block;

float: right;

font-size: 12px;

color: #a5a5a5;

margin-top: 10px;

margin-right: 30px;

}

.box-bd ul {

/* 给父亲指定大点的宽度 */

width: 1225px;

}

.box-bd ul li {

float: left;

width: 228px;

height: 270px;

margin-right: 15px;

margin-bottom: 15px;

background-color: #ffffff

}

.box-bd ul li img {

width: 100%;

}

.box-bd h3 {

float: left;

margin-top: 24px;

margin-left: 23px;

margin-right: 20px;

margin-bottom: 10px;

font-size: 14px;

color: #494949;

}

.box-bd ul li p {

display: inline;

padding-left: 23px;

font-size: 12px;

color: #ff7c2d;

}

.box-bd ul li span {

padding-left: 10px;

font-size: 12px;

color: #999999;

}

.box-hd ul {

float: left;

margin-left: 270px;

}

.box-hd ul li {

float: left;

}

.box-hd ul li a {

float: left;

font-size: 16px;

color: #999999;

padding-right: 70px;

/* margin-top: 10px; */

}

.box-hd ul li a:hover {

color: #00a4ff;

}

.Enter {

/* float: left; */

width: 1210px;

height: 390px;

margin-top: 20px;

margin-bottom: 15px;

}

.lef {

float: left;

height: 390px;

width: 228px;

background-color: #757779;

margin-right: 15px;

}

.lef img {

padding-right: 5px;

}

.lef h3 {

font-size: 18px;

line-height: 15px;

color: #ffffff;

padding-left: 5px;

}

.lef h3:nth-child(2) {

padding-top: -10px;

padding-bottom: 30px;

}

.lef h5 {

float: left;

font-size: 14px;

line-height: 15px;

color: #ffffff;

padding-left: 35px;

padding-right: 3px;

padding-bottom: 60px;

}

.Enter_Top {

float: left;

height: 100px;

width: 958px;

margin-bottom: 25px;

}

.Enter_Top img {

width: 100%;

}

.Analy {

float: left;

width: 1210px;

height: 390px;

margin-top: 15px;

}

.QianDan {

/* float: left; */

width: 1225px;

height: 390px;

margin-top: 20px;

margin-bottom: -100px;

}

.footer {

height: 415px;

}

.footer .w {

padding-top: 35px;

}

.copyright {

float: left;

}

.links {

float: right;

}

.copyright p {

font-size: 12px;

color: #666;

margin: 20px 0 15px 0;

}

.copyright .app {

display: block;

text-align: center;

color: #00a4ff;

width: 118px;

height: 33px;

font-size: 16px;

line-height: 33px;

border: 1px solid #00a4ff;

}

.links dl {

float: left;

margin-left: 100px;

}

.links dl dt {

font-size: 16px;

color: #333;

margin-bottom: 5px;

}

.links dl dd a {

font-size: 12px;

color: #333;

}

@依米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
模仿学成网-页面代码-2021 06 02

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>学成网在线</title><linkrel="stylesheet"href="st...
复制链接

扫一扫