实现效果：
![效果图]( "效果图")
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> | </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>地址：浙江省杭州市电脑商城客户服务部 邮编：310002</p>
<p><a href="https://www.innyun.cn">Email:gykf@126.com</a></p>
<p>Copyright @ 2021 <a href="https://www.innyun.cn">电脑工作室</a> ALL Rights 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;
}
本文链接：https://blog.fanl.cn/archives/573.html
链接：https://www.uhmao.com
描述：很多事情知道结论就够了.
图标：https://oss.uhmao.com/logo.svg