84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
今天刚刚碰到的 hr要求一个半小时完成
要求p自适应大小
边距都是30px,剩下的p全部自适应屏幕 如果有根据屏幕大小自动变化CSS样式的更好
要求已经写在图上了 有没有萌新前来练手
小伙看你根骨奇佳,潜力无限,来学PHP伐。
<style type="text/css"> <!-- html,body { height: 100%; } body, body * { margin: 0; padding: 0; } p { box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #333; } .header_left, .header_right { height: 40%; float: left; margin-top: 10%; } .header_left { width: 40%; } .header_right { width: 60%; border-left-style: none; } .clear { clear: both; border: none; } .main { margin-top: 5%; height: 45%; color: red; text-align: center; } .main_left, .main_right { float: left; width: 60%; height: 100%; border: none; } .main_right { width: 40%; border-left: 1px solid #333; } .main_left_top, .main_left_middle, .main_left_bottom, .main_right_top, .main_right_bottom { margin: 30px; } --> </style> <p class="header_left"></p><p class="header_right"></p><p class="clear"></p> <p class="main"><p class="main_left"> <p class="main_left_top">随着内容适应大小</p> <p class="main_left_top">随着内容适应大小</p> <p class="main_left_bottom">随着内容适应大小</p> </p><p class="main_right"> <p class="main_right_top">随着内容适应大小</p> <p class="main_right_bottom">随着内容适应大小</p> </p> <p class="clear"></p> </p>
有2种方法实现一种是float,一种是flex,不过可能flex的兼容性不太好float布局
flex布局
这个问题不难啊,我会,分分钟搞定
图已经写得很详细了,只要根据图写出相应的布局就OK了。如果还是迷茫的,建议你从巩固一下p布局。
挺简单的,只是自适应不是响应式,都标着百分比了
有2种方法实现一种是float,一种是flex,不过可能flex的兼容性不太好
float布局
flex布局
这个问题不难啊,我会,分分钟搞定
图已经写得很详细了,只要根据图写出相应的布局就OK了。如果还是迷茫的,建议你从巩固一下p布局。
挺简单的,只是自适应不是响应式,都标着百分比了