【免费】222020321062095_方承煜_实验报告-21资源-CSDN文库

需积分: 0 175 浏览量 2022-08-03 19:09:58 上传评论收藏 965KB PDF 举报

【实验报告】——掌握<div>和CSS构建电影网站实验目的：本次实验的主要目标是学习并掌握<div>盒子以及相关的CSS功能。通过使用<div>和CSS，我们将构建一个电影信息网站，并创建一个960像素宽的12列网格布局网站。详细要求： 1. 基于原有视频网站的信息，我们需要创建多个<div>盒子，并利用CSS来控制这些<div>的长度、宽度以及背景颜色。这样既能保证实用性，也能使网页更加美观。例如，我们可以构建一个包含电影信息的网站。 2. 创建一个空白页面，引入960_12_col.css样式表。利用自定义的CSS表格和960.gs 12列CSS布局，制作一个多行多列的网站框架，并在每个网格中标注宽度信息。例如，我们要构建一个960像素宽的12列网站框架。注意事项： 1. 尽量运用课堂上学习的知识，使用更多样化的代码和元素，使网页具有更强的实用性和美观性。 2. 确保代码语法正确，具有较高的可读性。操作流程（Ex1：网站代码 - HTML【页面1：index】）： ```html <!doctype html> <html> <head> <meta charset="utf-8"> <title>今日影讯</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> </style> </head> <body> <div class="a1">  <div class="a2">  <a href="jiang.html"> <img src="pic/jiangziya.jpg" align="top" alt="姜子牙海报"/> </a> <div class="a3">  <p align="left"> <a href="jiang.html"><font size="+2">《姜子牙》</font> <br><br>    该片讲述了封神大战之后，姜子牙因一时之过被贬下凡间，失去神力，被世人唾弃。为重回昆仑，姜子牙踏上旅途寻回自我的故事。</a></p> </div> </div>  </div>  </body> </html> ``` 在这个HTML代码中，我们使用了<div>元素来组织网页内容，创建了电影展示的结构。`class="a1"`用于整个电影区域，`class="a2"`表示单个电影的展示单元，而`class="a3"`则用于放置电影的详细信息。同时，我们通过`<a>`标签实现链接到电影详情页，并用`<img>`标签展示电影海报。为了使页面更具美感和响应式设计，我们需要在`<style>`标签内编写CSS代码，来设置各个元素的样式。例如，我们可以设置<div>的宽度、高度、内边距、外边距，以及背景颜色等。此外，对于图片的大小、对齐方式，以及文字的字体、大小、颜色等也要进行相应调整。 Ex2：创建960px 12col网站框架这个部分需要利用960.gs CSS框架，它提供了一种快速构建网格布局的方法。通过引入`960_12_col.css`，我们可以轻松创建12列的布局。在CSS中定义每个单元格的宽度，然后在HTML中使用对应的类来创建这些单元格。每个单元格内部可以进一步划分，形成多行多列的结构。总结：本实验旨在深化理解<div>和CSS在构建网页中的应用。通过实际操作，我们可以熟练掌握如何使用<div>组织网页内容，以及如何利用CSS进行布局和美化。同时，960像素宽的12列网格布局是网页设计中常用的一种方式，能够帮助我们高效地创建响应式的网页结构。完成这两个实验任务后，不仅能够提升我们的编码技巧，还能增强网页设计的实践能力。

资源详情

资源评论

资源推荐