学成在线案例实战

若水cjj

已于 2022-07-01 11:48:25 修改

阅读量243

点赞数

分类专栏： # 前端实战案例文章标签： css 前端 html

于 2022-06-30 23:47:20 首次发布

本文链接：https://blog.csdn.net/cjhxydream/article/details/125549773

版权

本文详细介绍了前端网页布局的思路和步骤，从布局版心的确定到各模块的制作，包括头部、banner、精品推荐小模块和大模块，以及底部模块的创建。遵循先结构后样式的理念，强调清晰布局对于高效网页制作的重要性。

摘要由CSDN通过智能技术生成

学成在线案例实战

1. 布局思路
2.头部制作
3. banner制作
4. 精品推荐小模块制作
5. 精品推荐大模块制作
6. 底部模块制作

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="