当前位置：网站首页>[big case] Xuecheng online website
[big case] Xuecheng online website
2022-06-28 08:49:00 【Dazed girl】
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title> Learning online </title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<!-- Page header -->
<div class="header w">
<!-- Webpage logo -->
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<!-- Short navigation bar -->
<div class="nav">
<ul>
<li><a href="#"> home page </a></li>
<li><a href="#"> Course </a></li>
<li class="lastnav"><a href="#"> Occupation planning </a></li>
</ul>
</div>
<div class="search">
<input class="search_box" type="text" placeholder=" Enter keywords ">
<button class="search_button"></button>
</div>
<!-- Login user avatar information -->
<div class="user">
<div class="portrait"></div>
<div class="username">alibabbabababaababa</div>
</div>
</div>
<!-- banner Banner section -->
<div class="banner">
<!-- Shuffling figure -->
<div class="rotation_chart w">
<!-- Left navigation bar -->
<div class="left_nav">
<ul>
<li><a href="#"> The front-end development <span>></span></a></li>
<li><a href="#"> The backend development <span>></span></a></li>
<li><a href="#"> Mobile development <span>></span></a></li>
<li><a href="#"> Artificial intelligence <span>></span></a></li>
<li><a href="#"> Business Forecast <span>></span></a></li>
<li><a href="#"> Cloud computing & big data <span>></span></a></li>
<li><a href="#"> Operation and maintenance & From testing <span>></span></a></li>
<li><a href="#">UI Design <span>></span></a></li>
<li><a href="#"> product <span>></span></a></li>
</ul>
</div>
<!-- My schedule on the right -->
<div class="course">
<h3> My curriculum </h3>
<!-- Course content -->
<div class="course_content">
<ul>
<li>
<a href="#">
<h4> Continue to learn <span> Programming language design </span></h4>
<p> Is learning - Use object </p>
</a>
</li>
<li>
<a href="#">
<h4> Continue to learn <span> Programming language design </span></h4>
<p> Is learning - Use object </p>
</a>
</li>
<li>
<a href="#">
<h4> Continue to learn <span> Programming language design </span></h4>
<p> Is learning - Use object </p>
</a>
</li>
</ul>
</div>
<!-- All course buttons -->
<div class="all_course">
<a href="#"> All courses </a>
</div>
</div>
</div>
</div>
<!-- Boutique recommendation module -->
<div class="goods w">
<h3> Excellent recommendation </h3>
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Pyhon</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Java</a></li>
</ul>
<a href="#"> Modify interest </a>
</div>
<!-- The main contents of boutique recommendation -->
<!-- title -->
<div class="goods_title w">
<h3> Excellent recommendation </h3>
<a href="#"> Check all </a>
</div>
<!-- Content -->
<!-- goods_content Do not set height , It is convenient to join the course later , But you need to clear the float to ensure the layout -->
<div class="goods_content w clearfix">
<ul>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
<li>
<a href="#">
<img src="./images/good.png" alt="">
<h4>Think PHP 5.0 Blog system actual combat project drill </h4>
<p><span> senior </span> • 1125 People are learning </p>
</a>
</li>
</ul>
</div>
<!-- At the bottom of the page -->
<div class="footer">
<div class="w clearfix">
<!-- left -->
<div class="copyright">
<img src="./images/logo.png" alt="">
<p>
Xuecheng online is committed to popularizing the best education in China. It cooperates with China's top universities and institutions to provide online courses .<br>
2017 year XTCG Inc. All rights reserved .- Shanghai ICP To prepare 15025210 Number
</p>
<a href="#"> download APP</a>
</div>
<!-- On the right side -->
<dl>
<dt> partners </dt>
<dd><a href="#"> Partner organization </a></dd>
<dd><a href="#"> Co mentors </a></dd>
</dl>
<dl>
<dt> Novice guide </dt>
<dd><a href="#"> How to sign up </a></dd>
<dd><a href="#"> How to choose courses </a></dd>
<dd><a href="#"> How to get a diploma </a></dd>
<dd><a href="#"> What are the credits </a></dd>
<dd><a href="#"> What if you fail in the exam </a></dd>
</dl>
<dl>
<dt> About xuecheng.com </dt>
<dd><a href="#"> About </a></dd>
<dd><a href="#"> Management team </a></dd>
<dd><a href="#"> Job opportunities </a></dd>
<dd><a href="#"> Customer service </a></dd>
<dd><a href="#"> help </a></dd>
</dl>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei';
}
body {
background-color: #f3f5f7;
}
/* Remove the floating */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* For compatibility IE6 and IE7 */
*zoom: 1;
}
/* Set the page Center */
.w {
width: 1200px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input:focus {
/* Cancel the border style added after the text box gets the focus */
outline: none;
}
/* -- The whole head -- */
.header {
height: 42px;
margin: 30px auto;
/* background-color: pink; */
}
/* -- Webpage logo-- */
.logo {
float: left;
width: 200px;
height: 42px;
/* background-color: blue; */
}
/* -- Small navigation bar -- */
.nav {
float: left;
/* You can navigate without setting the width , Add content after convenience . */
height: 42px;
margin-left: 70px;
/* background-color: yellow; */
}
.nav ul li {
float: left;
font-size: 18px;
color: #050505;
margin-right: 30px;
}
.nav ul .lastnav {
margin-right: 0;
}
.nav ul li a {
display: block;
height: 40px;
padding: 0 8px;
line-height: 42px;
color: #252525;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/* -- Search bar -- */
.search {
float: left;
height: 42px;
margin-left: 85px;
/* background-color: white; */
}
.search .search_box {
/* Floating clears the gap between block elements in a row */
float: left;
width: 338px;
height: 40px;
padding-left: 20px;
border: 1px solid #00a4ff;
}
.search input:focus {
/* The text box gets the cursor and changes the border color */
border: 1px solid blue;
}
.search .search_button {
/* Floating clears the gap between block elements in a row */
float: left;
width: 50px;
height: 42px;
border: none;
background-image: url(./images/search.png);
/* Mouse over button When they become small hands */
cursor: pointer;
}
/* -- Login user avatar information -- */
.user {
float: left;
height: 42px;
margin-left: 30px;
}
.user .portrait {
float: left;
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 6px;
/* background-color: red; */
background-image: url(./images/user.png);
}
.user .username {
float: left;
width: 105px;
height: 42px;
padding-left: 10px;
line-height: 42px;
color: #666666;
font-size: 14px;
/* More than one line of three dots is displayed */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --banner part -- */
.banner {
height: 420px;
background-color: #1c036c;
}
/* Shuffling figure */
.rotation_chart {
/* There is no continuous broadcasting effect , I haven't learned yet ... */
height: 420px;
background: url(images/banner.png) no-repeat;
}
/* Left navigation bar */
.left_nav {
float: left;
width: 190px;
height: 420px;
/* Translucent background color */
background-color: rgba(0, 0, 0, 0.4);
}
.left_nav ul {
padding: 12px 0;
}
.left_nav ul li a {
display: block;
height: 44px;
padding: 0 20px;
color: #ffffff;
font-size: 14px;
line-height: 44px;
}
.left_nav ul li a:hover {
color: #00b4ff;
}
.left_nav ul li a span {
/* The small arrow floats right */
float: right;
/* If it is implemented with pictures, it seems that js Talent , I haven't learned yet , First use > Instead of implementation ... */
/* width: 5px; */
/* height: 44px; */
/* background: url(./images/white.png) no-repeat center; */
}
/* My schedule on the right */
.course {
float: right;
width: 230px;
height: 300px;
margin-top: 50px;
}
/* title */
.course h3 {
height: 50px;
background-color: #9bceea;
font-size: 18px;
color: #ffffff;
line-height: 50px;
text-align: center;
}
/* Course content */
.course .course_content {
height: 195px;
padding: 0 20px;
background-color: #fff;
}
.course .course_content ul li a {
display: block;
height: 34px;
padding: 15px 0;
border-bottom: 1px solid #efefef;
}
.course .course_content ul li a h4 {
font-size: 14px;
font-weight: 400;
color: #5a5a5a;
}
.course .course_content ul li a h4 span {
font-size: 13px;
}
.course .course_content ul li a p {
font-size: 12px;
color: #bdbdbd;
}
/* All course buttons */
.course .all_course {
height: 45px;
padding: 5px 20px;
background-color: #fff;
}
.course .all_course a {
display: block;
height: 38px;
border: 1px solid #22b0ff;
font-size: 16px;
color: #00a4ff;
font-weight: 700;
line-height: 38px;
text-align: center;
}
/* -- Boutique recommendation module -- */
.goods {
height: 60px;
margin-top: 10px;
/* Horizontal shadow position Vertical shadow position A fuzzy distance Shadow size */
box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.goods h3 {
float: left;
width: 130px;
height: 100%;
font-size: 16px;
text-align: center;
color: #00a4ff;
line-height: 60px;
}
.goods ul {
float: left;
margin-top: 20px;
}
.goods ul li {
float: left;
}
.goods ul li a {
display: block;
padding: 0 34px;
border-left: 1px solid #bfbfbf;
font-style: 16px;
color: #050505;
}
.goods>a {
float: right;
margin-right: 30px;
margin-top: 20px;
font-size: 14px;
color: #00a4ff;
}
/* -- The main contents of boutique recommendation --*/
.goods_title {
height: 40px;
margin-top: 35px;
}
.goods_title h3 {
float: left;
font-size: 20px;
color: #494949;
font-weight: 400;
}
.goods_title a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 12px;
color: #a5a5a5;
}
.goods_content ul {
/* change ul Width , So as to accommodate the inside , With right outer margin li*/
width: 1215px;
}
.goods_content ul li {
float: left;
width: 228px;
height: 270px;
margin-right: 15px;
margin-bottom: 10px;
background-color: #fff;
}
.goods_content ul li a {
display: block;
width: 100%;
height: 100%;
}
.goods_content ul li a img {
width: 100%;
height: 150px;
/* Remove the remaining white at the bottom of the picture */
vertical-align: top;
/* img For inline block elements , Therefore use display：block You can also remove the remaining white */
}
.goods_content ul li a h4 {
font-size: 14px;
font-weight: 400;
padding: 20px 20px 20px 25px;
color: #050505;
}
.goods_content ul li a p {
padding-left: 25px;
font-size: 12px;
color: #999999;
}
.goods_content ul li a span {
color: #ff7c2d;
}
/* At the bottom of the page */
.footer {
height: 420px;
margin-top: 30px;
background-color: #fff;
}
.footer .w {
width: 1150px;
padding: 35px 30px 0 20px;
}
.footer .copyright {
float: left;
}
.footer .copyright img {
/* eliminate img The white space of the block element label in the row */
display: block;
}
.footer .copyright p {
padding-top: 25px;
font-size: 12px;
color: #666666;
}
.footer .copyright a {
display: block;
width: 113px;
height: 33px;
border: 1px solid #00a4ff;
margin-top: 15px;
line-height: 33px;
text-align: center;
font-size: 16px;
color: #00a4ff;
}
.footer dl {
float: right;
margin-left: 120px;
}
.footer dl dt {
padding-bottom: 15px;
font-size: 16px;
color: #333333;
}
.footer dl dd a {
font-size: 12px;
color: #333333;
}
边栏推荐
猜你喜欢
887. egg drop
Love analysis released the 2022 love analysis · it operation and maintenance manufacturer panorama report, and an Chao cloud was strongly selected!
Characteristics and prevention of electrical fire
WasmEdge 0.10.0 发布！全新的插件扩展机制、Socket API 增强、LLVM 14 支持
与普通探头相比，差分探头有哪些优点
Mysql8.0 forgot the root password
![Dell r730 server startup error: [xxx] USB 1-1-port4: disabled by hub (EMI?), re-enabling...](/img/90/425965ca4b3df3656ce2a5f4230c4b.jpg)
Dell r730 server startup error: [xxx] USB 1-1-port4: disabled by hub (EMI?), re-enabling...
Matlab tips (20) matrix analysis -- principal component regression
Application of current limiting protector in preventing electrical fire in shopping malls
【.NET6】gRPC服务端和客户端开发案例，以及minimal API服务、gRPC服务和传统webapi服务的访问效率大对决
随机推荐
CloudCompare＆PCL 点云裁剪（基于封闭曲面或多边形）
抖音服務器帶寬有多大，才能供上億人同時刷？
Integer partition
How to solve the problem of high concurrency and seckill
What are the advantages of a differential probe over a conventional probe
中金财富开户安全吗？怎么收费？
为什么函数模板没有偏特化？
temple
电子元器件销售ERP管理系统哪个比较好？
Ffmpeg (I) AV_ register_ all()
Anniversary party
Map. ToCharArray( ),Map. getOrDefault(). Map. charAt()
ffmpeg推流报错Failed to update header with correct duration.
How do individuals open accounts to speculate in stocks? Is online account opening safe?
实现全局双指长按返回桌面
webrtc优势与模块拆分
Build the first neural network with pytoch and optimize it
Explain observer mode
FatMouse and Cheese
Kubernetes notes and the latest k3s installation introduction