项目八古诗词调查问卷（2）

最新推荐文章于 2025-05-05 22:33:48 发布

书剑风雪

最新推荐文章于 2025-05-05 22:33:48 发布

阅读量881

点赞数 23

分类专栏： Web前段网页开发文章标签： tensorflow html5 css css3 前端框架前端 webpack

本文链接：https://blog.csdn.net/Chinatown666/article/details/144368642

版权

【项目目的】

掌握盒模型的相关CSS属性
深刻理解浮动与定位的工作原理

【项目内容】

能够设计相对简单、规整的页面布局，划分各个区域的宽度。
灵活运用盒模型和浮动定位的相关知识进行T型布局。

【项目步骤】

本项目主要完成占诗词调查页面和李白代表作品页面的CSS设计。

素材是项目四的结果网页文件 questionnaire1.html 和css 文件夹中的样式文件等，完

成下列步骤。

1.修改 main.css 样式文件

请将 questionnaire1.html 另存为 questionnaire2.html，在该文件中引用 main.css 样式文件，即在<head>标签中加入<link rel="stylesheet" href="./css/main.css”>语句，注意对比页面布局的变化。

利用 Sublime 打开素材 css 文件夹中的文件 main.css，按要求添加样式设置。

（1）页面主体设置

①清除浏览器原有的内外边距，均设置为0。其代码为：*｛margin:0:padding:0｝。

2设置 main 部分的外边距为 30px auto。

（2）主目录部分设置

①先将前期隐藏的主目录显示出来，即删除语句 header｛overflow: hidden；｝；

将header 部分的左内边距设置为 100px；
设置 header 内img 为左浮动；

设置 header 内 ul 右外边距为400px；
设置 header内 nav 下Ii元素：去掉圆点，左浮动；

（3）页面底部

设置footer 上下内边距为10px，左右内边距为 Opx；
设置 footer 内 nav 的下外边距为 20px；

2. 打开素材 css 文件中的 questionnaire.css 文件，添加以下样式设置，并在页面questionnaire2.html 中引入 questionnaire.css 文件，注意对比页面布局的变化。

（1）页面主体设置，设置 body 部分的宽度为 1200px，上下边距为0，左右居中（即

margin:0 auto;).

（2）设置table 部分为合并边框，宽度 1000px，左右居中。

（3）表格列 td 的内边距是 5px。

（4）设置id为intr部分：字体为"huawenxinwei”，字号20px，内边距为10px。
样式设置完成后，效果对比如项目图8-1所示。

项目图8-1古诗词调查问卷（2）页面效果对比

3.打开素材css文件夹中的libai-representativeworks.css文件，添加样式设置，使用
<link>标签将其导入网页文件libai-representativeworks3.html，注意对比页面布局的变化。
（1）利用后代选择器选择单元格maintabletrtd，设置内边距10px。
（2）设置main部分的section元素，内边距5px，外边距3px。
（3）设置main部分的h2元素，下外边距5px。

未修改的古诗词调查问卷代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调查问卷</title>    
</head>
<body >

    <header>
        <nav>
            <img src="./images/logo.png">
            <ul>
                <li><a href="#">首页</a></li>
                <li>李白</li>
                <li>杜甫</li>
                <li>白居易</li>
                <li><a href="#">调查问卷</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <form action="ok.html" method="post">
            <table border="1" background="./images/tableBg.jpg">
                <tr><th colspan="2"><h1>古诗词调查问卷</h1></th></tr>
                 <tr>
                   <td id="intr" colspan="2">自春秋萌芽，到唐宋巅峰。古诗词作为我们中华文明的见证者！<br>亲爱的朋友们，为了更好的弘扬国学经典，下面我们想通过这份调查问卷来了解你对古诗词的了解程度以及对古诗词的兴趣。</td>
                </tr>
                <tr><td>您的职业类别</td><td><select name="work" multiple="true" size="3">