【相册】 .album{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px; justify-content: center; } .album img{ width: 100%; height: auto; } 【视频】 .video{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 20px; justify-content: center; } .video iframe{ width: 100%; height: 200px; } 【文字】 .text{ text-align: center; } .text p{ padding: 10px; font-size: 1.2em; } 【关于】 .about{ text-align: center; } .about img{ width: 200px; height: 200px; border-radius: 50%; } 二、html文件 导航 foot区的css源代码 【首页】 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles/home.css" /> </head> <body> <div class="content"> <h1>Welcome to our website</h1> <p>This is the homepage of our website. Feel free to explore!</p> </div> <a class="button" href="album.html"> <ul> <li>Album</li> </ul> </a> </body> </html> 【导航栏 foot底部的css源代码】 .footer{ background-color: #333; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; } .footer a{ color: white; text-decoration: none; } .footer a:hover{ text-decoration: underline; } 三、页面展示总结 以上是我大一下学期的网页期末作业,使用纯html和css实现了首页、相册、视频、文字、关于等五个页面。在布局方面还有很多需要改进的地方,希望大家能提出建议和意见。同时,也希望这个作业能够给大家一些参考和启发。如果想查看更多详情,可访问b站展示链接。感谢大家的关注和支持!
![](https://csdnimg.cn/release/download_crawler_static/87733705/bg4.jpg)
剩余16页未读,继续阅读
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/fd66e8cf957947d6a2f1b1392051335c_stephen___qin.jpg!1)
- 粉丝: 1172
- 资源: 455
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)