文章	评论	标签
68	28	130

实现效果：

HTML（已引用外部样式，单html可实现效果）：

<!DOCTYPE html>
<!-- 加个狗头 -->
<!--           ▄              ▄-->
<!--          ▌▒█           ▄▀▒▌-->
<!--          ▌▒▒▀▄        ▀▒▒▒▐-->
<!--         ▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐-->
<!--       ▄▄▀▒▒▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐-->
<!--     ▄▀▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▐-->
<!--    ▐▒▒▒▄▄▄▒▒▒▒▒▒▒▒▒▒▒▒▒▀▄▒▒▌-->
<!--    ▌▒▒▐▄█▀▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐-->
<!--   ▐▒▒▒▒▒▒▒▒▒▒▒▌██▀▒▒▒▒▒▒▒▒▀▄▌-->
<!--   ▌▒▀▄██▄▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌-->
<!--   ▌▀▐▄█▄█▌▄▒▀▒▒▒▒▒▒░░░░░░▒▒▒▐-->
<!--  ▐▒▀▐▀▐▀▒▒▄▄▄css.134920.xyz▒▌-->
<!--  ▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒░░░░░░▒▒▒▐-->
<!--   ▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌-->
<!--   ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐-->
<!--    ▀www.fanl.cn▒▒▒▒▒ ▒▒▒▒▄▌-->
<!--    ▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀-->
<!--     ▐▀▒▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀-->
<!--    ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▀▀-->

<!-- 你看源码时，是否期待源码也同样注视(注释)着你-->
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
        <link rel="stylesheet" href="http://css.134920.xyz/homework/2023_12_6/css/style.css">
    </head>
    <body>
        <!-- 顶部 -->
        <div id="top">
            <!-- 左侧 -->
            <div class="top_left">
                <img src="http://css.134920.xyz/homework/2023_12_6/images/logo.gif" alt="">
            </div>
            <!-- 右侧 -->
            <div class="fanwo_top">
                <!-- 右上角小导航 -->
                <div class="fanwo_top_small">
                    <a href="">设为首页</a>
                    <span>&nbsp;|&nbsp;</span>
                    <a href="">加入收藏</a>
                </div>
                <!-- 顶部中间导航 -->
                <div class="fanwo_top_body">
                    <!-- <img src="images/nav_menu_head.gif" alt="">
                    <img src="images/nav_bg.jpg" alt="">
                    <img src="images/nav_menu_tail.gif" alt=""> -->

                    <div class="le_img">
                        <img src="http://css.134920.xyz/homework/2023_12_6/images/nav_menu_head.gif" alt="">
                    </div>
                    <div class="ce_img">
                        <ul>
                            <li><a href="https://blog.fanl.cn/archives/573.html">商城首页</a></li>
                            <li><a href="https://blog.fanl.cn/archives/573.html">网购学堂</a></li>
                            <li><a href="https://blog.fanl.cn/archives/573.html">购物指南</a></li>
                            <li><a href="https://blog.fanl.cn/archives/573.html">经验交流</a></li>
                            <li><a href="https://blog.fanl.cn/archives/573.html">支付选择</a></li>
                            <li><a href="https://blog.fanl.cn/archives/573.html">维修常识</a></li>
                            <li><a href="https://blog.fanl.cn/archives/573.html">安全网购</a></li>
                            <li><a href="https://blog.fanl.cn/archives/573.html">学堂活动</a></li>
                        </ul>
                    </div>
                    <div class="ri_img">
                        <img src="http://css.134920.xyz/homework/2023_12_6/images/nav_menu_tail.gif" alt="">
                    </div>
                </div>
            </div>

        </div>
        <!-- 中部 -->
        <div id="css_134920_xyz_homework_2023_12_6">
            <!-- 中部左侧 -->
            <div class="css_134920_xyz_homework_2023_12_6_left">
                <!-- 导航背景 -->
                <div class="css_134920_xyz_homework_2023_12_6_left_bg">
                    <a href="">学堂区</a>
                </div>
                <!-- 左侧链接 -->
                <div class="left_link">
                    <ul>
                        <li><a href="https://blog.fanl.cn/archives/573.html">电脑商城个人网店申请注册指南</a><span>2021-1-20</span></li>
                        <li><a href="https://blog.fanl.cn/archives/573.html">云计算的发展趋势和未来前景</a><span>2021-1-18</span></li>
                        <li><a href="https://blog.fanl.cn/archives/573.html">SAAS组件化管理维护视频教程</a><span>2021-1-15</span></li>
                        <li><a href="https://blog.fanl.cn/archives/573.html">网店后台管理维护视频教程</a><span>2021-1-11</span></li>
                        <li><a href="https://blog.fanl.cn/archives/573.html">商务网站发展的瓶颈与基于</a><span>2021-1-10</span></li>


                    </ul>
                </div>
                <!-- 底部图 -->
                <div class="css_134920_xyz_img">
                    <img src="http://css.134920.xyz/homework/2023_12_6/images/main_left_bottom_bg.gif" alt="" usemap="#isolate" width="311" height="80" />
                    <!-- map-area -->
                    <map name="isolate">
                        <!-- rect:矩形
                    coords：起始坐标，结束坐标 -->
                        <area shape="rect" coords="15,17,70,67" href="1.com" alt="资讯中心" />
                        <area shape="rect" coords="90,18,148,68" href="2.com" alt="资源交流" />
                        <area shape="rect" coords="163,15,222,67" href="3.com" alt="视频教程" />
                        <area shape="rect" coords="240,14,292,63" href="4.com" alt="作品展示" />
                    </map>
                </div>
            </div>
            <!-- 中部中间 -->
            <div class="css_134920_xyz_homework_2023_12_6_ce">
                <!-- 上方图 -->
                <div class="css_134920_xyz_homework_2023_12_6_top">
                    <img src="http://css.134920.xyz/homework/2023_12_6/images/main_mid_top.gif" alt="">
                </div>
                <!-- 底部 -->
                <div class="css_134920_xyz_homework_2023_12_6_buttom">
                    <!-- 左 -->
                    <div class="css_134920_xyz_homework_2023_12_6_buttom_left">
                        <div class="css_134920_xyz_homework_2023_12_6_buttom_text">
                            <a href="">学堂互动</a>
                        </div>
                        <span>COMMUNITICATION</span>

                    </div>
                    <!-- 右 -->
                    <div class="css_134920_xyz_homework_2023_12_6_buttom_right">
                        <div class="css_134920_xyz_homework_2023_12_6_buttom_text">

                            <a href="">商场加盟</a>
                        </div>
                        <span>DECLARATION FORM</span>

                    </div>
                </div>
            </div>
            <!-- 中部右侧 -->
            <div class="css_134920_xyz_homework_2023_12_6_right">
                <div class="css_134920_xyz_homework_2023_12_6_right_bg">
                    <div class="title">
                        <p>学堂宗旨</p>
                    </div>
                    <div class="text">
                        <p>在电脑学堂，您可以分享网络购物的经验和乐趣。同时，您也能结交到来自四面八方的朋友。学堂将为您提供一个自由宽松的学习交流环境，还会经常组织各种活动丰富大家的业余活动。我们秉承“没有最好，只有更好的服务理念，为客户提供一流的服务，让您足不出户便知天下事。
                        </p>
                    </div>
                </div>
            </div>

        </div>
        <!-- 底部 -->
        <div id="css_134920_xyz">
            <div class="css_134920_xyz_copyright">
                <p>地址：浙江省杭州市电脑商城客户服务部&nbsp;邮编：310002</p>
                <p><a href="https://www.innyun.cn">Email:gykf@126.com</a></p>
                <p>Copyright&nbsp;@&nbsp;2021&nbsp;<a href="https://www.innyun.cn">电脑工作室</a>&nbsp;ALL&nbsp;Rights&nbsp;Reserved</p>
            </div>
        </div>
    </body>
