javaweb 实验二

做人求其滴

已于 2024-09-27 23:16:53 修改

阅读量342

点赞数 5

分类专栏： JavaWeb 文章标签：前端 html javaweb GDPU

于 2024-09-27 11:28:35 首次发布

本文链接：https://blog.csdn.net/CH3CH2CH4/article/details/142588738

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我发现了有些人喜欢静静看博客不聊天呐，

但是ta会点赞。

这样的人呢帅气低调有内涵，

美丽大方很优雅。

说的就是你，

不用再怀疑哦

实验二 HTML页面编程

目的：

掌握基本的HTML语法
熟悉页面布局的方式
学会使用CSS进行进行页面渲染

实验步骤及原理：

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

使用div和CSS来实现布局，可以更加灵活。

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

HTML结构代码：
<div id="Container">
<div id="header">顶部（header）</div>
<div id="main">
<!--主体部分（main）-->
                                        
</div>
<div id="footer">底部（footer）</div>
</div>
CSS样式代码：
/*主面板样式*/
#container {
width:980px;
margin:0px auto;/*主面板DIV居中*/
}
/*顶部面板样式*/
#header {
width:          ;
height:             ;
border:1px #F00 solid;
}
/*中间部分面板样式*/
#main {
width:        ;
height:           ;
border:1px #F00 solid;
}
/*底部面板样式*/
#footer {
width:          ;
height:          ;
border:1px #F00 solid;
}

.cat, .content {
float:         ;
width:          
height:         ;
}
.sidebar {
float:      ;
width:       ;
height:         ;
}

【第一题参考代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

        /*顶部面板样式*/
        #header 
        {
            width: 100%; 
            height: 196px;
            border:1px #F00 solid;
        }
        /*中间部分面板样式*/
        #main 
        {
            width: 100%;
            height: 588px;
            border:1px #F00 solid;
        }
        /*底部面板样式*/
        #footer 
        {
            width: 100%;
            height: 196px;
            border:1px #F00 solid;
        }
        /* 商品分类（cat）内容（content）    */
        .cat, .content 
        {
            float: left;
            width: 70%; 
            height: 100%;
        }
        /* 右侧 */
        .sidebar 
        {
            /* float左右对齐 */
            float: right;
            width:  30%;
            height: 100%;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">顶部（header）</div>
        <div id="main">
            <!--主体部分（main）--> 
            <div class="cat, content">商品分类（cat）内容（content）</div>    
            <div class="sidebar">右侧（sidebar）</div>     

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

【运行结果】

2、使用各类标签制作一个静态页面，使其效果如下：

个人简历（三号字体）

Wjj@qq.com

王大帅(仿宋，3号)，男，1988年出生于广东省广州市

教育背景

2010年本科毕业于中山大学（此处为链接），语言学

2011年硕士毕业于中山大学，历史学

专业能力

1．语言能力:

具有较强的英语听说读写能力。
CET-4:合格，CET-总分428
具有初级日语听说读写能力
普通话流利
具有较强语言表达能力

2．计算机能力:

通过四川省计算机等级考试1级
熟悉Excel, PowerPoint等Office软件

3．主修课程:

现代汉语，法律基础，主要英语国家社会与文化，高级语言程序设计，日语，教育学，教育心理学，英美文学史，英美文学阅读，英语教学法，高级英语，英语语言学

课程	成绩
现代汉语	95
法律基础	90

个人评价

我相信“选择一家企业，就是选择一种生活”，我非常喜欢贵公司的“生活”，诚心希望能给我个一展所长的机会！

【第二题参考代码】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <style>
        body {
            font-family: "仿宋", sans-serif;
        }
        h3 {
            font-size: 2em;
        }
        .name {
            font-size: 1.5em;
            font-family: "仿宋", sans-serif;
        }
        .email {
            font-size: 1.2em;
        }
        ul, ol {
            margin-left: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .picture {
            position: absolute;
            top: 8px;
            right: 16px;
            height: 190px;
        }
    </style>
</head>
<body>
    <h3 style="text-align: center;">个人简历  <img src="./111.png" class="picture">  </h3>
    <p style="text-align: center;" class="email"><a href="mailto:Wjj@qq.com">Wjj@qq.com</a></p>
    <h3 class="name" style="text-align: center;">王大帅，男，1988年出生于广东省广州市
        
    </h3>
    <!-- 分割线 -->
    <hr>
    <h2>教育背景</h2>
    <!-- 分割线 -->
    <hr>
    <ul>
        <li>2010年本科毕业于<a href="http://sysu.edu.cn/">中山大学</a>，语言学</li>
        <li>2011年本科毕业于<a href="http://sysu.edu.cn/">中山大学</a>，历史学</li>
    </ul>

    <h2>专业能力</h2>
    <!-- 分割线 -->
    <hr>
    <ol>
        <li>语言能力:
            <ul>
                <li>具有较强的英语听说读写能力。</li>
                <li>CET-4:合格，CET-总分428</li>
                <li>具有初级日语听说读写能力</li>
                <li>普通话流利</li>
                <li>具有较强的语言表达能力</li>
            </ul>
        </li>
        <li>计算机能力:
            <ul>
                <li>通过四川省计算机等级考试1级</li>
                <li>熟悉Excel, PowerPoint等Office软件</li>
            </ul>
        </li>
        <li>主修课程: 现代汉语，法律基础，主要英语国家社会与文化，高级语言程序设计，日语，教育学，教育心理学，英美文学史，英美文学阅读，英语教学法，高级英语，英语语言学</li>
    </ol>

    <h2>课程成绩</h2>
    <table>
        <tr>
            <th style="text-align: center;">课程</th>
            <th style="text-align: center;">成绩</th>
        </tr>
        <tr>
            <td>现代汉语</td>
            <td>95</td>
        </tr>
        <tr>
            <td>法律基础</td>
            <td>90</td>
        </tr>
    </table>

    <h2>个人评价</h2>
    <!-- 分割线 -->
    <hr>
    <p>我相信“选择一家企业，就是选择一种生活”，我非常喜欢贵公司的“生活”，诚心希望能给我个一展所长的机会！</p>
</body>
</html>