【JavaWeb程序设计】页面编程

布丁椰奶冻

于 2024-07-04 14:01:55 发布

阅读量417

点赞数 10

分类专栏： JavaWeb程序设计文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_67830223/article/details/140165297

版权

JavaWeb程序设计专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、使用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>
                            <th>TOP 100</th>
                            <th class="blueText">更多>></th>
                        </tr>

                    </table>
                <table width="82%">
                    <tr><td><span class="redText">1</span>    <span>青春再见</span></td><td>水木年华</td></tr>
                    <tr><td>2    Baby,do..</td><td>EXO-M</td></tr>
                    <tr><td>3    青春</td><td>韩红</td></tr>
                    <tr><td>4    想你的距离</td><td>戴爱玲</td></tr>
                    <tr><td>5    波爷</td><td>周杰伦/...</td></tr>
                    <tr><td>6    我知道你离..</td><td>陈楚生</td></tr>
                    <tr><td>7    蝴蝶少女</td><td>EXO-M</td></tr>
                    <tr><td>8    不忙不爱</td><td>刘德华/...</td></tr>
                    <tr><td>9    天机</td><td>阿信/...</td></tr>

                </table>
            </div>

            <div class="little-content bigline">
                <table width="97%">
                    <tr>
                        <th>热歌榜</th>
                        <th>TOP 100</th>
                        <th class="blueText">更多>></th>
                    </tr>
                </table>

                <table width="82%">
                    <tr><td><span class="redText">1</span>    <span class="blueText">致青春</span></td><td>王菲</td></tr>
                    <tr><td>2    <span class="blueText">光阴的故事</span></td><td>黄晓明/..</td></tr>
                    <tr><td>3    <span class="blueText">时间煮雨</span></td><td>郁可唯</td></tr>
                    <tr><td>4    千千阙歌</td><td>陈慧娴</td></tr>
                    <tr><td>5    风吹麦浪</td><td>李健/孙俪</td></tr>
                    <tr><td>6    情话</td><td>徐良</td></tr>
                    <tr><td>7    最炫民族风</td><td>凤凰传奇</td></tr>
                    <tr><td>8    吻别</td><td>张学友</td></tr>
                    <tr><td>9    领悟</td><td>李晓琪</td></tr>
                </table>
            </div>
            <div class="little-content bigline">
                <table width="98%">
                    <tr>
                        <th>歌手榜</th>
                        <th>TOP 100</th>
                        <th class="blueText">更多>></th>
                    </tr>
                </table>
                <table width="82%">
                    <tr><td><span class="redText">1</span>    <span>凤凰传奇</span></td><td>11    小蓓蕾</td></tr>
                    <tr><td>2    王菲</td><td>12    黄晓明</td></tr>
                    <tr><td>3    陈奕迅</td><td>13    汪峰</td></tr>
                    <tr><td>4    周杰伦</td><td>14    冷漠</td></tr>
                    <tr><td>5    刘德华</td><td>15    李玟</td></tr>
                    <tr><td>6    邓丽君</td><td>16    Beyond</td></tr>
                    <tr><td>7    徐良</td><td>17    陈慧娴</td></tr>
                    <tr><td>8    林志炫</td><td>18    郁可唯</td></tr>
                    <tr><td>9    张学友</td><td>19    EXO_M</td></tr>

                </table>
            </div>
        </div>

    </div>
    <div id="right-container" class="bigline">
        <div id="up-container">
            <div class="title blueText">音乐分类 <span class="font blueText fontRight">更多>></span></div>
            <div class="song-list"><span>经典老歌</span>  <span class="line-left blueText">日韩</span><span class="line-left">90后</span><span class="line-left">甜蜜</span><span class="line-left blueText">欧美</span></div>
            <div class="song-list"><span>网络歌曲</span>  <span class="line-left">伤感</span><span class="line-left">劲爆</span><span class="line-left">80后</span><span class="line-left">民谣</span></div>
            <div class="song-list"><span>深情</span>  <span class="line-left blueText">  DJ舞曲  </span><span class="line-left">安静</span><span class="line-left">儿歌</span><span class="line-left">励志</span></div>
            <div class="song-list"><span>慢摇</span>  <span class="line-left">小清新</span><span class="line-left">喜悦</span><span class="line-left">70后</span><span class="line-left">成名曲</span></div>
            <div class="song-list"><span class="blueText">古风</span>  <span class="line-left">中国风</span><span class="line-left">怀旧</span><span class="line-left">对唱</span><span class="line-left">纯音乐</span></div>
            <div class="song-list"><span>舞曲</span>  <span class="line-left">激情</span><span class="line-left">影视歌曲</span><span class="line-left blueText">天籁</span><span class="line-left">舒服</span></div>
            <div class="song-list"><span>轻音乐</span>  <span class="line-left">好听</span><span class="line-left">钢琴曲</span><span class="line-left">情歌</span><span class="line-left">背景</span></div>
        </div>

        <div id="down-container">
            <div class="title">推荐歌手 <span class="font blueText fontRight">更多>></span></div>
            <div>         <span class="blueText">+</span> </div>
            <div id="head-picture-container">
                <img src="推荐歌手2.jpg" class="head-picture"> <img src="推荐歌手1.jpg" class="head-picture"> <img src="推荐歌手3.jpg" class="head-picture">
            </div>
        </div>

    </div>
