HTML+CSS实战作业
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS实战作业
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 題目一
- 實現代碼
- 總結
- 題目2
- 實現代碼
- 總結
- 注意點
題目一
實現代碼
<!DOCTYPE html> <html><head><style type="text/css">#div1{background-color: #ffc33c;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-left: 25px;}#div2{background-color: #ff33cc;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-left: 25px;margin-right: 25px;}#div3{background-color: #ff33cc;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-left: 25px;}</style></head><body> <div id="div1">左列</div> <div id="div2">右列1</div> <div id="div3">右列2</div> </body> </html>總結
感覺不是太難，沒什么難點
題目2
實現代碼
<!DOCTYPE html> <html><head><style type="text/css">#div1{background-color: cadetblue;border: 2px solid #333;height: 100px;width: 100%;float: left;margin-left: 25px;}#div2{background-color: blue;border: 2px solid #333;height: 500px;width: 100%;float: left;margin-left: 25px;margin-right: 25px;}#div3{background-color: gray;border: 2px solid #333;height: 100px;width: 100%;float: left;margin-left: 25px;}#div2-1{background-color: #ff0000;width: 25%;height: 500px;float: left;}#div2-2{background-color: brown;width: 50%;height: 500px;float: left;}#div2-3{background-color:green;width: 25%;height: 500px;float: left;}#div2-2-1{background-color:yellowgreen;height: 200px;}#div2-2-2{background-color:white;height: 300px;}</style></head><body> <div id="div1">div1</div> <div id="div2"><div id="div2-1">div2-1</div><div id="div2-2"><div id="div2-2-1">div2-2-1</div><div id="div2-2-2">div2-2-2</div></div><div id="div2-3">div2-3</div> </div> <div id="div3">div3</div> </body> </html>總結
注意點
#div2-1{background-color: #ff0000;width: 25%;height: 500px;float: left;}#div2-2{background-color: brown;width: 50%;height: 500px;float: left;}#div2-3{background-color:green;width: 25%;height: 500px;float: left;}想要同行顯示時得設置浮動
就同行顯示div2這里注意浮動即可，說實話，這點沒想到，其它的基本就是框架性的。就這些
總結
以上是生活随笔為你收集整理的HTML+CSS实战作业的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端三剑客之CSS基础
- 下一篇： 题目3：文本文件单词的检索与计数（实现代