</html>

CSS：

/*           ▄              ▄
          ▌▒█           ▄▀▒▌
          ▌▒▒▀▄        ▀▒▒▒▐
         ▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐
       ▄▄▀▒▒▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐
     ▄▀▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▐
    ▐▒▒▒▄▄▄▒▒▒▒▒▒▒▒▒▒▒▒▒▀▄▒▒▌
    ▌▒▒▐▄█▀▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐
   ▐▒▒▒▒▒▒▒▒▒▒▒▌██▀▒▒▒▒▒▒▒▒▀▄▌
   ▌▒▀▄██▄▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌
   ▌▀▐▄█▄█▌▄▒▀▒▒▒▒▒▒░░░░░░▒▒▒▐
  ▐▒▀▐▀▐▀▒▒▄▄▄css.134920.xyz▒▌
  ▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒░░░░░░▒▒▒▐
   ▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌
   ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐
    ▀www.fanl.cn▒▒▒▒▒ ▒▒▒▒▄▌
    ▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀
     ▐▀▒▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀
    ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▀▀
你看源码时，是否期待源码也同样注视(注释)着你 */
* {
    margin: 0;
    padding: 0;
}

#top {
    background-image: url("../images/bgpic.jpg");
    height: 104px;
    width: 984px;
    margin: 0 auto;
}

.top_left {
    float: left;
    margin-top: 40px;
}

.fanwo_top {
    float: right;
}

.fanwo_top_small {
    margin-right: 15px;
    float: right;
    height: 30px;
    font-size: 15px;
    padding: 2px;
    font-weight: 500;
}

