当前位置:网站首页>[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;
}
边栏推荐
- Explain observer mode
- 40多岁的人如何配置年金险?哪款产品比较合适?
- Where is CentOS mysql5.5 configuration file
- Superimposed ladder diagram and line diagram and merged line diagram and needle diagram
- Almost union find (weighted union search)
- Which is a better ERP management system for electronic component sales?
- Lilda low code data large screen, leveling the threshold of data application development
- 【Go ~ 0到1 】 第三天 6月27 slice,map 与 函数
- 找合适的PMP机构只需2步搞定,一查二问
- Basic twelve style classes for duilib
猜你喜欢
与普通探头相比,差分探头有哪些优点
Construire le premier réseau neuronal avec pytorch et optimiser
Solution: selenium common. exceptions. WebDriverException: Message: ‘chromedriver‘ execu
Infinite penetration test
【.NET6】gRPC服务端和客户端开发案例,以及minimal API服务、gRPC服务和传统webapi服务的访问效率大对决
Build an integrated kubernetes in Fedora
The 6th smart home Asia 2022 will be held in Shanghai in October
AWS saves data on the cloud (3)
【无标题】
Lilda low code data large screen, leveling the threshold of data application development
随机推荐
Build an integrated kubernetes in Fedora
Construire le premier réseau neuronal avec pytorch et optimiser
Idea related issues
Ffmpeg streaming fails to update header with correct duration
Integer partition
如何抑制SiC MOSFET Crosstalk(串擾)?
抖音服务器带宽有多大,才能供上亿人同时刷?
Tree
【Go ~ 0到1 】 第一天 6月24 变量,条件判断 循环语句
批量修改表和表中字段排序规则
Copy & Deepcopy
Selenium reptile
Comment supprimer le crosstalk SiC MOSFET?
Quelle est la largeur de bande du serveur de bavardage sonore pour des centaines de millions de personnes en même temps?
整数划分
【力扣10天SQL入门】Day4 组合查询 & 指定选取
为什么函数模板没有偏特化?
Three body attack (three-dimensional split plus two points)
Login common test case
[untitled]