学成在线官网首页完整版（含psd源文件）

最新推荐文章于 2025-02-05 14:45:34 发布

web13638590209

最新推荐文章于 2025-02-05 14:45:34 发布

阅读量9.7k

点赞数 7

分类专栏：前端 html 面试文章标签： ui

本文链接：https://blog.csdn.net/web13638590209/article/details/123081212

版权

本文介绍了如何从PSD源文件出发，通过HTML和CSS代码实现网页的构建过程。作者分享了源代码，并强调此过程对提升新手的HTML和CSS技能大有裨益。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一，案例展示
1.源代码
总结

前言

按照psd图片一点点代码敲出来的，开始的时候是跟着老师做的后来就是自己自由发挥了。

psd的文件可以去直接下载这位老师的，源代码和照片都放在这里可以去查看，希望对你有用。

一、案例展示

1.源代码

html代码：

?
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--1.头部区域开始了-->
<div class="header w">
    <!--    头部-->
    <div class="logo">
        <img src="images/logo.png" alt="">
    </div>
    <div class="nav">
        <ul><!--开发中我们都是会使用（li包含a） 的做法，使用li+a语义更清晰不会影响网站的排名*/-->
            <li><a href="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
    </div>
    <div class="search">
        <input type="text" value="输入关键词">
        <button></button>
    </div>
    <div class="user">
        <img src="images/user.png" alt="">
        qq-ShenDaHai
    </div>
</div>

<!--2.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="">人工智能<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="">UI设计<span>></span></a></li>
                <li><a href="">产品<span>></span></a></li>
            </ul>
        </div>
        <div class="course">
            <h2>我的课程表</h2>
            <div class="bd">
                <ul>
                    <li><h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p></li>
                    <li><h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p></li>
                    <li><h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p></li>
                </ul>
                <a href="" class="more">全部课程</a>
            </div>
        </div>
    </div>

</div>

<!--3.精品推荐模块开始-->
<div class="goods w">
    <h3>精品推荐</h3>
    <ul>
        <li><a href="">JQuery</a></li>
        <li><a href="">Spark</a></li>
        <li><a href="">MySQL</a></li>
        <li><a href="">JavaWeb</a></li>
        <li><a href="">MySQL</a></li>
        <li><a href="">MySQL</a></li>
    </ul>
    <a href="" class="mod">修改兴趣</a>
</div>

<!--4.box核心内容开始-->
<div class="box w">
    <div class="hd">
        <

最低0.47元/天解锁文章