网络设计作业（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 来实现页面的布局和样式展示。希朿自己在今后的学习生活中能够不断提高这方面的能力，做出更多美观实用的网页。

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]--

><html> <head>

content="IE=edge"> <title>首页</title> <meta name="description"

剩余16页未读，继续阅读

CodingLife99

粉丝: 1174
资源: 456

网络设计作业（HTML CSS实现）

我的学校网页期末作业（纯html+css实现）

2021年大一下网页期末作业（纯html+css实现）.docx

纯HTML+CSS网页设计期末作业（个人网站）

.docx文件在vscode打开后。.docx文件发生了错误

两个docx文档，1.docx和2.docx，需要将1.docx文档中的页眉页脚复制到2.docx，用java编写，使用开源jar包，比如poi，poi-tl，docx4j等等，请注意验证你提供的代码中的方法，麻烦给我源码。

# 保存文档 doc.save(filename) # 将文档保存为指定的文件名 # 重命名并另存文件 os.rename(filename, row[0] + '.docx') # 将文件名改为第一个单元格中的内容加上.docx，并保存。

使用python将xx文件夹下的.sv文件复制到mode.docx文件并另存为.sv文件名的.docx文件

如果是一个文件夹里所包含的.docx ，如何可以使用正则表达式来提取姓名和学号

最新资源