about上半部分排版思路，针对谁用position

分几块做好之后如何实现

迷失的小麦 2019-11-06

源自：项目：网页布局案例 2-10 作业题

2

收起

4回答

好帮手慕星星回答被采纳获得+3积分 2019-11-06 16:03:52

你好，

1、绿色三角形是宽100，高200 的：

上边框+下边框的值为200px，右侧边框的值为100px，所以宽是100px，高度是200px。

2、边框如果简写的话，顺序为上-右-下-左。所以最后一个参数设置颜色，那么显示的就是左侧边框。如下：

宽为30px，高度为40px 。左边框为30px，上下各为20，也就是40px 。

自己可以测试理解下。

如果还有新问题建议在问答区重新提问，尽量不要多次盖楼，影响自己观看，还有便于后期查找总结。

祝学习愉快~

好帮手慕星星 2019-11-06 15:29:25

你好，

1、三角形给出的边框数值以及颜色都是可以改变的，不是固定的哦，主要是三角形实现的原理明白即可。例如：

效果：

每一边都可以实现三角形，将其他边框的颜色设置为transparent透明色即可。

2、class名可以使用拼音，尽量与这块区域内容相关。

3、直属后代选择器用>，前后加不加空格都可以，例如：

用了子代选择器就可以哦。

自己再理解下。

提问者迷失的小麦 #1

将红色、蓝色、粉色设置为透明之后，绿色三角形是不是宽度200px大小，高度100px大小

2019-11-06 15:40:39
提问者迷失的小麦 #2

比如上个例子，border左边给30px，其他各边20px，最后结果高度多少，宽度多少？颜色对应给哪个边，是不是三角形的底边？

2019-11-06 15:47:34

好帮手慕星星 2019-11-06 13:52:44

你好，

1、可以用border设置边框的方式来实现小三角形状的编写，下面有个小例子，可以测试下：

实现小三角形之后，可以用定位将三角形定到正确的位置。

2、about区域中的文案自己写一些内容就可以，这里可以不用完全一致，主要考察的是布局。在实际工作中，相关文案会给出的，不用担心。

祝学习愉快~

提问者迷失的小麦 #1

边框给的数值和颜色不太理解（效果出来了）

2019-11-06 14:29:48
提问者迷失的小麦 #2

工作时用拼音给出class名，会有问题吗

2019-11-06 14:41:55
提问者迷失的小麦 #3

后代选择器中间用>，需要空格吗？（直属后代）

2019-11-06 14:49:21

好帮手慕星星 2019-11-06 11:56:07

同学你好，

指的是这一部分吗？

可以参考下面的布局思路哦：

（1）设置一个蓝色的大div盒子，盒子宽度可以为1000-1200px左右，然后用margin：0 auto；使这个盒子居中；

（2）里面3个小的绿色div，设置浮动使显示在一行。用margin将三个隔开

（3）最后再设置一个粉色div容纳遮罩的这部分，并使用绝对定位，要相对于上面说到的蓝色大div设置。

自己试着写一写，祝学习愉快！

欢迎采纳~

提问者迷失的小麦 #1

下半部分图片上的小三角怎么做

2019-11-06 13:08:46
提问者迷失的小麦 #2

about部分的文案能不能发给我

2019-11-06 13:27:24

相似问题

关于第一版和双路快速排序的差异

关于双路快排的疑问

我想问一下，about部分那个文字显示在中间的图片上是如何实现的

about区图文混排

about区域的定位在不同显示器下差距很大

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载