"2021年大一下网页期末作业展示：纯html css实现的网页设计作业"
需积分: 0 177 浏览量
更新于2024-04-01
1
收藏 2.12MB DOCX 举报
【相册】
.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站展示链接。感谢大家的关注和支持！
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页未读，继续阅读
308 浏览量
4548 浏览量
666 浏览量
CodingLife99
- 粉丝: 1272
我的内容管理
展开
最新资源
- Java基因音乐软件开发：节奏与旋律的创新结合
- PHP缩略图类库实现与应用详解
- Web前端资源压缩包：CSS和JS文件整合
- 电子科技大学电路分析课程教案解析
- Go语言开发博客后端教程：Gin框架应用指南
- 深圳市建筑楼块矢量数据包：GIS格式导出与应用
- Angular与Spring Boot整合OIDC认证实践
- CRUDr命令行工具：实现远程API操作的便捷途径
- 掌握Java7开发：官方文档与JDK API全面指南
- Vue3ElementPlus：新一代前端组件库介绍
- 3口交换机设计方案：RTL8305NB与PCB文件
- JS图片上传与取色功能实现详解
- ArcSoft ArcFace Windows X64 V1.1最新版发布
- 掌握Windows核心编程，C++源码分析指南
- Swift技术开发：高效管理通讯录 Contacts
- Java API实现企业级名称和地址数据清洗