</div>

3. CSS代码

#main-container {
    /* 给父级添加flex属性 */
    display: flex;
    width: 100%; /*宽度*/
    padding: 3px 10px 3px 10px; /*填充内边距属性：上 右 下 左*/
    margin: 0 auto; /*div居中*/
}
body{
    background-color: mistyrose; /*背景颜色铺满全部*/
}
/*左边的大框架*/
#left-container {
    width: 70%;
    flex-direction: column;
    /*border: 2px blue solid;*/
}
/*右边的大框架*/
#right-container {
    width: 24%;
    flex-direction: column;
    /*border: 2px red solid;*/
}
/*右上框架*/
#up-container {
    height: 66%;
    /*border: 1px #FF0000 solid;*/
}
/*右下框架*/
#down-container {
    height: 34%;
    /*border: 1px #FF0000 solid;*/
}

/*标题加粗*/
.title {
    font-size: 16px;
    line-height: 30px;
    font-weight: bolder;
}

.font {
    font-size: 16px;/*普通字体*/
}
.blueText {
    color: cornflowerblue;/*蓝色字体*/
}
.redText{
    color: #FF0000;/*红色字体*/
}
.fontRight {
    float: right;
}
/*左下框架*/
#content-container {
    float: left;
    display: inline;
    width: 100%;
}
/*左下分三部分*/
.little-content {
    float: left;
    width: 32%;
    flex-direction: row;
    height: auto;
}
/*线条*/
.line-left {
    border-left: 1px darkgrey solid;
    padding-right:8px;
    padding-left:8px;
}
.bigline{
    border-left: 2px darkgrey solid;
}
/*左上的海报布局*/
.poster {
    width: 450px;
    height: 235px;
    margin: 0px;
    padding: 0px;
    display: block;
    float: left;
}
/*右下的图片布局*/
.head-picture {
    width: 100px;
    height: 120px;
    margin-right: 3px;
    padding: 0px;
    display: block;
    float: left;
}
.song-list {
    margin: 27px 0px 27px 10px; /*右上字体距离*/
}
#head-picture-container {
    margin-top: 20px;
}
th{
    padding: 8px;
}
td {
    padding: 7px;
    text-align: left;
}

三、心得体会

1. 掌握了基本的HTML语法，学会用CSS编写简单页面。

2. 由于HTML语言的简洁和结构化，比较容易理解和编写。通过使用不同的标签和元素，我掌握了创建页面的基本框架和布局。不仅学会了如何创建标题和表格等基本的网页元素，同时我也知道如何嵌套元素和使用属性来调整它们的样式和行为。

3. CSS允许我们通过样式规则来定义网页元素的外观和布局。通过选择器和属性，我能够选择特定的元素并对其进行样式设置。学会了如何调整字体、颜色、背景和边框等元素的外观，学会插入图片制造简单的静态页面。

布丁椰奶冻

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb程序设计】页面编程

一、使用div+CSS实现页面的布局1. HTML结构代码2. CSS样式代码3. 运行截图二、使用各类标签制作一个静态页面1. 我做的页面运行截图2. HTML结构代码3. CSS代码
复制链接

扫一扫

专栏目录