网页制作流程--（项目案例）学成在线

已于 2022-09-14 00:04:44 修改
阅读量792 收藏 7
点赞数 3
分类专栏： CSS 文章标签： servlet 前端 html
于 2022-09-13 23:54:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64005381/article/details/126828826
版权

一、根目录

目标：能根据项目需求创建根目录

根目录：网站的第一级文件夹

1.图片文件夹：images

2.样式文件夹

3.首页：index.html

二、布局流程

目标: 掌握网页布局基本步骤
从外到内, 从上到下
CSS美化
宽度,高度,背景色 → 调整位置
放内容 → 调整内容位置 → 调整细节(文字样式等等)

1.准备工作

html：

<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="./css_/index.css">
</head>
<body>
    <!-- 网站首页，所有网站的首页都叫index.html,因为服务器找首页都是找index.html -->
    <!-- 布局：从外到内，从上到下，从做右 -->
    <!-- css：浮动/display;盒子模型；文字样式 -->

    <div class="header wrapper"></div>
</body>

 css：

/* index.css是用来美化首页的 */
body{
    background-color: pink;
}

2.版心和清除浮动

效果图：


*{
    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;
}

body{
    background: color #f3f5f7;;
}

/* 版心 */
.wrapper{
    width: 1200px;
    margin: 0 auto;
}

03-header布局

.header{
    height: 42px;
    background-color: pink;
    /* margin-top: 30PX;
    margin-bottom: 30px; */
    margin: 30px auto;
}

 04-logo和nav布局、05-nav完成

效果图：

html：

<body>
    <!-- 网站首页，所有网站的首页都叫index.html,因为服务器找首页都是找index.html -->
    <!-- 布局：从外到内，从上到下，从做右 -->
    <!-- css：浮动/display;盒子模型；文字样式 -->

    <!-- 头部 header:负责头部区域的样式，wrapper只负责版心居中-->
    <div class="header wrapper">
        <h1>
            <a href="#"><img src="#" alt=""></a>
        </h1>

        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">导航</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
    </div>
</body>

css：

h1{
    float: left;
}

/* 导航 */
.nav{
    height: 42px;
    /* background-color: green; */
    float: left;
    margin-left: 70px;
}

.nav li{
    float: left;
    margin-right: 26px;
}

.nav li a{
    /* a是行内 宽高不生效 */
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    font-size: 18px;
    color:#050505;
}

.nav li a:hover{
    border-bottom: 2px solid skyblue;
}

06-搜索-布局和文本框

效果图：

html：

  <div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/logo.png" alt=""></a>
        </h1>

        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">导航</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>

        <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="输入关键字">
            <button></button>
        </div>
    </div>

css：

/* 搜索 */
.search{
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
    
}
.search input{
    width: 362px;
    height: 38px;
    border: 0;
    padding-left: 20px;
}
/* 控制placeholder的样式 */
.search input::placeholder{
    font-size: 14px;
    color: #bfbfbf;
}

07-搜索-按钮

 效果图：

 html：

       <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="输入关键字">
            <button></button>
        </div>

CSS：

/* 搜索 */
.search{
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
    
}
.search input{
    float: left;
    width: 360px;
    height: 38px;
    border: 0;
    padding-left: 20px;
}

/* 控制placeholder的样式 */
.search input::placeholder{
    font-size: 14px;
    color: #bfbfbf;
}

.search button{
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
    border: 0;
    float: left;
}

08-用户区域

效果图：

html：

   <div class="user">
            <img src="./images/user.png" alt="">
            <span>lilei</span>
        </div>

css：

.user{
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}

.user img{
    /* 调节图片垂直对齐方式，middle:居中 */
    vertical-align: middle;
}

09-banner布局

效果图：

html：

  <!-- 轮播图banner  -->
    <div class="banner">
        <div class="wrapper">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

css：

/* 轮播图 */
.banner{
    height: 420px;
    background-color: #1c036c;
}

.banner .wrapper{
    height: 420px;
    background-image: url(../images/banner2.png);
}

.banner .left{
    float: left;
    width: 190px;
    height: 420px;
    background-color: rgb(0,0,0,0.3);
}

.banner .right{
    float: right;
    margin-top: 50px;
    width: 228px;
    height: 300px;
    background-color: #fff;
}

10-banner-left完成

效果图：

html：

  <!-- 轮播图banner  -->
    <div class="banner">
        <div class="wrapper">
            <div class="left">
                <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="#">前端开放 <span>></span></a></li>
                    <li><a href="#">前端开放 <span>></span></a></li>
                    <li><a href="#">前端开放 <span>></span></a></li>
                    <li><a href="#">前端开放 <span>></span></a></li>
                    <li><a href="#">前端开放 <span>></span></a></li>
                    <li><a href="#">前端开放 <span>></span></a></li>
                </ul>
            </div>
            <div class="right"></div>
        </div>
    </div>

css：

.banner .left{
    float: left;
    padding: 0 20px;
    width: 190px;
    height: 420px;
    background-color: rgb(0,0,0,0.3);
     /* 行高属于控制文字的属性，能继承 */
     line-height: 44px;
}


