实验二 HTML页面编程

码农幻想梦

已于 2024-09-26 12:04:44 修改

阅读量994

点赞数 14

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

于 2024-09-21 10:39:16 首次发布

本文链接：https://blog.csdn.net/2301_76979886/article/details/142412475

版权

Java Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实验二 HTML页面编程

ps：来自菜鸟的代码，到时候会看看兑生的代码进行更新。

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

实验步骤及原理：
1、使用div+CSS实现页面的布局。
使用div和CSS来实现布局，可以更加灵活。
以下代码实现如图的页面布局，请完善相关代码

HTML结构代码：
CSS样式代码：
/主面板样式/
#container {
width:980px;
margin:0px auto;/主面板DIV居中/
}
/顶部面板样式/
#header {
width: 100% ;
height: 100px ;
border:1px #F00 solid;
}
/中间部分面板样式/
#main {
width: 100% ;
height: 230px ;
border:1px #F00 solid;
}
/底部面板样式/
#footer {
width: 100% ;
height: 100px ;
border:1px #F00 solid;
}

.cat, .content {
float: left == ;
width: 70%
height: == auto ;
}
.sidebar {
float: right ;
width: ==25% == ;
height: auto ;
}

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

在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <style>
        body {
            font-family: SimSun, serif;
            font-size: 12px;
            margin:0;
            padding:0;
        }
        .container {
            border: 2px solid #000; /* 黑色边框，宽度为2px */
            padding: 10px; /* 内边距，让内容不会紧贴边框 */
            /*  width: 88%;宽度为浏览器窗口的80% */
            margin: 20px auto 0;
            max-width: 405px; /* 最大宽度为405px，以防屏幕过大时内容过于分散 */
        }
        .title {
            font-size: 24px; /* 假设三号字体约等于24px */
            font-weight: bold;
            text-align: center;
        }
        .box1{
            font-size:12px;
            text-align: center;
        }
        .name {
            font-family: 'FangSong', serif; /* 尝试使用仿宋字体，但实际可能需引入字体文件 */
            font-size: 24px; /* 假设三号字体约等于24px */
        }
        .indended-text{
            text-indent: 2em;
            line-height: 19px;
        }
        table {
            border: 1px solid black;
            border-collapse: collapse;/* 边框合并，使得表格看起来更紧凑 */
        }
        th, td {
            border: 1px solid black; /* 设置边框 */
            padding: 8px; /* 设置内边距，使内容不会紧贴边框 */
            width: 5%; /* 设置每个单元格的宽度为表格宽度的5% */
            /* 或者使用固定宽度，如 width: 100px; */
        }
        /* 单独为th设置样式 */
        th {
            font-weight: normal; /* 取消字体加粗 */
        }
        .image{
            position: absolute;
            top: 4px;
            right: 20px;
            width: 80px; /* 或者根据需要调整 */
            height: 5px; /* 高度由图片决定 */
        }
        .container2 {
            position: relative; /* 确保.image-wrapper能够相对于它定位 */
        }
        ul li {
            /* 调整列表项之间的间距 */
            margin-bottom: 10px; /* 或者使用padding-bottom: 10px; 取决于你的具体需求 */
            line-height: 13px; /* 如果需要调整行内文本的垂直间距 */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="container2">
        <div class="image">
            <img src="1.png"  width="92" height="90">
        </div>
    </div>
    <div class="title">个人简历</div>
    <div class="box1">
        <p>Wjj@qq.com</p>
    </div>
    <div>
        <p>
            <span class="name">王大帅</span>，男，1988年出生于广东省广州市<hr>
        </p>
        <br>
    </div>
    <div>
        <p>教育背景<hr></p>
        <p>2010年本科毕业于<a href="https://www.sysu.edu.cn/">中山大学</a>，语言学</p>
        <p>2011年硕士毕业于中山大学，历史学</p>
        <br>
    </div>
    <div>
        <p>专业能力<br><hr></p>
        <p>1. 语言能力:</p>
        <ul>
            <li>具有较强的英语听说读写能力。</li>
            <li>CET-4:合格，CET-总分428</li>
            <li>具有初级日语听说读写能力</li>
            <li>普通话流利，具有较强语言表达能力</li>
        </ul>
        <p>2. 计算机能力:</p>
        <ul>
            <li>通过四川省计算机等级考试1级</li>
            <li>熟悉Excel, PowerPoint等Office软件</li>
        </ul>
        <p>3．主修课程:</p>
        <p class = "indended-text">
            现代汉语，法律基础，主要英语国家社会与文化，高级语言程序设计，日语，教育学， 教育心理学，英美文学史，英美文学阅读，英语教学法，高级英语，英语语言学
        </p>
        <table>
            <tr>
                <th>课程</th>
                <th>成绩</th>
            </tr>
            <tr>
                <td>现代汉语</td>
                <td>95</td>
            </tr>
            <tr>
                <td>法律基础</td>
                <td>90</td>
            </tr>
        </table>
        <br>
        <p>个人评价<hr></p>
        <p class = "indended-text">
            我相信“选择一家企业，就是选择一种生活”，我非常喜欢贵公司的“生活”，诚心希望能给我个一展所长的机会！
        </p>
    </div>
</div>
</body>
</html>