这篇博客分享了作者制作猫眼电影首页静态页的过程，重点使用了CSS3的旋转和渐变背景技巧。作者在实践中遇到困难，但通过学习和实践最终完成。源码已上传至GitHub，并鼓励初学者要有耐心，用兴趣驱动学习，同时强调面对挑战时要勇往直前，拒绝摆烂。
猫眼电影首页效果与回顾
效果
分析
- 我全部写完打开的时候，感觉快要分不清了都那个是官网了都。用了两个CSS3的知识点，一个是标题栏里小三角旋转的效果，一个是电影名字下的渐变背景。
- 我花了很长时间写这个页面，总是感觉越写越乱，不敢写了。导航栏没啥问题，下面不是两栏布局嘛，我写完正在热映，然后就写另一栏。左边写点右边写点，CSS里越写越乱，左栏一点右栏一点，我还想过试着写一些公共样式，越来越乱。
- 我不敢写了，然后就开始看书和课程，昨晚忽然勇敢起来了，一口气接着上面的写完了。但是看了又看，感觉一点也不好维护，想改点啥还是不好改。还是要练啊~
源码
嗯~太多了，我放在我GitHub里了地址是这：https://github.com/jiyaoyang/Static-pages/tree/master/staticPages/%E7%8C%AB%E7%9C%BC%E7%94%B5%E5%BD%B1-%E5%AE%8C%E6%95%B4
如果打不开就私信或者评论我，我亲自发给你
总结
-
没有刚开始写百度时想的简单了，看来是受益匪浅啊。哈哈~
-
刚开始写网页的家人们，要慢 慢 再慢，泡杯茶水，慢慢写。要放松的写，人在放松的状态下脑袋瓜子转的才快，记得才清楚。尽量别给自己压力，压力变成动力的人一般都不是一般人，哈哈~
-
那没压力咋学啊，那就要靠兴趣喽，我觉得兴趣是来源于成就感的，你有成就感了，一开心兴趣就来了。就像写网页这个吧，两行代码就能看到效果，这效果就能勾起你的成就感。你要问为什么你没有，因为你把你的小目标订的太远了啊。你在写导航栏，你就把注意力放在导航栏甚至一个小功能上，哇变了变了，真好玩儿，做做下一个功能和样式！
-
这个方法就像是打游戏一样的”奖励自己“，比如 你S了敌方一位英雄，获得金币和队友的夸奖，大脑就会分泌多巴胺，你就会舒适，它不会上瘾嘛？你原本被你父母夸一下你就会分泌多巴胺的脑袋瓜子，现在不仅要夸奖还要奖励给钱花。需求变高了吧，现实世界难以满足你的需求，好像叫什么奖励机制什么什么，有兴趣可以查查。这也就导致你不玩儿你就不开心，在别人眼里就是上瘾喽。
最后啊，希望大家遇到困难或者迷茫时，也要坚定的跨出去，错了就错了，要拒绝摆烂，摆烂是小孩子才做的事，还有就是要不断通过各种方法摄取外界的知识和观点。过往不恋,当下不负。加油！~~
如果有啥问题或者意见，评论区留言或者私信哦。下面就是HTML的代码了，简单的填一填篇幅
<!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" />
<title>猫眼电影-娱乐看猫眼</title>
<link rel="stylesheet" href="./CSS/reset.css" />
<link rel="stylesheet" href="./CSS/common.css" />
<link rel="stylesheet" href="./CSS/index.css" />
<link rel="shortcut icon" type="image/x-icon" href="maoyan.ico" />
</head>
<body>
<div class="header-style">
<!-- 头部logo/首页等等 -->
<header class="style-all">
<!-- logo -->
<div class="logo">
<a href="https://maoyan.com">
<img src="./img/logo.png" alt="图片加载失败" />
<h1>猫眼电影</h1>
</a>
</div>
<!-- 位置：北京 -->
<div class="header-title fudiv">
<div class="seat">
<a href="#">北京</a>
<div class="null"></div>
<div class="icon-delta"></div>
<div class="csyMenu">
<div class="title">定位城市：北京</div>
<div class="title" style="line-height: 2.5">近期定位：北京</div>
<div class="aContent">
<div class="letter">A</div>
<div class="content">
<ul>
<li>安康</li>
<li>鞍山</li>
<li>安庆</li>
<li>阿克苏</li>
<li>安州区</li>
<li>安陆市</li>
<li>安华</li>
<li>阿荣旗</li>
<li>安丘</li>
<li>阿勒泰市</li>
<li>阿拉善盟</li>
</ul>
</div>
</div>
<div class="aContent">
<div class="letter">B</div>
<div class="content">
<ul>
<li>安康</li>
<li>鞍山</li>
<li>安庆</li>
<li>阿克苏</li>
<li>安州区</li>
<li>安陆市</li>
<li>安华</li>
<li>阿荣旗</li>
<li>安丘</li>
<li>阿勒泰市</li>
<li>阿拉善盟</li>
</ul>
</div>
</div>
<div class="aContent">
<div class="letter">C</div>
<div class="content">
<ul>
<li>安康</li>
<li>鞍山</li>
<li>安庆</li>
<li>阿克苏</li>
<li>安州区</li>
<li>安陆市</li>
<li>安华</li>
<li>阿荣旗</li>
<li>安丘</li>
<li>阿勒泰市</li>
<li>阿拉善盟</li>
</ul>
</div>
</div>
<div class="aContent">
<div class="letter">D</div>
<div class="content">
<ul>
<li>安康</li>
<li>鞍山</li>
<li>安庆</li>
<li>阿克苏</li>
<li>安州区</li>
<li>安陆市</li>
<li>安华</li>
<li>阿荣旗</li>
<li>安丘</li>
<li>阿勒泰市</li>
<li>阿拉善盟</li>
</ul>
</div>
</div>
<div class="aContent">
<div class="letter">E</div>
<div class="content">
<ul>
<li>安康</li>
<li>鞍山</li>
<li>安庆</li>
<li>阿克苏</li>
<li>安州区</li>
<li>安陆市</li>
<li>安华</li>
<li>阿荣旗</li>
<li>安丘</li>
<li>阿勒泰市</li>
<li>阿拉善盟</li>
</ul>
</div>
</div>
<div class="aContent">
<div class="letter">F</div>
<div class="content">
<ul>
<li>安康</li>
<li>鞍山</li>
<li>安庆</li>
<li>阿克苏</li>
<li>安州区</li>
<li>安陆市</li>
<li>安华</li>
<li>阿荣旗</li>
<li>安丘</li>
<li>阿勒泰市</li>
<li>阿拉善盟</li>
</ul>
</div>
</div>
</div>
</div>
<div class="title index">
<a href="https://www.maoyan.com/"
最低0.47元/天 解锁文章
扫一扫
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
