Introduction to the webpage : After studying the courses taught by Mr. Pink, I made a simple static page, mainly using html and css.
The production of the entire web page is mainly divided into five parts: in the production process, first of all, it is necessary to determine the core of a webpage (the central area of the content), and the five parts call the core in turn to make the main content always align with the core. In the core, the five parts are arranged by five standard flow boxes, and then the contents of each box are subdivided into production.
The first part : the header area, including Xuecheng.com's logo, home page, courses, career planning navigation bar, search box, and user area.
First use a big box (class="header") to contain the small modules, and then put the four parts into four small boxes (class="logo" class="nav" class="search" class="user" ), then float the four boxes to the left so that they are all in one line, and finally set the style of each small module in detail.
The second part : the banner part (class="banner"), mainly consists of three parts, the background part, including the background color and background image (set the background for class="banner"), the side navigation bar part and the right course table part. A large box (call version heart class="w") contains two small boxes (class="subnav" class="course"), the side navigation bar floats to the left, and the course schedule floats to the right.
The third part : Goods recommendation part (class=”goods”), which consists of three parts: the title Goods Recommendation, links to recommended content and links to more hobbies.
The fourth part : product modules recommended by high-quality goods (class="box-bd"), ten product modules use <ul> <li>product module </li></ul>. The hot and new parts located on the first, second, sixth, and seventh modules use relative positioning and absolute positioning.
The fifth part : the bottom module (class=”footer”), which consists of the APP download part on the left (class=”copyright”) and the relevant content part of Xuecheng.com (class=”links”) on the right.
html code part:
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 头部区域开始 -->
<div class="header w">
<!-- 第一行logo -->
<div class="logo">
<img src="D:\前端素材\html使用手册\第七天\img\学成在线.png" alt="">
</div>
<!-- 第一行导航栏 -->
<div class="nav w">
<ul class="homepage">
<li> <a href="#">首页</a> </li>
<li> <a href="#">课程</a></li>
<li> <a href="#">职业规划</a></li>
</ul>
</div>
<!-- 第一行搜索框 -->
<div class="search">
<input type="text" value="输入关键词">
<img class="buttow" src="D:\前端素材\html使用手册\第七天\study\images\btn.png" alt="">
</div>
<!-- 第一行用户区 -->
<div class="user">
<img src="D:\前端素材\html使用手册\第七天\study\images\user.png" alt="">
<a href="#">qq-lilei</a>
</div>
</div>
<!-- 头部区域结束 -->
<!-- banner部分开始 -->
<div class="banner ">
<div class="w">
<!-- 侧边导航栏 -->
<div class="subnav">
<ul>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
<li>
<a href="">前端开发</a>
<span> > </span>
</li>
</ul>
</div>
<!-- 右边课程表 -->
<div class="course">
<h3>我的课程表</h3>
<div class="bd">
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<a class="more" href="#">全部课程</a>
</ul>
</div>
</div>
</div>
</div>
<!-- 精品推荐导航部分开始 -->
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
</ul>
<a class="mod" href="#">修改爱好</a>
</div>
</div>
<!-- 精品推荐导航部分结束 -->
<!-- 精品部分推荐产品推荐开始 -->
<div class="box w ">
<div class="box-hd clearfix">
<h3>精品推荐</h3>
<a href="#">查看更多</a>
</div>
<!-- 精品部分推荐产品推荐开始 -->
<!-- 产品介绍开始 -->
<div class="box-bd clearfix">
<ul>
<li>
<em>
<img src="hot1.png" alt="">
</em>
<img src="D:\前端素材\html使用手册\第九天\study\images\pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<em>
<img src="new.png" alt="">
</em>
<img src="hot.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<img src="hot2.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<em>
<img src="hot1.png" alt="">
</em>
<img src="D:\前端素材\html使用手册\第九天\study\images\pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<em>
<img src="new.png" alt="">
</em>
<img src="hot.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<img src="hot2.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>".1125人在学习"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="high">
<span>高级</span>'.1125人在学习'
</div>
</li>
</ul>
</div>
</div>
<!-- 产品结束结束 -->
<!-- 底部模块开始 -->
<div class="footer">
<div class="w">
<div class="copyright">
<img src="D:\前端素材\html使用手册\第九天\study\images\logo.png" alt="">
<p>
学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
</p>
<a href="#">下载APP</a>
</div>
<div class="links">
<dl>
<dt>关于学成网</dt>
<dd> <a href="#">关于 </a> </dd>
<dd> <a href="#">管理团队</a> </dd>
<dd> <a href="#">工作机会</a> </dd>
<dd> <a href="#">客户服务</a> </dd>
<dd> <a href="#">帮助 </a> </dd>
</dl>
<dl>
<dt>关于学成网</dt>
<dd> <a href="#">关于 </a> </dd>
<dd> <a href="#">管理团队</a> </dd>
<dd> <a href="#">工作机会</a> </dd>
<dd> <a href="#">客户服务</a> </dd>
<dd> <a href="#">帮助 </a> </dd>
</dl>
<dl>
<dt>关于学成网</dt>
<dd> <a href="#">关于 </a> </dd>
<dd> <a href="#">管理团队</a> </dd>
<dd> <a href="#">工作机会</a> </dd>
<dd> <a href="#">客户服务</a> </dd>
<dd> <a href="#">帮助 </a> </dd>
</dl>
</div>
</div>
</div>
<!-- 底部模块结束 -->
</body>
</html>css code part:
* {
margin:0px;
padding:0px;
}
body {
background-color: #f3f5f7;
}
.w {
width: 1200px;
margin: 30px auto;
}
/* 清除浮动代码 */
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
li{
list-style: none;
}
a{
text-decoration: none;
color:#050505;
}
/* 头部区域的样式 */
.header {
height: 42px;
}
/* logo部分 */
.logo img{
float: left;
width: 198px;
height:42px;
}
/* 导航栏部分 */
.nav ul {
float: left;
margin-left:60px;
}
.nav li {
display:inline-block;
height:42px;
padding:0 20px;
line-height: 42px;
color:#050505;
font-size: 18px;
}
/* 伪类设置 */
.nav li a:hover {
color: #3fa9ff;
border-bottom: 2px solid #00acfd;
}
/* 搜索框样式 */
.search {
float: left;
margin-left:70px;
}
/* 搜索框 */
.search input {
float: left;
width: 346px;
height:40px;
color:#e0cdbf;
padding-left:15px;
border-right: 0px;
border:1px solid #00a4ff;
/* 按钮 */
}
.buttow {
width: 50px;
height: 42px;
/* */
}
/* 用户区域 */
.user {
float: left;
margin-left:65px;
}
/* banner部分样式 */
.banner {
height: 421px;
/* 背景颜色 */
background-color:#1c036c ;
}
/* 背景图片 */
.banner .w {
height:421px;
background: url(banner2.png) no-repeat top center;
}
/* 左侧导航栏部分 */
.subnav {
float:left;
width: 190px;
height: 421px;
background-color: #14024b;
}
.subnav ul li a {
float:left;
line-height: 45px;
color: #fff;
font-size:14px;
padding:0 20px;
}
.subnav ul li span {
float:right;
line-height: 45px;
color: #fff;
padding-right:20px;
}
.subnav a:hover{
color:#00a4ff;
}
/* 右侧用户区部分 */
.course {
float:right;
width: 230px;
height: 300px;
margin-top:50px;
background-color: #fff;
}
.bd {
padding:0 20px;
}
.course h3 {
height:48px;
line-height:48px;
font-weight:400px;
color:#fff;
text-align:center;
background-color: #9bceea;
}
.course ul li {
border-bottom: 1px solid #a5a5a5;
padding:14px 0;
}
.course ul li h4 {
font-size:16px;
color: #4e4e4e;
}
.course ul li p {
font-size:12px;
color:#a5a5a5;
}
.more {
display: block;
height:38px;
line-height: 38px;
text-align:center;
color:#42aaff;
font-size:16px;
font-weight: 700;
border: 1px solid #00a4ff;
margin:5px;
}
/* 精品推荐部分 */
.goods {
height:60px;
background-color: #fff;
box-shadow: 2px 3px 3px rgba(0,0,0,0.1);
margin-top:10px;
}
/* 标题部分 */
.goods h3 {
display: block;
float:left;
line-height:60px;
font-size:16px;
color:#00a4ff;
margin-left:30px;
}
/* 精品导航栏部分 */
.goods ul {
float: left;
margin-left:30px;
}
.goods ul li {
display: inline-block;
line-height: 60px;
}
.goods ul li a {
padding:0 30px;
font-size: 16px;
color:#050505;
border-left: 1px solid #cccccc;
}
.mod {
float:right;
line-height: 60px;
font-size: 16px;
color:#00a4ff;
padding-right:30px;
}
.box h3 {
float:left;
font-size: 20px;
color:#494949;
}
.box a {
float:right;
font-size: 12px;
color:#a5a5a5;
margin:10px 30px 0 0;
}
.box-bd ul {
width:1225px ;
}
/* 产品介绍部分 */
.box-bd ul li {
position: relative;
float:left;
background-color: #fff;
width: 228px;
height: 270px;
margin-top:25px;
margin-right:15px;
}
.box-bd ul li em img {
position: absolute;
top:2px;
right: -4px;
}
.box-bd ul li >img {
width: 100%;
}
.box-bd ul li h4 {
margin:20px 20px 20px 25px;
font-size:14px;
color:#050505;
font-weight: 400;
}
.high {
margin: 20px 25px;
font-size: 12px;
color:#999999;
}
.box-bd ul li span {
font-size:12px ;
color:#ff7c2d;
}
/* 底部模块 */
.footer {
height:415px;
background-color: #fff;
}
.footer .w {
padding-top:35px;
}
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color:#666666;
margin:20px 0 15px 0;
}
.copyright a {
display: block;
width: 118px;
height:33px;
border :1px solid #00a4ff;
text-align: center;
line-height: 33px;
font-size: 16px;
color:#00a4ff;
}
.links {
float:right;
margin-top: 5px;
}
.links dl {
float: left;
display: block;
margin-left: 100px;
}
.linkd dl dt {
font-size: 16px;
color:#333;
}
.links dl dd a {
font-size: 12px;
color: #333;
}Completed interface of the web page:
Problems encountered during the production process and solutions:
In the process of writing a webpage, the first problem is that the layout of the entire page is not very clear. When writing a webpage, you must first analyze the basic structure of the webpage clearly, and clearly understand the location and content of each part. A clear understanding is the last thing to write the code, the structure is clear, and the problems encountered in the writing can be traced.
The second problem is that when setting the float on the box, it will affect the following standard flow boxes. Finally, I reviewed the clear float to solve this problem. Common code for clearing floats:
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} When using it, you only need to add class=”clearfix” to the parent box of the floating element to clear the floating.
Note: Setting clear float must add clearfix class to the parent element of the float element.
Article summary:
This article is a webpage where I practiced basic content creation when I was self-studying the front-end. I also watched other videos before this study. If it was not completed well, there would be many problems in a very small part. After working for many days, I did not finish it, and finally only submitted an incomplete web page. In this study, it can be regarded as a review of the basic content, and deepened the content that was not mastered in the previous study. When making the webpage this time, many problems encountered before were solved. In short, you must do more when learning the front end; if you encounter problems, return to the chapter of the content and review the basics to better solve the problem.
This webpage is only a static page based on html and css, and it is only a part of the Xuechengwang webpage. Many functions such as links have not been implemented yet. I will fill in the missing parts in future studies. In addition, if you find any mistakes or omissions in the webpage or the code has a better way of writing, please leave a message in the comment area, or private message me.