.banner .left span{
    float: right;
}

.banner .left a{
    font-size: 14px;
    color: #fff;
}

.banner .left a:hover{
    color: #00b4ff;
}

11-banner-right-标题

效果图：

html：

   <div class="right">
                <h2>我的课程表</h2>
                
            </div>

css:

.banner .right{
    float: right;
    margin-top: 50px;
    width: 228px;
    height: 300px;
    background-color: #fff;

}

.banner .right h2{
    height: 42px;
    background-color: #9bceea;
    text-align: center;
    line-height: 42px;
    font-size: 18px;
    color: #fff;
}

 12-banner-right-内容

效果图：

 html:

<div class="right">
                <h2>我的课程表</h2>
                <div class="content">
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl> 
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl> 
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                </div>
            </div>

css：



.banner .right .content{
    padding: 0 18px;
}

.banner .right .content dl{
    padding: 12px 0;
    border-bottom: 2px solid #e5e5e5;
}

.banner .right .content dt{
    font-size: 16px;
    color: #4e4e4e;
}

.banner .right .centent dd{
    font-size: 14px;
    color: #4e4e4e ;
}

13-banner-right-全部内容

效果图：

html：

 <div class="right">
                <h2>我的课程表</h2>
                <div class="content">
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl> 
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl> 
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                </div>
                <a href="#" class="more">全部课程</a>
            </div>

css：

.banner .right .more{
    display: block;
    /* margin: 4px 14px 0; */
    margin: 4px auto 0;
    width: 200px;
    height: 40px;
    border: 1px solid #00a4ff;

    font-size: 16px;
    color: #00a4ff;
    font-weight: 700;

    text-align: center;
    line-height: 40px;
}

14-精品推荐

效果图：

html：

    <!-- 精品推荐 -->
    <div class="goods wrapper">
        <h2>精品推荐</h2>
        <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>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="xingqu">修改兴趣</a>
    </div>

css：

/* 精品推荐 */
.goods{
    margin-top: 8px;
    padding-left: 34px;
    padding-right: 26px;
    height: 60px;
    background-color: white;
    box-shadow: 0px 2px 3px 0px 
     rgb(118,118,118,0.2);

     line-height: 60px;
}

.goods h2{
    float: left;
    font-size: 16px;
    color: #00a4ff;
    font-weight: 700px;
}

.goods ul{
    float: left;
    margin-left: 30px;
}

.goods ul li{
    float: left;
}

.goods li a{
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}

.goods .xingqu{
    float: right;
    font-size: 14px;
    color: #00a4ff;
}

15-精品推荐-标题

效果图:

html:

   <!-- 精品推荐课程 -->
    <div class="box wrapper">
        <div class="title">
            <h2>精品推荐</h2>
            <a href="#">查看全部</a>
        </div>
    </div>

css:

/* 精品课程 */
.box{
    margin-top: 35px;
}

.box .title{
    height: 40px;
    background-color: pink;
}

.box .title h2{
    float: left;
    font-size: 20px;
    content: #494949;
    font-weight: 400;
}

.box .title a{
    margin-right: 30px;
    float: right;
    font-size: 12px;
    color: #a5a5a5;
}

16-精品课程内容

效果图：

html：

<div class="content clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li> <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li> <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li> <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li> <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li> <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li> <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li> <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>THink PHP 5.0 博客实战项目演练</h3>
                        <p><span>高级</span> -  1125人在学习</p>
                    </a>
                </li>
            </ul>
        </div>

css：

.box .content li{
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    background-color: pink;
}

.box .content li:nth-child(5n){
    margin-right: 0;
}

