【JavaWeb程序设计】页面编程

最新推荐文章于 2026-05-15 16:34:40 发布

原创

最新推荐文章于 2026-05-15 16:34:40 发布 · 2.5k 阅读

标签

#html #css #前端

一、使用div+CSS实现页面的布局

以下代码实现如图的页面布局，请完善相关代码

1. HTML结构代码


<div id="Container">
<div id="header">顶部（header）</div>

<!-- 主体部分（main）开始 -->
<div id="main"> 

<div class="cat content">商品内容(cat)内容(content)</div>
<div class="sidebar">右侧(sidebar)</div>

</div>
<!-- 主体部分（main）结束 -->

<div id="footer">底部（footer）</div>
</div>

2. CSS样式代码

/*主面板样式*/
#Container {
  width:980px;
  margin:0px auto;/*主面板DIV居中*/
}

/*顶部面板样式*/
#header {
  width:500px;
  height:100px;
  border:1px #F00 solid;
}

/*中间部分面板样式*/
#main {
  width:500px;
  height:200px;
  border:1px #F00 solid;
}

/*底部面板样式*/
#footer {
  width:500px;
  height:100px;
  border:1px #F00 solid;
}

.cat, .content {
  float:left;
  width:250px;
  height:auto;
}

.sidebar {
  float:right;
  width:115px;
  height:auto;
}

3. 运行截图

二、使用各类标签制作一个静态页面

效果如下（可以使用其他图片代替下图中图片的内容）

1. 我做的页面运行截图

（按个人喜好修改了背景颜色和线条颜色）

2. HTML结构代码

<!--思路：大框架分为左右两部分；
          左边和右边都可以分为上下两部分；
          除了图片字体部分可以分为四部分，除了最左边的部分外其余部分在左边加竖线；
          由于字体需要左对齐，可以放在table里面保持格式一致
          其他小细节再处理一下
    最后一部分上下分开-->
<div id="main-container">
    <div id="left-container">
        <div class="title blueText">新歌首发</div>
        <!--            图片-->
        <div id="main-picture">
            <img src="新歌1.jpg" class="poster">
            <img src="新歌2.jpg" class="poster">
        </div>


        <div id="content-container">
            <div class="little-content">
                    <table width="97%">
                        <tr>
                            <th>新歌榜</th>

最低0.47元/天解锁文章