GDPU Javaweb 天码行空2 HTML页面编程

最新推荐文章于 2024-10-15 15:24:52 发布

兑生

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量359

点赞数 6

分类专栏： # Java Web 文章标签： html 前端

本文链接：https://blog.csdn.net/lt6666678/article/details/142550681

版权

Java Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目的：

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

实验步骤及原理：

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

使用div和CSS来实现布局，可以更加灵活。
以下代码实现如图的页面布局，请完善相关代码
在这里插入图片描述

创建一个 布局示例.html 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面布局</title>
    <style>
        /*主面板样式*/
        #container {
            width: 980px;
            margin: 0px auto; /* 主面板DIV居中 */
        }

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

        /*中间部分面板样式*/
        #main {
            width: 100%;
            height: 300px;
            border: 1px #F00 solid;
            position: relative;
        }

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

        .cat, .content {
            float: left;
            width: 33%;
            height: 100%;
        }

        .sidebar {
            float: right;
            width: 33%;
            height: 100%;
			text-align: right; 
        }
    </style>
</head>
<body>

    <div id="container">
        <div id="header">顶部（header）</div>
        
        <div id="main">
            <!--主体部分（main）-->
            <div class="cat">商品分类(cat)</div>
            <div class="content">内容(content)</div>
            <div class="sidebar">右侧(sidebar)</div>
        </div>
        
        <div id="footer">底部（footer）</div>
    </div>

</body>
</html>

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

在这里插入图片描述

创建一个 简历.html 文件参考代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <style>
        body {
            font-family: 'SimSun', serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        /* 主容器 */
        #resume-container {
            width: 800px;
            margin: 0 auto;
        }

        /* 标题 */
        h1, h2, h3 {
            text-align: center;
        }

        /* 个人信息 */
        #personal-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #000;
            padding-bottom: 10px;
        }

        #personal-info img {
            border-radius: 50%;
            width: 120px;
            height: 120px;
        }

        /* 两列布局 */
        .left-right {
            display: flex;
            justify-content: space-between;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
            text-align: right;
        }

        /* 列表样式 */
        ul {
            list-style-type: disc;
            margin-left: 20px;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        table, th, td {
            border: 1px solid #000;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        /* Section Styling */
        section {
            margin-bottom: 20px;
        }

        #personal-details {
            line-height: 1.5;
        }
    </style>
</head>
<body>

<div id="resume-container">
    <!-- 标题 -->
    <h1>个人简历</h1>

    <!-- 个人信息 -->
    <div id="personal-info">
        <div id="personal-details">
            <p><strong>姓名：</strong></p>
            <p><strong>性别：</strong></p>
            <p><strong>出生日期：</strong></p>
            <p><strong>联系电话：</strong></p>
            <p><strong>电子邮件：</strong></p>
            <p><strong>地址：</strong></p>
        </div>
        <div id="profile-photo">
            <img src="https://via.placeholder.com/120" alt="个人照片">
        </div>
    </div>

    <!-- 教育背景 -->
    <section>
        <h2>教育背景</h2>
        <div class="left-right">
            <div class="left">学校 - 专业</div>
            <div class="right">入学时间 - 毕业时间</div>
        </div>
        <p>学位、GPA或其他信息</p>
    </section>

    <!-- 荣誉证书 -->
    <section>
        <h2>荣誉证书</h2>
        <ul>
            <li>证书名称或奖项</li>
            <li>证书名称或奖项</li>
            <li>证书名称或奖项</li>
        </ul>
    </section>

    <!-- 专业技能 -->
    <section>
        <h2>专业技能</h2>
        <ul>
            <li>技能 1</li>
            <li>技能 2</li>
            <li>技能 3</li>
            <li>技能 4</li>
            <li>技能 5</li>
        </ul>
    </section>

    <!-- 实习经历 -->
    <section>
        <h2>实习经历</h2>
        <div class="left-right">
            <div class="left">公司名称</div>
            <div class="right">实习时间</div>
        </div>
        <p>职位名称</p>
        <p>项目详情：</p>
        <ul>
            <li>职责 1</li>
            <li>职责 2</li>
            <li>职责 3</li>
            <li>职责 4</li>
        </ul>
    </section>

    <!-- 项目经历 -->
    <section>
        <h2>项目经历</h2>
        <p><strong>项目名称：</strong></p>
        <p>项目介绍：</p>
        <p><strong>技术架构：</strong></p>
        <p><strong>职责描述：</strong></p>
        <ul>
            <li>职责 1</li>
            <li>职责 2</li>
            <li>职责 3</li>
            <li>职责 4</li>
        </ul>
    </section>

</div>

</body>
</html>