当前位置：网站首页>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;
}
边栏推荐
- 力扣今日题-241. 为运算表达式设计优先级
- Y53. Chapter III kubernetes from introduction to mastery -- ingress (26)
- What is the difference between memory leak and memory overflow?
- 【无标题】
- 2021 RoboCom 世界机器人开发者大赛-高职组复赛
- 第六章 数据流建模
- PyCharm调用matplotlib绘图时图像弹出问题怎么解决
- 软件架构的本质
- openwrt 开启KV漫游
- Relatively easy to understand PID understanding
猜你喜欢
门级建模—课后习题
2021 robocom world robot developer competition - preliminary competition of undergraduate group
【.Net Core】程序相关各种全局文件
深度学习 | 三个概念：Epoch, Batch, Iteration
Redis RDB snapshot
Notes to problems - file /usr/share/mysql/charsets/readme from install of mysql-server-5.1.73-1 glibc23.x86_ 64 c
使用 pair 做 unordered_map 的键值
Why is PHP called hypertext preprocessor
PyCharm调用matplotlib绘图时图像弹出问题怎么解决
Matplotlib common charts
随机推荐
Daily three questions 6.28
Practical application and extension of plain framework
Matplotlib common charts
Redis master-slave synchronization
Windows 7 安装MYSQL 错误：1067
What category does the Internet of things application technology major belong to
门级建模—课后习题
股票开户哪个证券公司最好，有安全保障吗
What professional classification does the application of Internet of things technology belong to
Notes to problems - file /usr/share/mysql/charsets/readme from install of mysql-server-5.1.73-1 glibc23.x86_ 64 c
SQL optimization
ARP报文头部格式和请求流程
Stm32f030f4 drives tim1637 nixie tube chip
Notblank and notempty
Reproduction process and problems of analog transformer (ICLR 2022 Spotlight)
使用VB.net将PNG图片转成icon类型图标文件
PostgreSQL source code (58) tuple splicing heap_ form_ Tuple analysis
Is there a piece of code that makes you convinced by human wisdom
What are the common types of points mall games?
物联网技术应用属于什么专业分类