当前位置：网站首页>[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;
}
边栏推荐
- 隐私计算FATE-----离线预测
- Discussion on the practice of fire emergency lighting system in the field of building electrical design
- The Falling Leaves
- VMware Workstation related issues
- Sword finger offer 03 Duplicate number in array
- Tree
- High rise building fire prevention
- Loss loss function
- A - 深海探险
- Trailing Zeroes (II)
猜你喜欢
Webrtc advantages and module splitting
Kubernetes notes and the latest k3s installation introduction
Fire fighting work and measures in Higher Vocational Colleges
Almost union find (weighted union search)
Characteristics and prevention of electrical fire
罗氏线圈工作原理
What is the bandwidth of the Tiktok server that can be used by hundreds of millions of people at the same time?
webrtc优势与模块拆分
爱分析发布《2022爱分析 · IT运维厂商全景报告》 安超云强势入选！
WasmEdge 0.10.0 发布！全新的插件扩展机制、Socket API 增强、LLVM 14 支持
随机推荐
[go ~ 0 to 1] the third day June 27 slice, map and function
Almost Union-Find（带权并查集）
Explain observer mode
Cloudcompare & PCL point cloud SVD decomposition
Wasmedge 0.10.0 release! New plug-in extension mechanism, socket API enhancement, llvm 14 support
Idea related issues
Copy ＆ Deepcopy
Tree
Force buckle 1884 Egg drop - two eggs
Three body attack (three-dimensional split plus two points)
The Falling Leaves
Container adapter - stack: stack queue: queue priority_ Queue: priority queue
Avframe Memory Management API
centos mysql5.5配置文件在哪
MATLAB小技巧（20）矩阵分析--主成分回归
Super Jumping! Jumping! Jumping!
[go ~ 0 to 1] the next day, June 25, switch statement, array declaration and traversal
Build an integrated kubernetes in Fedora
Fire safety hazards
webrtc优势与模块拆分