网络设计作业(HTML CSS实现)
需积分: 0 11 浏览量
更新于2023-11-23
收藏 2.01MB DOCX 举报
ent .banner .text{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:white; text-align:center; font-size:24px;}.content .banner .text p{ margin-bottom:20px;}.content .banner .text a{ display: inline-block; padding:10px 20px; background:white; color:black; text-decoration:none; border-radius: 5px;}.content .banner .text a:hover{ background:gray;}/* 相册 */.album{ display:flex; flex-wrap: wrap; justify-content: space-around;}.album img{ width: 30%; margin-bottom: 20px;}.album img:hover{ transform: scale(1.1);}/* 视频 */.video{ display:flex; flex-wrap: wrap; justify-content: space-around;}.video video{ width:45%; margin-bottom:20px;}/* 文字 */.text-section{ width:80%; margin:0 auto;}.text-section p{ font-size:20px; line-height: 1.5;}/* 关于 */.about-section{ width:80%; margin:0 auto;}.about-section h2{ font-size:25px; margin-bottom:10px;}【导航栏 foot 底部的 css 源代码】footer{ background:black; color:white; text-align:center; padding:20px 0; position:relative; bottom:0; width:100%;}footer p{ margin:0;}/* 导航栏 */nav{ display: flex; justify-content: space-around; background: #f4f4f4;}.nav a{ text-decoration:none; color: black; padding: 10px 20px;}.nav a:hover{ background:gray; color:white;}
二、html 文件 导航 foot 区的 css 源代码【首页】<!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"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <div class="content"> <div class="banner"> <img src="banner.jpg" alt=""> <div class="text"> <p>Welcome to our website</p> <a href="#">Learn More</a> </div> </div> </div> <a href="#" class="button"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </a></body></html>【相册】<!DOCTYPE html><html></html>【视频】<!DOCTYPE html><html></html>【文字】<!DOCTYPE html><html></html>【关于】<!DOCTYPE html><html></html>【导航栏 foot 底部的 css 源代码】<!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"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <nav class="nav"> <a href="index.html">首页</a> <a href="album.html">相册</a> <a href="video.html">视频</a> <a href="text.html">文字</a> <a href="about.html">关于</a> </nav> <footer> <p>© 2022 Created by XXX</p> </footer></body></html>
三、页面展示具体页面展示请见附件内的网页文件。总结本次期末作业,我在纯 html 和 css 实现的网页中,分别展示了首页、相册、视频、文字、关于五个子页面,并且在每个页面都使用了独立的 css 文件来展示样式。导航栏和底部的信息也进行了统一的设计。这次作业让我学到了如何结合 html 和 css 来实现页面的布局和样式展示。希朿自己在今后的学习生活中能够不断提高这方面的能力,做出更多美观实用的网页。
2022-08-10 上传
2023-04-26 上传
2023-05-25 上传
2023-06-10 上传
2023-05-30 上传
2023-02-24 上传
2023-05-25 上传
2023-05-31 上传
![](https://profile-avatar.csdnimg.cn/fd66e8cf957947d6a2f1b1392051335c_stephen___qin.jpg!1)
CodingLife99
- 粉丝: 1174
- 资源: 456
最新资源
- 多模态联合稀疏表示在视频目标跟踪中的应用
- Kubernetes资源管控与Gardener开源软件实践解析
- MPI集群监控与负载平衡策略
- 自动化PHP安全漏洞检测:静态代码分析与数据流方法
- 青苔数据CEO程永:技术生态与阿里云开放创新
- 制造业转型: HyperX引领企业上云策略
- 赵维五分享:航空工业电子采购上云实战与运维策略
- 单片机控制的LED点阵显示屏设计及其实现
- 驻云科技李俊涛:AI驱动的云上服务新趋势与挑战
- 6LoWPAN物联网边界路由器:设计与实现
- 猩便利工程师仲小玉:Terraform云资源管理最佳实践与团队协作
- 类差分度改进的互信息特征选择提升文本分类性能
- VERITAS与阿里云合作的混合云转型与数据保护方案
- 云制造中的生产线仿真模型设计与虚拟化研究
- 汪洋在PostgresChina2018分享:高可用 PostgreSQL 工具与架构设计
- 2018 PostgresChina大会:阿里云时空引擎Ganos在PostgreSQL中的创新应用与多模型存储