"2021年大一下网页期末作业展示：纯html css实现的网页设计作业"
需积分: 0 160 浏览量
更新于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页未读，继续阅读
311 浏览量
4559 浏览量
670 浏览量
CodingLife99
- 粉丝: 1275
我的内容管理
展开
最新资源
- VS2010环境Qt链接MySQL数据库测试程序
- daycula-vim主题：黑暗风格的Vim色彩方案
- HTTPComponents最新版本发布，客户端与核心组件升级
- Android WebView与JS互调的实践示例
- 教务管理系统功能全面，操作简便，适用于winxp及以上版本
- 使用堆栈实现四则运算的编程实践
- 开源Lisp实现的联合生成算法及多面体计算
- 细胞图像处理与模式识别检测技术
- 深入解析psimedia：音频视频RTP抽象库
- 传名广告联盟商业正式版 v5.3 功能全面升级
- JSON序列化与反序列化实例教程
- 手机美食餐饮微官网HTML源码开源项目
- 基于联合相关变换的图像识别程序与土豆形貌图片库
- C#毕业设计：超市进销存管理系统实现
- 高效下载地址转换器：迅雷与快车互转
- 探索inoutPrimaryrepo项目：JavaScript的核心应用
