1. 布局思路
为了提高网页制作的效率,布局时通常有以下的整体思路:
- 1.必须确定页面的版心(可视区), 通过测量可得知。
- 2.分析页面中的行模块,以及每个行模块中的列模块。页面布局第一准则.
- 3.一行中的列模块经常浮动布局,先确定每个列的大小之后确定列的位置.页面布局第二.准则
- 4.制作HTML结构。遵循先有结构,后有样式的原则。结构永远最重要.
- 5.所以,先理清楚布局结构,再写代码尤为重要。
2.头部制作
<!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>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<!-- header开始 -->
<div class="header w"> <!--头部也需要居中,所以应用w样式 -->
<!-- logo -->
<div class="logo">
<img src="images/学成在线.png" alt="学成在线logo">
</div>
<!-- 导航栏部分 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- search部分 -->
<div class="search">
<input type="text" value="请输入关键词">
<button><img src="images/fa-search.png" alt=""></button>
</div>
<!-- user部分 -->
<div class="user">
<img src="images/touxiang.png" alt="">
qq-lilei
</div>
</div>
<!-- header结束 -->
</body>
</html>
* {
margin: 0;
padding: 0;
}
/* 设置应用版心的样式,宽度固定,居中显示 */
.w {
width: 1200px;
margin: 0 auto;
}
body {
/* background-color: #f3f5f7; */
}
/* 对li和a设置全局样式 */
li {
list-style: none;
}
a {
text-decoration: none;
}
/* 头部样式开始 */
.header {
height: 42px;
/* background-color: #fff; */
/* 因为头部元素中同时应用了w和header样式,
后者中的margin会覆盖前者的margin,因此
即使左右不需要margin,也要设置为auto*/
margin: 30px auto;
}
/* logo样式 */
.logo {
float: left;
width: 195px;
height: 42px;
}
/* 导航栏nav样式 */
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
/* a是行内元素,要想指定宽高,就需要转为块元素 */
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部分 */
.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; /* 去除右边框 */
/* 给input中的value增加样式 */
color: #bfbfbf;
font-size: 14px;
/* 由于给input指定了宽度,所以再指定padding会撑大input,将width减去即可 */
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* 去除其默认的边框 */
border: none;
background-color: #00a4ff;
}
/* user */
.user {
float: right;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.user img {
height: 42px;
line-height: 42px;
}
/* 头部样式结束 */
3. banner制作
4. 精品推荐小模块制作
<!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>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<!-- header开始 -->
<div class="header w"> <!--头部也需要居中,所以应用w样式 -->
<!-- logo -->
<div class="logo">
<img src="images/学成在线.png" alt="学成在线logo">
</div>
<!-- 导航栏部分 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- search部分 -->
<div class="search">
<input type="text" value="请输入关键词">
<button><img src="images/fa-search.png" alt=""></button>
</div>
<!-- user部分 -->
<div class="user">
<img src="images/touxiang.png" alt="">
qq-lilei
</div>
</div>
<!-- header结束 -->
<!-- banner开始 -->
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发 <span> > </span></a></li>
<li><a href="#">前端开发 <span> > </span></a></li>
<li><a href="#">前端开发 <span> > </span></a></li>
<li><a href="