一、在网页中显示文字和动画（15分） 1. 在网页中显示“山东旅游职业学院”，颜色为绿色，字号为24，字体为楷体，样式为加粗，文字从左向右滚动。（7.5分） 2. 在网页中显示“欢迎参加网页制作考试”，颜色为紫色，字号为20，字体为黑体，文字闪烁显示。（7.5分）二、创建有序列表和无序列表（15分） 1. 用有序列表在网页中显示以下内容：四季顺序： A. 春 B. 夏 C. 秋 D. 冬（7.5分） 2. 用无序列表在网页中显示以下内容：编程语言  Python  Java  C++  Ruby  Swift （7.5分）三、设计表格（20分） 1. 用HTML语言在网页中设计如下表格，并应用不同的边框样式和背景颜色：表格包含姓名、年龄、性别和职业四列，每列宽度不同，字体为宋体。（10分） 2. 用HTML语言在网页中设计一个书籍统计表格，包含书名、作者、出版年份和价格四列，并设置不同列的字体

以下是根据你需求生成的完整 HTML 代码： ```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> /* 一、文字和动画样式 */ .scrolling-text { color: green; font-size: 24px; font-family: 楷体; font-weight: bold; } .blinking-text { color: purple; font-size: 20px; font-family: 黑体; animation: blink 1s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* 三、表格样式 */ table { font-family: 宋体; } /* 四、表单样式 */ form { margin-top: 20px; } /* 五、图形设计样式 */ .circle { width: 100px; height: 100px; background-color: blue; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; } .rectangle { width: 200px; height: 100px; background-color: yellow; display: flex; justify-content: center; align-items: center; } </style> </head> <body>  <marquee class="scrolling-text">山东旅游职业学院</marquee> <p class="blinking-text">欢迎参加网页制作考试</p>  <ol> <li>四季顺序：</li> <li>A. 春</li> <li>B. 夏</li> <li>C. 秋</li> <li>D. 冬</li> </ol> <ul> <li>编程语言</li> <li>Python</li> <li>Java</li> <li>C++</li> <li>Ruby</li> <li>Swift</li> </ul>  <table border="1"> <tr> <th style="width: 100px;">姓名</th> <th style="width: 80px;">年龄</th> <th style="width: 60px;">性别</th> <th style="width: 120px;">职业</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> <td>工程师</td> </tr> </table> <table border="1"> <tr style="background-color: lightgray;"> <th style="font-family: 黑体; background-color: lightblue;">书名</th> <th style="font-family: 隶书; background-color: lightgreen;">作者</th> <th style="font-family: 仿宋; background-color: lightyellow;">出版年份</th> <th style="font-family: 楷书; background-color: lightpink;">价格</th> </tr> <tr> <td>《HTML 入门》</td> <td>李四</td> <td>2023</td> <td>50</td> </tr> </table>  <form> <label for="email">电子邮箱：</label> <input type="email" id="email" name="email"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <label>性别：</label> <input type="radio" id="male" name="gender" value="男"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="女" checked> <label for="female">女</label><br> <label for="grade">年级：</label> <select id="grade" name="grade" size="3"> <option value="大一">大一</option> <option value="大二">大二</option> <option value="大三">大三</option> </select><br> <label for="feedback">意见反馈：</label><br> <textarea id="feedback" name="feedback" rows="4" cols="40"></textarea> </form>  <div class="circle">欢迎</div> <div class="rectangle">考试进行中...</div> </body> </html> ``` 额外需要注意的逻辑点 1. 在设计表单时，要注意每个输入框和表单元素的`name`属性，它是表单数据提交时的关键标识，不同元素的`name`不能重复。 2. 对于表格的样式设置，不同浏览器可能对表格边框、颜色等样式的渲染有细微差异，需要进行兼容性测试。 3. 在使用 CSS 动画（如文字闪烁动画）时，要考虑到不同浏览器对动画属性的支持情况，必要时添加浏览器前缀以保证兼容性。 [2025-06-13 09:22:37 | AI写代码神器 | 1423点数解答]

服务商

更多选项

快捷项

直通车