发表于： 2018-11-28 22:16:15
2 771
今天完成的事：
今天完成了任务6，之前说的雪碧图的问题，是截图有问题，重新截图后，再使用基本就没啥问题了，然后有学习了渐变：
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
就这样，任务6就完成了。然后又开始做任务7，看了下任务要求和psd图和任务要求后，开始做第一个页面
一开始就遇到了问题，就是菜单的绘制,在网上查阅资料后：
- 菜单按钮
<style>
.box{
width: 30px;
height: 5px;
padding: 5px 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
background-clip: content-box;
background-color: black;
}
</style>
<body>
<div class="box"></div>
</body>
文章图标
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
outline: 1px solid black;
outline-offset: 4px;
}
</style>
<body>
<div class="box"></div>
</body>
- 关闭按钮
<style>
.box{
width: 50px;
height: 50px;
background-color: black;
border: 1px solid white;
border-radius: 100%;
outline: 15px solid white;
outline-offset: -39px;
cursor: pointer;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>
剩下的，暂时没有遇到什么太大的问题。
明日任务：
任务7
遇到的问题：
通常把简单的问题复杂化
今日收获：
每天都要进步
返回列表
评论