网络设计作业（HTML CSS实现）
需积分: 0 130 浏览量
更新于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 来实现页面的布局和样式展示。希朿自己在今后的学习生活中能够不断提高这方面的能力，做出更多美观实用的网页。
radius: 5px;}.content .button ul li:nth-child(2){ background:none;
color:#FF9900; border:1px solid grey; border:none; width:100px;}
【文字】
.wrapper{background: white;}.box{ display:flex; margin:0 5%; flex-
direction: rows;}.box div{ margin:0 20px;}.box .list{ flex:2;
background:black; padding: 4% 4%; box-shadow: 0px 0px 40px
rgba(0,0,0,.1);}.box .list h1{ font-size:30px; color:#FF9900;}.box
.list h2{ font-size:14px; color:#444;}.box .list hr{ margin:20px
0;}.box .list .item ul li{ font-size:15px; background: #444; line-
height:48px; margin: 0 -10%; padding:0 10px; font-weight: 700;
opacity: 0.5; border-bottom: 1px solid #808080;}.box .list .item ul
li:hover{ transition: all 2s ease; opacity: 1;}.box .list .item ul
li:nth-child(){ transition: all 2s ease; opacity: 1;}.box .content{
flex:5; margin-bottom: 40px;}.box .content ul li{ background: #f9f9f9;
padding:40px; box-shadow: 0px 0px 40px rgba(0,0,0,.1);}/* .box .content ul
li:hover img{ transform: scale(1.03); transition: all 1s ease;}.box
.content ul li:hover h1{ color:#FF9900;} */.box .content ul li:hover{
transition: all 2s ease; border-radius: 50px; transform:
scale(1.03);}.box .content ul li img{ width:150px; height: 225px;
overflow: hidden; object-fit: cover;}.box .content ul li .neirong{
display:flex; margin:5% 0;}.box .content h1{ font-size:20px; font-
weight:bold;}.box .content p{ font-size: 14px; color:#444; margin:0
10px; font-weight: 500; text-indent: 2em;}.box .content ul li .other{
background:#808080; height:2px; width:100px; position:relative;
left:45%;}
【关于】
.wrapper .head{ display: flex; justify-content: center;}.wrapper .head
li{ background: #f9f9f9; margin:0 20px; height:450px;
width:450px; display: flex; flex-direction: column; justify-content:
center; align-items: center; box-shadow: 0px 0px 40px
rgba(0,0,0,.1);}.wrapper .head li:hover{ transition:all 1s ease;
height: 500px; transform: translate(0,-5px);}.wrapper .head li img{
height: 200px; width:200px; border-radius: 50%;}.wrapper .head li h5{
color:#444; margin: 20px; font-size:20px;}.wrapper .head li p{
margin: 10px; font-size: 18px; font-weight: 500;}.wrapper h1,.wrapper
p{ text-align: center;}.wrapper .box{ margin: 50px 0;}
二、html 文件+导航+foot 区的 css 源代码
【首页】
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-
ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8">
<![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--
><!--[if gt IE 8]> <html class="no-js"> <!--<![endif]--><html> <head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
content="IE=edge"> <title>首页</title> <meta name="description"
剩余16页未读，继续阅读
2021-06-25 上传
2022-08-10 上传
2023-04-26 上传
2023-08-22 上传
2022-12-17 上传
2021-12-06 上传
2024-06-26 上传
2023-11-08 上传
CodingLife99
- 粉丝: 1211
- 资源: 456
我的内容管理
展开
最新资源
- 前端协作项目：发布猜图游戏功能与待修复事项
- Spring框架REST服务开发实践指南
- ALU课设实现基础与高级运算功能
- 深入了解STK：C++音频信号处理综合工具套件
- 华中科技大学电信学院软件无线电实验资料汇总
- CGSN数据解析与集成验证工具集：Python和Shell脚本
- Java实现的远程视频会议系统开发教程
- Change-OEM: 用Java修改Windows OEM信息与Logo
- cmnd：文本到远程API的桥接平台开发
- 解决BIOS刷写错误28：PRR.exe的应用与效果
- 深度学习对抗攻击库：adversarial_robustness_toolbox 1.10.0
- Win7系统CP2102驱动下载与安装指南
- 深入理解Java中的函数式编程技巧
- GY-906 MLX90614ESF传感器模块温度采集应用资料
- Adversarial Robustness Toolbox 1.15.1 工具包安装教程
- GNU Radio的供应商中立SDR开发包：gr-sdr介绍
