百度前端学院--小薇学院--任务四

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style>
 7             .rectangle{
 8                 width: 400px;
 9                 height: 200px;
10                 position: relative;
11                 background-color: #ccc;
12                 margin: auto;
13                   top:200px;
14             }
15             .left-cicle,.right-cicle{
16                  position: absolute;
17                  width: 50px;
18                  height: 50px;
19                 background-color: #fc0;
20             }
21             .left-cicle{
22                 border-bottom-right-radius: 60px;
23             }
24             .right-cicle{
25                 bottom: 0;
26                 right: 0;
27                 border-top-left-radius: 60px;
28             }
29         </style>
30     </head>
31     <body>
32         <div class="rectangle">
33             <div class="left-cicle"></div>
34             <div class="right-cicle"></div>
35         </div>
36     </body>
37 </html>

效果图：

时间： 2024-10-12 12:11:21

百度前端学院--小薇学院--任务四的相关文章

百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

百度前端学院---小薇学院---任务---12

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 tr th { 8 color: #fff; 9 background-color: #000; 10 } 11 12 tbody tr:nth-child(1), 13 tbody tr:nth-child(2), 14

百度前端学院--小薇学院--任务04

这次的样式图为注意事项中,想让灰色div随着内容高度自适应变化的方法是:给该div设置最小高度即min-height,再设置height为auto即可. 另外,position为absolute是相对父级元素为relative或者为absolute的元素而言的. 具体到这个任务当中,主要的难点是如何是块级元素居中显示和如何画四分之一圆. 对于块级元素水平垂直居中显示的问题,网上有很多种答案,我个人觉得代码量最少的一种是 position: absolute; top: 50%; left: 5

百度前端学院--小薇学院--任务05

这次的任务是在第一次完成的基础上,将它们实现两栏式分布:效果图如下(由于截图不全的原因,底部还有footer部分没有显示出来): 尝试了很多思路,都没有很好的方案,最终选择了这种:只让右边的侧栏脱离文档流,并且在HTML代码结构当中,让它位于左边的div的上面,然后利用float让其脱离文档流,即可让它显示在右边,并且,这里涉及到的其中一个问题是当div层中有另一个div是流动的布局的话,会使得外层的div塌陷,最终导致的结果是外层的背景无法显示,底部的footer会在上面显示,相当于没有外层d

百度前端学院---小薇学院---任务---10

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 @media screen and (max-width: 640px) { 8 .d {order: -1;} 9 } 10 body{ 11 padding: 0; 12 marg

百度前端技术学院任务-01

这两天发现了一个很不错的学习前端的地方:百度前端技术学院. 里面有不同类型的任务,任务之间的难度是递增的,很适合作为练习. 下面是任务-01的代码(并没有涉及到CSS): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度前端技术学院任务-01</title> </head> <bod

百度前端技术学院task1.12

任务十二:学习CSS 3的新特性面向人群: 初学者难度: 简单重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

百度前端技术学院-task1.3源代码

因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task1-3</title> <link rel="shortcut icon" href="/sjq_ico.png" /> <style

百度前端技术学院task1.10

任务十:Flexbox 布局练习面向人群: 有一定HTML及CSS基础的同学难度: 中重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终