編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識，實(shí)現(xiàn)讓３個(gè)控制元素分別漂浮在面板的右側(cè)，底部和右下角。效果如圖：
溫馨提示:
完成任務(wù)后，請驗(yàn)證是否與實(shí)踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能，否則，請重復(fù)學(xué)習(xí)此節(jié)內(nèi)容。
任務(wù)
一、為３個(gè)控制元素添加對應(yīng)CSS樣式
提示:
塊級元素的寬度和高度如果設(shè)置為100%則會和父元素一樣。
- ?不會了怎么辦
-
右側(cè)有實(shí)戰(zhàn)題的完整代碼下載
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網(wǎng)-Resizable</title>
<style type="text/css">
body{
margin: 0px;padding: 50px;font-size: 14px;color: #333;
}
.panel{
width: 400px;height: 240px;
border:1px solid #ccc;
}
.panel .title{
background-color: #eee;text-align: center;line-height: 30px;
border: 1px solid #fff;
font-weight: bold;
}
.ui-Resizable-r{
/* 右側(cè)控制元素樣式 */
}
.ui-Resizable-b{
/* 底邊控制元素樣式 */
}
.ui-Resizable-rb{
/* 右下角控制元素樣式 */
}
</style>
</head>
<body>
<div class="panel">
<div class="title">Resizable Panel</div>
<div class="ui-Resizable-r"></div>
<div class="ui-Resizable-b"></div>
<div class="ui-Resizable-rb"></div>
</div>
</script>
</body>
</html>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
