web前端html5 +css3+前端项目——学成在线项目
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、准备工作
1、根据项目需求创建根目录(根目录:网站的第一级文件夹)
文件夹名最好为英文,根目录下有以下文件:
(1)图片文件夹:images
(2)样式文件夹:CSS
(3)首页:index.html
<!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>学成在线</title>
</head>
<body>
<!-- 网站的首页,所有网站的首页都叫index.html,因为服务器找首页都是找index.html -->
</body>
</html>
二、版心和清除默认样式
(1)index.html
<!-- 头部header:负责头部区域的样式,wrapper只负责版心效果 -->
<div class="header wrapper" >1</div>
(2)index.css
/* 版心 */
.wrapper {
width: 1200px;
margin: 0 auto;
}
/* 清除默认样式 start*/
* {
margin: 0;
padding: 0;
/* 内减模式 */
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* 清除默认样式 end*/
三、header布局
(1)index.css
/* 头部 */
.header {
height: 42px;
background-color: pink;
/* 法一 */
/* margin-top: 30px;
margin-bottom: 30px; */
/* 法二 */
margin: 30px auto;
}
四、logo和nav
4.1 布局
(1)index.html
<!-- 头部header:负责头部区域的样式,wrapper只负责版心效果 -->
<div class="header wrapper" >
<!-- logo -->
<h1>
<a href="#"><img src="./images/logo.png" alt=""></a>
</h1>
<!-- 导航 -->
<div class="nav">1</div>
</div>
(2)index.css
/* logo */
h1 {
float: left;
}
/* 导航 */
.nav {
float: left;
margin-left: 70px;
height: 42px;
background-color: green;
}
4.2 nav内容完成
(1)index.html
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
(2)index.css
/* 导航 */
.nav {
float: left;
margin-left: 70px;
height: 42px;
/* background-color: green; */
}
.nav li{
float: left;
margin-right: 26px;
}
.nav li a {
display: block;
padding: 0 9px;
height: 42px;
line-height: 42px;
/* border-bottom: 2px solid #00a4ff; */
font-size: 18px;
color: #050505;
}
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}
五、搜索
5.1、布局和文本框
(1)index.heml
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="输入关键词">
<button></button>
</div>
(2)index.css
/* 搜索 */
.search {
float: left;
margin-left: 59px;
width: 412px;
height: 40px;
border: 1px solid #00a4ff;
}
.search input {
padding-left: 20px;
width: 362px;
height: 38px;
border: 0;
}
/* 控制placeholder样式 */
.search input::placeholder {
font-size: 14px;
color: #bfbfbf;
}
(3)运行结果
5.2、按钮
(1)index.html
<button></button>
(2)index.css
.search input {
float: left;
/* 362改为360*/
width: 360px;
}
.search button {
float: left;
width: 50px;
height: 40px;
background-image: url(../images/btn.png);
border: 0;
}
(3)运行结果
六、用户区域
(1)index.html
<!-- 用户 -->
<div