<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设计报告</title>
<style>
.TEXT{
width: 100%;
min-width: 400px;
display: flex;
justify-content: center;
align-items: center;
/* background-color: rgba(0, 255, 255, 0.139); */
}
.biaoti{
width: 200px;
text-align: center;
/* background-color: rgba(109, 113, 113, 0.174); */
}
.zw{
width: 800px;
/* background-color: rgba(128, 128, 128, 0.203); */
}
</style>
</head>
<body>
<div class="TEXT">
<div class="biaoti">
<h3>Web网页设计报告</h3>
</div>
</div>
<div class="TEXT">
<div class="zw">
  首先是主页面，我首先将body的margin与padding都设置为了0，每个网页都得这样，不然缩放浏览器会导致出现空隙，影响美观。
然后设置了一个container作为navbar的父容器，然后在通过absolute对于其relative的父容器进行定位，将其始终固定在浏览器正中，
然后我设置了一个div，其class为small，在small当中，我将其宽设置为100%，但是高设置为0，不过加上了padding-bottom为25%，
这样的话，该div始终铺满屏幕而且高为宽的1/4，将其display设置为弹性框，并使其属性justify-content为center，只需要其子div居中对齐就行。
然后再对其a链接属性进行修改，并添加一个hover事件使得出现选择该导航栏出现选择效果。<br>
  然后是角色信息与其出演的声剧等，这两个用了同一种布局，那就是Small，Small中有两类div，一个叫E1_1，另一个叫E1_2，E1_1与E1_2的宽都为其父容器的一半，
在在E1_1上添加一个图片，使其向右移动自身100%的距离，这样可以完美的使得E1_1的div覆盖到E1_2上面，在对Small进行设置hover，使得鼠标停在Small上时，
改变E1_1的属性，并添加动画效果，让其看上去像一个抽屉一样。<br>
  在nyn.html中，我添加了一个div使其始终停在浏览器界面的左上角，点击该div中的图片即可访问一个商店页面。我先设置一个最外层的div all，
然后在其中依次添加商品的图片，名字，价格等，最后添加了一个属性display为block的链接div来代替按钮，并设置其hover使其像一个按钮一样会改变颜色。<br>
  还有就是视频欣赏的环节，使用video标签可以直接将视频放置在网页上，不过要调整其宽高和位置，并且自带进度条等基础功能。不过只使用video标签是有一个短处的，就是所有视频都可以同时播放...<br>
  最后就是一个公告条了，具体的效果就是当鼠标停在上面时，会弹出一长条，最左边有一张图片，将鼠标停在图片上即可看到提示与须知等。最左边可以看到三张图片，
点击任意一张图片都会对应的修改长条中的内容，该功能是使用锚点来完成的，也就是将三个长宽相同的div塞进同一个div之中，点击图片也就是点击了去往此处id的链接，
但最外面只会显示一个高度的内容，从而达到了页面内切换内容的效果。<br>
  在设计时遇到许多问题，但印象最深的是在建立一个相对于浏览器窗口悬浮的ul时，我遇到一个问题。<br>
  具体就是，不管我是将该ul的position值直接为fixed，还是将该ul放置在一个固定的div中，缩放浏览器界面，也就是ctrl键加上鼠标滚轮放到最大时，该ul向下移动了一些！
后面不知道是因为进行了什么操作，该问题后续并没有出现，后面进行排查。<br>
  首先，我以为是该ul的position是relative的缘故（当时是设置其父容器的position值为fixed），所以我将position改为了abosolute，并且增加了一个top: 0;，
结果还是不行，后来察觉到ul是会默认携带一种样式的，所以我将ul的list-style设置为none，结果真的解决了该问题，但另一个问题来了，之前明明没有使用该属性，为什么还是成功了？
后面我就开始设置ul与li的背景颜色，为了防止li中的图片遮挡视野，我将其opacity设置为了0.2，还是没发现问题所在，也最多只发现了该ul的长是一直随着浏览器的放大而增大的，
只不过积累到了一定程度，才影响到了该ul的定位。直到后面我将ul与li的overflow:hidden;注释掉，我才发现一些小黑点，后面又进行推测是因为未设置改ul的li的高度，从而导致li的高度随浏览器界面的增大而增加。
我一直以为其高度是根据其中的内容而自动改变的，到拥有了这个推测时我还以为自己有新的发现，结果我高高兴兴地设置了li的高度，将其设置为了一个正方形，结果...
经过几次折转，最后我发现了问题所在——因为li的宽度低于10vw（li的宽度得小于等于li的高度，我在li中放入的图片为正方形，具体什么原因就不大清楚了）！对，没错，就只是li的宽度低了，当li的宽度大于等于10vw时，
该ul的位置就不再随着浏览器的缩放而发生改变。虽然最后不能完全参透其内容，但至少对于web设计布局有了更加深入与深刻的了解。<br>
  之后，先前的经历带来的好处就来了，我又遇到了类似的情况，但我不慌不忙，这次是一个a，也就是链接里面的一张图片向下移动了，我先后设置了该div与该a的背景颜色，最后得知，移动的是图片本体，直接加上一个position:absolute;解决问题！
不过目前也确实遇到一个问题，那就是当我设置一个div的宽高为除px以外的值，其中的字体随着浏览器的缩放而缩放，但div的宽高是不变的，所以看着十分突兀，但我相信，后面经过我的仔细摸索，也会有解决的那一天。
</div>
</div>
</body>
</html>
毕设&课设&项目&实训-web网页设计.zip
版权申诉
140 浏览量
2024-02-04
12:02:12
上传
评论
收藏 47.79MB ZIP 举报
web网页设计.zip （40个子文件） 
资料总结 
Css.md 6KB video2 
NYN列车.mp4 20.28MB Html.md 8KB JavaS.md 3KB
NYN.html 5KB img 
Shop.jpg 7KB Kfj.jpg 24KB
rat.png 381KB row.png 1014KB 3.png 123KB Yuh.png 202KB
nyn.gif 102KB 3sister.png 2.07MB 22.jpg 5KB icg.jpg 108KB Kofji.png 150KB Mgr.png 309KB 1.png 105KB NYN.jpg 110KB FakeNYN.jpg 30KB nyn2.jpg 61KB fake.jpg 27KB 11.jpg 4KB 33.jpg 3KB Title.jpg 18KB 2.png 156KB NYN列车.jpg 120KB Ware.jpg 8KB Web设计报告.html 6KB css style.css 1KB 联系图.css 938B info.css 1KB TypeS.md 4KB NYN姉貴の倉庫.html 4KB index.html 3KB info.html 4KB video NYN的可爱.mp4 5.54MB KoFji.html 6KB FakeNYN.html 1KB video3 NYN小车.mp4 17.03MB资源评论
妄北y
- 粉丝: 1w+
- 资源: 1万+
最新资源
- 23957825633dCar.zip
- Ruby优质学习资源和工具与案列应用场景.txt
- 阿里巴巴大数据实践之路-陈鹏宇（PDF格式）.rar
- 基于医疗知识图谱的智能问答系统python实现源码+使用教程（毕业设计）.zip
- 基于Python实现的医疗知识图谱的知识问答系统源码+使用教程（毕业设计）.zip
- Objective-C优质学习资源和工具与案列应用场景.txt
- 基于python知识图谱医疗领域问答系统实现完整源码+使用说明（毕业设计）.zip
- JavaScript优质学习资源和工具与案列应用场景.txt
- c#优质学习资源和工具与案列应用场景.txt
- 《医疗与在线教育PPT模板合集》-点亮您的演讲与教学！
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