.fanwo_top_small a {
    color: black;
    text-decoration: none;
}

.fanwo_top_body {
    float: right;
    width: auto;
    margin-top: 55px;
}

.le_img {
    float: left;
    height: 50px;
    background: url("../images/nav_menu_head.gif") no-repeat;
}

.ce_img {
    float: left;
    height: 45px;
    background: url("../images/nav_bg.jpg") repeat-x;
}

.ce_img ul {
    list-style: none;
}

.ce_img li {
    float: left;
    margin: 6px 2px 0 2px;
}

.ce_img a {
    font-family: "黑体";
    text-decoration: none;
    color: white;
    font-size: 14px;
}

.ri_img {
    float: left;
    background: url("../images/nav_menu_tail.gif") no-repeat;
}

#css_134920_xyz_homework_2023_12_6 {
    margin: 0 auto;
    width: 984px;
    height: 300px;

}

/* css_134920_xyz_homework_2023_12_6_left */
.css_134920_xyz_homework_2023_12_6_left {
    float: left;
    width: 320px;
}

.css_134920_xyz_homework_2023_12_6_left_bg {
    padding: 8px;
    height: 35px;
    margin-top: 18px;
    background: url("../images/main_left_top_bg.jpg") no-repeat;
}

.css_134920_xyz_homework_2023_12_6_left_bg a {
    margin-left: 8px;
    text-decoration: none;
    color: #2D6CC7;
    font-family: "黑体";
    font-size: 18px;
    font-weight: bold;
}

.left_link {}

.left_link ul {
    margin: 0 0 0 15px;
}

.left_link li {

    list-style: none;
}

.left_link a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

.left_link span {
    float: right;
    margin-right: 15px;
    /* margin-left: 30px; */
    color: darkgray;
    font-size: 14px;
}

.css_134920_xyz_homework_2023_12_6_left .css_134920_xyz_img {
    margin-top: 18px;
}

/* css_134920_xyz_homework_2023_12_6_ce */
.css_134920_xyz_homework_2023_12_6_ce {
    float: left;
    width: 350px;
    /* border: 1px red solid; */
}

.css_134920_xyz_homework_2023_12_6_top {
    margin: 30px 0 0 10px;
}

.css_134920_xyz_homework_2023_12_6_buttom {
    height: 100px;
}

.css_134920_xyz_homework_2023_12_6_buttom a {
    text-decoration: none;
    color: black;
    font-family: "黑体";
}

.css_134920_xyz_homework_2023_12_6_buttom_text {
    margin: 75px 0 0 60px;
    font-weight: bold;
}

.css_134920_xyz_homework_2023_12_6_buttom_left {
    float: left;
    margin: 15px 20px 0 40px;
    height: 85px;
    background: url("../images/main_mid_bottom_01.gif") no-repeat;
}

.css_134920_xyz_homework_2023_12_6_ce span {
    font-size: 10px;
    color: darkgray;
    font-weight: bold;
}

.css_134920_xyz_homework_2023_12_6_buttom_right {
    float: left;
    height: 85px;
    margin: 15px 0px 0 20px;
    background: url("../images/main_mid_bottom_02.gif") no-repeat;
}

/* css_134920_xyz_homework_2023_12_6_right */
.css_134920_xyz_homework_2023_12_6_right {
    margin: 18px 0 0 18px;
    float: left;
    width: 275px;
    /* border: 1px red solid; */
}

.css_134920_xyz_homework_2023_12_6_right_bg {
    background: url("../images/main_right_bg.jpg") no-repeat;
}

.css_134920_xyz_homework_2023_12_6_right_bg .title {
    padding: 15px 0 0 25px;
    /* margin-left: 10px; */
    color: #2D6CC7;
    font-family: "微软雅黑";
    font-weight: bold;
    font-size: 16px;
}

.css_134920_xyz_homework_2023_12_6_right_bg .text {
    height: 250px;
    padding: 5px 10px 0 15px;
    font-size: 13px;
    text-indent: 28px;
    font-family: "微软雅黑";
    font-weight: 500;
}

#css_134920_xyz {
    width: 984px;
    margin: 0 auto;
    background: url("../images/footer_bg.gif") repeat-x;
}

.css_134920_xyz_copyright {
    padding: 10px 0 0 0;
}

.css_134920_xyz_copyright p {
    text-align: center;
    color: darkgray;
    font-family: "黑体";
    font-weight: bold;
}

.css_134920_xyz_copyright a {
    text-decoration: none;
    color: darkgray;
}

网页设计作业 - 电脑学堂页面

快乐的钟好烦

实现效果：

HTML（已引用外部样式，单html可实现效果）：

CSS：