当前位置：网站首页>Learn online case practice
Learn online case practice
2022-07-01 23:46:00 【Ruoshui CJJ】
Learn online case practice
1. Layout ideas
In order to improve the efficiency of web page production , The layout usually has the following overall ideas :
- 1. You must determine the layout center of the page ( Visual area ), Through measurement, we can know .
- 2. Analyze the line module in the page , And the column modules in each row module . The first rule of page layout .
- 3. Column modules in a row are often floating , First determine the size of each column, and then determine the position of the column . Page layout second . Rules
- 4. Make HTML structure . Follow the prior structure , The principle of style after . Structure is always the most important .
- 5. therefore , First clarify the layout structure , Writing code again is particularly important .
2. Head making
<!DOCTYPE html>
<html lang="en">
<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="style2.css">
</head>
<body>
<!-- header Start -->
<div class="header w"> <!-- The head also needs to be centered , So apply w style -->
<!-- logo -->
<div class="logo">
<img src="images/ Learning online .png" alt=" Learning online logo">
</div>
<!-- Navigation bar section -->
<div class="nav">
<ul>
<li><a href="#"> home page </a></li>
<li><a href="#"> Course </a></li>
<li><a href="#"> Occupation planning </a></li>
</ul>
</div>
<!-- search part -->
<div class="search">
<input type="text" value=" Please enter keywords ">
<button><img src="images/fa-search.png" alt=""></button>
</div>
<!-- user part -->
<div class="user">
<img src="images/touxiang.png" alt="">
qq-lilei
</div>
</div>
<!-- header end -->
</body>
</html>
* {
margin: 0;
padding: 0;
}
/* Set the style of the applied layout , Fixed width , centered */
.w {
width: 1200px;
margin: 0 auto;
}
body {
/* background-color: #f3f5f7; */
}
/* Yes li and a Set global style */
li {
list-style: none;
}
a {
text-decoration: none;
}
/* Head style start */
.header {
height: 42px;
/* background-color: #fff; */
/* Because the header element also applies w and header style , Of the latter margin It will cover the former margin, therefore Even if you don't need margin, Also set it to auto*/
margin: 30px auto;
}
/* logo style */
.logo {
float: left;
width: 195px;
height: 42px;
}
/* The navigation bar nav style */
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
/* a It's an in-line element , To specify the width and height , You need to turn it into a block element */
display: block;
height: 42px;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
color: #050505;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/* search part */
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0; /* Remove the right border */
/* to input Medium value Add style */
color: #bfbfbf;
font-size: 14px;
/* Due to input The width is specified , So specify padding It's going to hold up input, take width Subtract it */
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* Remove its default border */
border: none;
background-color: #00a4ff;
}
/* user */
.user {
float: right;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.user img {
height: 42px;
line-height: 42px;
}
/* End of head style */
3. banner Make
4. Recommended small module production
<!DOCTYPE html>
<html lang="en">
<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="style2.css">
</head>
<body>
<!-- header Start -->
<div class="header w"> <!-- The head also needs to be centered , So apply w style -->
<!-- logo -->
<div class="logo">
<img src="images/ Learning online .png" alt=" Learning online logo">
</div>
<!-- Navigation bar section -->
<div class="nav">
<ul>
<li><a href="#"> home page </a></li>
<li><a href="#"> Course </a></li>
<li><a href="#"> Occupation planning </a></li>
</ul>
</div>
<!-- search part -->
<div class="search">
<input type="text" value=" Please enter keywords ">
<button><img src="images/fa-search.png" alt=""></button>
</div>
<!-- user part -->
<div class="user">
<img src="images/touxiang.png" alt="">
qq-lilei
</div>
</div>
<!-- header end -->
<!-- banner Start -->
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
</ul>
</div>
<div class="course">
<h2> My curriculum </h2>
<div class="bd">
<ul>
<li>
<h4> Continue to learn Programming language design </h4>
<p> Is learning - Use object </p>
</li>
<li>
<h4> Continue to learn Programming language design </h4>
<p> Is learning - Use object </p>
</li>
<li>
<h4> Continue to learn Programming language design </h4>
<p> Is learning - Use object </p>
</li>
</ul>
<a href="#" class="more"> All courses </a>
</div>
</div>
</div>
</div>
<!-- banner end -->
<!-- The boutique recommendation module starts -->
<div class="goods w">
<h3> Excellent recommendation </h3>
<ul>
<li><a href="#">JQuary</a></li>
<li><a href="#">Spark</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">JQuary</a></li>
<li><a href="#">JavaWeb</a></li>
<li><a href="#">Java</a></li>
</ul>
<a href="#" class="mod"> Modify interest </a>
</div>
<!-- The boutique recommendation module ends -->
</body>
</html>
* {
margin: 0;
padding: 0;
}
/* Set the style of the applied layout , Fixed width , centered */
.w {
width: 1200px;
margin: 0 auto;
}
body {
/* background-color: #f3f5f7; */
}
/* Yes li and a Set global style */
li {
list-style: none;
}
a {
text-decoration: none;
}
/* Head style start */
.header {
height: 42px;
/* background-color: #fff; */
/* Because the header element also applies w and header style , Of the latter margin It will cover the former margin, therefore Even if you don't need margin, Also set it to auto*/
margin: 30px auto;
}
/* logo style */
.logo {
float: left;
width: 195px;
height: 42px;
}
/* The navigation bar nav style */
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
/* a It's an in-line element , To specify the width and height , You need to turn it into a block element */
display: block;
height: 42px;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
color: #050505;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/* search part */
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0; /* Remove the right border */
/* to input Medium value Add style */
color: #bfbfbf;
font-size: 14px;
/* Due to input The width is specified , So specify padding It's going to hold up input, take width Subtract it */
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* Remove its default border */
border: none;
background-color: #00a4ff;
}
/* user */
.user {
float: right;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.user img {
height: 42px;
line-height: 42px;
}
/* End of head style */
/* banner Start */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner .w {
height: 420px;
background-color: pink;
/* Set the background image not to repeat , Top and center */
background: url(images/banner2.png) no-repeat top center;
}
/* Left navigation module */
.banner .w .subnav {
float: left;
height: 420px;
width: 190px;
background: rgba(0, 0, 0, .3);
}
.banner .subnav ul li {
height: 45px;
line-height: 45px;
margin: 0 20px;
}
.banner ul li a {
font-size: 14px;
color: #fff;
}
.banner ul li span {
float: right;
}
.banner ul li a:hover {
color: #00a4ff;
}
/* Course module on the right */
.banner .w .course {
float: right;
height: 300px;
width: 230px;
/* background-color: #fff; */
/* Floating boxes have no problem of merging outer margins */
margin-top: 50px;
}
.banner .w .course h2 {
height: 48px;
line-height: 48px;
font-size: 18px;
background-color: #9bceea;
text-align: center;
}
.course .bd {
height: 262px;
padding: 0 20px;
background: rgba(0, 0, 0, .3);
}
.course .bd ul li {
padding: 16px 0 15px 0;
border-bottom: 1px solid #ccc;
}
.course .bd h4 {
font-size: 16px;
color: #4e4e4e;
}
.course .bd p {
font-size: 12px;
color: #a5a5a5;
}
.course .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
line-height: 38px;
text-align: center;
font-size: 16px;
margin-top: 5px;
}
/* banner end */
/* The boutique recommendation module starts */
.goods {
height: 60px;
margin-top: 10px;
line-height: 60px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
}
.goods h3 {
float: left;
font-size: 16px;
margin: 0 35px;
color: #00a4ff;
}
.goods>ul {
float: left;
}
.goods>ul>li {
float: left;
}
.goods>ul>li>a {
padding: 0 30px;
font-size: 16px;
color: #050505;
border-left: 1px solid #666;
}
.goods .mod {
float: right;
margin-right: 35px;
font-size: 14px;
color: #00a4ff;
}
/* The boutique recommendation module ends */
5. It is recommended to make large modules
6. Bottom module fabrication
Complete code
<!DOCTYPE html>
<html lang="en">
<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="style2.css">
</head>
<body>
<!-- header Start -->
<div class="header w"> <!-- The head also needs to be centered , So apply w style -->
<!-- logo -->
<div class="logo">
<img src="images/ Learning online .png" alt=" Learning online logo">
</div>
<!-- Navigation bar section -->
<div class="nav">
<ul>
<li><a href="#"> home page </a></li>
<li><a href="#"> Course </a></li>
<li><a href="#"> Occupation planning </a></li>
</ul>
</div>
<!-- search part -->
<div class="search">
<input type="text" value=" Please enter keywords ">
<button><img src="images/fa-search.png" alt=""></button>
</div>
<!-- user part -->
<div class="user">
<img src="images/touxiang.png" alt="">
qq-lilei
</div>
</div>
<!-- header end -->
<!-- banner Start -->
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
<li><a href="#"> The front-end development <span> > </span></a></li>
</ul>
</div>
<div class="course">
<h2> My curriculum </h2>
<div class="bd">
<ul>
<li>
<h4> Continue to learn Programming language design </h4>
<p> Is learning - Use object </p>
</li>
<li>
<h4> Continue to learn Programming language design </h4>
<p> Is learning - Use object </p>
</li>
<li>
<h4> Continue to learn Programming language design </h4>
<p> Is learning - Use object </p>
</li>
</ul>
<a href="#" class="more"> All courses </a>
</div>
</div>
</div>
</div>
<!-- banner end -->
<!-- The boutique recommendation module starts -->
<div class="goods w">
<h3> Excellent recommendation </h3>
<ul>
<li><a href="#">JQuary</a></li>
<li><a href="#">Spark</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">JQuary</a></li>
<li><a href="#">JavaWeb</a></li>
<li><a href="#">Java</a></li>
</ul>
<a href="#" class="mod"> Modify interest </a>
</div>
<!-- The boutique recommendation module ends -->
<!-- box The core content begins -->
<div class="box w">
<div class="box-hd">
<h3> Excellent recommendation </h3>
<a href="#"> Check all </a>
</div>
<div class="box-bd">
<ul class="clearfix">
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
<li>
<img src="images/ Excellent recommendation .png" alt="">
<div class="info">
Think PHP 5.0 Blog system actual combat project drill
<p><span> senior </span> • 1125 People are learning </p>
</div>
</li>
</ul>
</div>
</div>
<!-- box The core content ends -->
<!-- footer Part of it -->
<div class="footer">
<div class="w">
<div class="copyright">
<img src="images/ Learning online .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>
<div class="links">
<dl>
<dt> About xuecheng.com </dt>
<dd> About </dd>
<dd> Management team </dd>
<dd> Job opportunities </dd>
<dd> Customer service </dd>
<dd> help </dd>
</dl>
<dl>
<dt> About xuecheng.com </dt>
<dd> About </dd>
<dd> Management team </dd>
<dd> Job opportunities </dd>
<dd> Customer service </dd>
<dd> help </dd>
</dl>
<dl>
<dt> About xuecheng.com </dt>
<dd> About </dd>
<dd> Management team </dd>
<dd> Job opportunities </dd>
<dd> Customer service </dd>
<dd> help </dd>
</dl>
</div>
</div>
</div>
<!-- footer Partial end -->
</body>
</html>
* {
margin: 0;
padding: 0;
}
/* Set the style of the applied layout , Fixed width , centered */
.w {
width: 1200px;
margin: 0 auto;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
body {
/* background-color: #f3f5f7; */
}
/* Yes li and a Set global style */
li {
list-style: none;
}
a {
text-decoration: none;
}
/* Head style start */
.header {
height: 42px;
/* background-color: #fff; */
/* Because the header element also applies w and header style , Of the latter margin It will cover the former margin, therefore Even if you don't need margin, Also set it to auto*/
margin: 30px auto;
}
/* logo style */
.logo {
float: left;
width: 195px;
height: 42px;
}
/* The navigation bar nav style */
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
/* a It's an in-line element , To specify the width and height , You need to turn it into a block element */
display: block;
height: 42px;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
color: #050505;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/* search part */
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0; /* Remove the right border */
/* to input Medium value Add style */
color: #bfbfbf;
font-size: 14px;
/* Due to input The width is specified , So specify padding It's going to hold up input, take width Subtract it */
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* Remove its default border */
border: none;
background-color: #00a4ff;
}
/* user */
.user {
float: right;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.user img {
height: 42px;
line-height: 42px;
}
/* End of head style */
/* banner Start */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner .w {
height: 420px;
background-color: pink;
/* Set the background image not to repeat , Top and center */
background: url(images/banner2.png) no-repeat top center;
}
/* Left navigation module */
.banner .w .subnav {
float: left;
height: 420px;
width: 190px;
background: rgba(0, 0, 0, .3);
}
.banner .subnav ul li {
height: 45px;
line-height: 45px;
margin: 0 20px;
}
.banner ul li a {
font-size: 14px;
color: #fff;
}
.banner ul li span {
float: right;
}
.banner ul li a:hover {
color: #00a4ff;
}
/* Course module on the right */
.banner .w .course {
float: right;
height: 300px;
width: 230px;
/* background-color: #fff; */
/* Floating boxes have no problem of merging outer margins */
margin-top: 50px;
}
.banner .w .course h2 {
height: 48px;
line-height: 48px;
font-size: 18px;
background-color: #9bceea;
text-align: center;
}
.course .bd {
height: 262px;
padding: 0 20px;
background: rgba(0, 0, 0, .3);
}
.course .bd ul li {
padding: 16px 0 15px 0;
border-bottom: 1px solid #ccc;
}
.course .bd h4 {
font-size: 16px;
color: #4e4e4e;
}
.course .bd p {
font-size: 12px;
color: #a5a5a5;
}
.course .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
line-height: 38px;
text-align: center;
font-size: 16px;
margin-top: 5px;
}
/* banner end */
/* The boutique recommendation module starts */
.goods {
height: 60px;
margin-top: 10px;
/* The child element inherits the row height of the parent element */
line-height: 60px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
}
.goods h3 {
float: left;
font-size: 16px;
margin: 0 35px;
color: #00a4ff;
}
.goods>ul {
float: left;
}
.goods>ul>li {
float: left;
}
.goods>ul>li>a {
padding: 0 30px;
font-size: 16px;
color: #050505;
border-left: 1px solid #666;
}
.goods .mod {
float: right;
margin-right: 35px;
font-size: 14px;
color: #00a4ff;
}
/* The boutique recommendation module ends */
/* box Module start */
.box .box-hd {
margin-top: 30px;
height: 45px;
}
.box .box-hd h3{
float: left;
font-size: 20px;
color: #494949;
}
.box .box-hd a{
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}
.box .box-bd ul {
width: 1215px;
}
.box .box-bd ul li {
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}
.box .box-bd ul li img {
width: 100%;
}
.box-bd .info {
margin: 20px 20px 25px 20px ;
font-size: 14px;
color: #050505;
}
.box-bd .info p {
margin-top: 22px;
font-size: 12px;
color: #999;
}
.box-bd .info p span {
color: #ff7c2d;
}
/* box Module end */
/* footer Part of it */
.footer {
height: 415px;
background-color: #fff;
}
/* footer Partial end */
.footer .w {
padding-top: 35px;
}
.footer .copyright {
float: left;
}
.footer .copyright img{
margin-bottom: 30px;
}
.footer .copyright p {
margin-bottom: 15px;
font-size: 12px;
color: #666;
}
.footer .copyright a {
display: block;
width: 120px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid #00a4ff;
font-size: 16px;
}
.footer .links {
float: right;
margin-right: 30px;
}
.footer .links dl {
float: left;
margin-left: 120px;
}
.footer .links dt {
font-size: 16px;
color: #333;
margin-bottom:20px ;
}
.footer .links dd {
font-size: 12px;
color: #333;
}
边栏推荐
猜你喜欢
Redis data types and application scenarios
Development trend and future direction of neural network Internet of things
2021 robocom world robot developer competition - preliminary competition of undergraduate group
门级建模—课后习题
多表操作-一对一,一对多与多对多
![[es practice] safe operation mode on ES](/img/3f/fa28783770098ff10bffeccd64fe51.png)
[es practice] safe operation mode on ES
2021 RoboCom 世界机器人开发者大赛-高职组复赛
【必会】BM41 输出二叉树的右视图【中等+】
边缘计算概述
Why is PHP called hypertext preprocessor
随机推荐
Redis AOF log
深度学习 | 三个概念：Epoch, Batch, Iteration
物联网应用技术专业是属于什么类
Yunxin small class | common cognitive misunderstandings in IM and audio and video
【ES实战】ES上的安全性运行方式
ADO.NET之sqlCommand对象
Anomaly-Transformer (ICLR 2022 Spotlight)复现过程及问题
2022-07-01: at the annual meeting of a company, everyone is going to play a game of giving bonuses. There are a total of N employees. Each employee has construction points and trouble points. They nee
使用VB.net将PNG图片转成icon类型图标文件
Postgresql源码（58）元组拼接heap_form_tuple剖析
物联网技术应用属于什么专业分类
Key points and difficulties of the course "information content security" at Harbin Institute of Technology
The third part of the construction of the defense system of offensive and defensive exercises is the establishment of a practical security system
ADO. Net SqlConnection object usage summary
Which securities company is the best to open a stock account? Is there a security guarantee
PostgreSQL source code (57) why is the performance gap so large in hot update?
kubernetes资源对象介绍及常用命令（三）
.env.xxx 文件，加了常量，却undefined
[swoole Series 1] what will you learn in the world of swoole?
jpa手写sql，用自定义实体类接收