.box .content li h3{
    padding: 20px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

.box .content li p{
    padding: 0 20px;
    font-size: 12px;
    color: #999;
}

.box .content li span{
    color: #ff7c2d;
}

17-版权区域-布局

效果图：

html：

    <!-- 版权 :注意要清除浮动的影响，课程li 的父级 -->
    <!-- li都浮动了，脱标，撑不开父级的高度 -->
    <div class="footer">
        <div class="wrapper">
            <div class="left">1</div>
            <div class="right">2</div>
        </div>
    </div>

css： 

.footer{
    margin-top: 40pxs;
    height: 417px;
    background-color: #fff;
}

.footer .left{
    float: left;
}

.footer .right{
    float: right;
}

18-版权区域-内容

效果图：

html：

 <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#"></a>合作导师</dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#"></a>合作导师</dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#"></a>合作导师</dd>
                </dl>
            </div>

 

css：

.footer .right{
    float: right;
}

.footer .right dl{
    float: left;
    margin-left: 120px;
}

什么时候养猫猫
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
制作一个简单的网页（入门篇）
weixin_51601437的博客
06-06 3万+
使用HTML和CSS来制作一个简单的网页前言一、HTML1.1常见元素介绍1.2借助工具，浏览器开发者工具二、实现个人名片1.基本框架2.使用CSS美化1.CSS书写位置1、以元素的style 属性来指定 （内联样式）2、以style 标签包裹 （内部样式）3、以外部文件的方式 （外部样式）2.CSS中的选择器1.标签选择器2.id选择器3.类选择器4.子元素选择器 前言 HTML负责描述了网页的整体骨架 CSS负责描述了页面样式 利用其完成一个简单的个人建立网页。 一、HTML HTML不是
学成在线网站首页制作
07-31
HTML（HyperText Markup Language）是网页制作的基础语言，它用于定义...总的来说，"学成在线网站首页制作"项目是一个全面了解和掌握HTML和CSS的绝佳实例，不仅锻炼了基本技能，也为进阶学习Web开发打下了坚实基础。
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-15 3088
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
CSS学习笔记5：学成在线案例
m0_73560798的博客
09-21 85
●1 号是版心盒子header 1200* 42的盒子水平居中对齐,上下给一个margin 值就可以●版心盒子里面包含 2号盒子logo●版心盒子里面包含3号盒子nav导航栏●版心盒子里面包含4号盒子search搜索框●版心盒子里面包含5号盒子user个人信息●注意:要求里面的4个盒子必须都是浮动先写一个大盒子来存放头部。CSS样式CSS样式。
网页设计与制作实验一HTML基础应用
Annzz123的博客
06-20 3584
通过本次实验，了解HTML文档结构，熟练掌握HTML基本标记及属性，能够运用HTML制作简单的页面。掌握了常用特殊字符标记、到标记的使用、图像的srcwidthheightborder等属性的应用和文本标记和图像标记的混合应用。
学成在线网页制作（详细）
热门推荐
egg_er的博客
10-25 2万+
项目分析 如图： 分为四个模块： header头部模块 精品推荐模块 编程入门模块 数据分析师模块 机器学习模块 前端工程师开发模块 footer模块 如果仔细观察的话，第2，5，6属于一个模块，样式结构相同。同样的3，4模块相同，这样只要做出一个另外一个复制黏贴即可。 详细制作 先确定版心，版心的宽度，然后给他封装成类，这样方便后面每个模块的父盒子调用。 初始化一些值： * { margin: 0; padding: 0; } .ul { list-style: none;
HTML-CSS学成在线案例 | pink老师讲解思路 | 完整源代码
最新发布
m0_67495444的博客
09-30 2215
实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法；一个search大盒子里面包含2个表单。
天极网页制作精华(CHM).rar
07-09
10. **实战案例**：通过实际的网页项目，演示如何将所学知识应用到实践中，增强读者的动手能力。 通过《天极网页制作精华》这本教程，无论是初学者还是有一定经验的开发者，都能系统地掌握网页制作的关键技术和流程...
scratch编程项目源代码文件案例素材-[学习交流].zip
05-16
3. **动画与游戏制作**：案例可能包含简单的动画制作，比如角色按照特定路径移动，或者制作小游戏，如躲避障碍物、点击得分等。 4. **声音与交互**：Scratch允许添加音效和音乐，以及与用户的交互，例如通过键盘...
源代码_前端网页制作_
09-30
【描述】"这是一个简单的前端网页" 提示我们，这个项目可能是一个初级的实例，适合初学者学习和理解前端开发的基本流程和常用技术。简单网页通常包括HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript等基础...
学成在线img.zip
04-22
学成在线首页的各个图片，从photoshop处切片而出。仅仅只有首页的图片，内附学成在线首页的jpg图片，
学成在线首页制作的源代码
12-05
这是一个关于学成在线首页制作的源代码
学成在线（html和css考试试题）.rar
08-24
这是一个学完html和css基础课程就可以独立制作的网页，可以用来检验自己的布局水平，看看自己还有那些不足
6个WEB项目开发案例源代码
01-12
6个WEB项目开发案例源代码，可以直接使用
Web网站开发项目案例
04-01
Web网站开发项目案例
网页设计与制作-1期 游戏网站说明文档.pdf
07-14
网页设计与制作是IT领域中的一个关键组成部分，它涉及到创建吸引用户、功能完善的网站。这份“网页设计与制作-1期 游戏网站说明文档”是教学资源的一部分，旨在指导学生如何构建一个以游戏为主题的网站，例如“火爆...
【前端】学成在线网页项目练习制作
刘佳皓_Leo
10-05 725
学习前端路上的一个练习。
前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）
weixin_49555741的博客
03-20 8321
1. 案例准备工作 1.1 准备素材和工具 （素材在最后有链接哦） 学成在线PSD源文件 开发工具：Photoshop（切图）/cutterman插件+vscode（写代码）+chrome（测试） 1.2 vscode案例准备 创建目录LearnOnline文件夹，存放页面的相关材料。 用vscode打开文件夹。 在LearnOnline文件夹里新建images文件夹来保存图片。 新建首页文件index.html（首页网站统一命令index.html）。 新建style.css样式
HTML/CSS/JS 实战教程：综合案例与网站开发流程
"该资源是一份关于HTML初级学习的教程，着重于综合案例的实践，旨在帮助学习者理解和应用HTML进行网页制作。教程包括HTML、CSS以及JavaScript的相关内容，特别强调了通过实例来提升技能。" 在网页开发领域，HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

什么时候养猫猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值