當(dāng)前位置：首頁 > 编程语言 > python >内容正文

python

python周报第十五周

發(fā)布時(shí)間：2023/12/31 python 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 python周报第十五周小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

0.本周知識(shí)點(diǎn)預(yù)覽

CSS基礎(chǔ)補(bǔ)充
JavaScript基礎(chǔ)

1.CSS基礎(chǔ)補(bǔ)充

1.input(html)默認(rèn)選項(xiàng)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input value="123"/><textarea>123</textarea><select><option>111</option><option>222</option><option selected="selected">333</option></select>男: <input type="radio" name="r1" checked="checked"/>女: <input type="radio" name="r1"/>fuck: <input type="checkbox" name="e1" checked="checked"/>xxoo: <input type="checkbox" name="e1"/>fuck: <input type="checkbox" name="e1" checked="checked"/>sb: <input type="checkbox"name="e1" /> </body> </html>

代碼解析及展示：input標(biāo)簽可以設(shè)置默認(rèn)選項(xiàng)，如上述代碼所示，下圖為效果圖

2.css自定義屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1[name='a'] {color: red;}</style> </head> <body><div class="c1" name="a">aaaaaaaaaaaaaaaaaaaaaaa</div> </body> </html>

代碼解析及展示：css可以自定義屬性，c1類中可以自定義name屬性。

3.管理后臺(tái)布局范例

要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的后臺(tái)布局，總共需要三部分

最上邊的標(biāo)題欄

下方左側(cè)的菜單欄

下方右側(cè)的內(nèi)容欄

1.方案一(附帶滑動(dòng)下拉塊)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*定義頭部,高度50,顏色xxx*/.pg-head {height: 50px;background-color: lightskyblue;}/*定義body標(biāo)簽沒有外邊距*/body {margin: 0;}/*定義內(nèi)容類左側(cè)的菜單欄固定,寬度200,顏色xxx,高度距離頂部50也就能正好鏈接,左側(cè)0,底部0*/.pg-body .body-menu {position: absolute;width: 200px;background-color: lightyellow;top: 50px;left: 0;bottom: 0;}/*定義內(nèi)容類右槽的內(nèi)容欄固定,顏色xxx,同樣距離頂部50,距離左側(cè)205,因?yàn)椴藛螜谑?00,稍微離開一些距離,右側(cè)0,底部0,并附帶滑動(dòng)下拉塊,這樣當(dāng)內(nèi)容變多時(shí),就不會(huì)溢出內(nèi)容*/.pg-body .body-content {position: absolute;background-color: ghostwhite;top: 50px;left: 205px;right:0;bottom:0;/*內(nèi)容加下滑塊*/overflow: auto;}</style> </head> <body><div class="pg-head"></div><div class="pg-body"><div class="body-menu"></div><div class="body-content">aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/></div></div> </body> </html>

代碼解析及展示：這是第一種模式，內(nèi)容欄默認(rèn)是全屏，當(dāng)內(nèi)容超出時(shí)，有滑動(dòng)下拉塊。

2.方案二(內(nèi)容自動(dòng)擴(kuò)充)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*定義頭部,高度50,顏色xxx*/.pg-head {height: 50px;background-color: lightskyblue;}/*定義body標(biāo)簽沒有外邊距*/body {margin: 0;}/*定義內(nèi)容類左側(cè)的菜單欄固定,寬度200,顏色xxx,高度距離頂部50也就能正好鏈接,左側(cè)0,底部0*/.pg-body .body-menu {position: absolute;width: 200px;background-color: lightyellow;top: 50px;left: 0;bottom: 0;}/*區(qū)別主要是這里:*//*定義內(nèi)容欄右側(cè)的內(nèi)容欄,不過底部不固定,可以根據(jù)內(nèi)容伸縮,超出菜單欄時(shí),菜單欄會(huì)不夠用*/.pg-body .body-content {position: absolute;background-color: greenyellow;top: 50px;left: 205px;right:0;}</style> </head> <body><div class="pg-head"></div><div class="pg-body"><div class="body-menu"></div><div class="body-content">aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/>aaaaaaa<br/>aaaaaaa<br/>aaaaaaa<br/>bbbbbbb<br/>ccccccc<br/>ddddddd<br/></div></div> </body> </html>

代碼解析及展示：這是第二種方案，感覺還是第一種方案好，這個(gè)會(huì)使菜單欄不夠用。

4.強(qiáng)制自己生效(important)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*這里在c1類中加上important,在沖突的情況下會(huì)強(qiáng)制自己生效*/.c1 {color: red !important;}.c2 {color: #aaaaaa;}.c3 {color: green;}</style> </head> <body><div class="c2 c3">內(nèi)容一</div><div class="c1 c2">內(nèi)容二</div> </body> </html>

代碼解析及展示：內(nèi)容一同時(shí)有兩個(gè)類，c3會(huì)覆蓋c2，內(nèi)容二也有兩個(gè)類,原本c2會(huì)覆蓋c1，不過c1新加了important，會(huì)強(qiáng)制自己生效，假如c2也有important,則依舊c2生效

5.css漂浮第二種方案

漂浮的第一種方案已在上篇博客講到，現(xiàn)在說下第二種方案。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.left {float: left;}.clean {background-color: red;}/*在類clean后邊的樣式*/.clean:after {/*在clean類后邊加上內(nèi)容"lll"*/content: 'lll';/*這個(gè)必不可少*/clear: both;/*顯示為塊級(jí)標(biāo)簽*/display: block;/*去掉lll占的紅色背景*/height: 0;/*隱藏內(nèi)容"lll"*/visibility: hidden;}</style> </head> <body><div class="clean"><div class="left" style="height: 60px;background-color: greenyellow">123</div><div class="left">456</div></div> </body> </html>

代碼解析及展示：每個(gè)標(biāo)簽都有字標(biāo)簽，其中兩個(gè)是before、after，分別是在其前、后的樣式。上篇博客是在兩個(gè)div下邊直接寫一個(gè)clear:both，這個(gè)示例和那個(gè)差不多，先加一點(diǎn)字段占用樣式(這里是背景色)，然后改為塊級(jí)、在把占用的樣式刪除。

6.css第三方圖形插件

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="plugins/font-awesome-4.6.3/css/font-awesome.css"/> </head> <body><i class="fa-assistive-listening-systems" aria-hidden="true"></i> </body> </html>

代碼解析及展示：css有很多第三方的圖形庫(kù)，可以下載到本地并加載，例如一些三角形、五角形等。

7.三角形的寫法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.icon {display: inline-block;border-bottom: 20px solid red;border-top: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid transparent;}</style> </head> <body><div class="icon"></div> </body> </html>

代碼解析及展示：三角形的寫法就是寫一個(gè)正方形，然后取其中一個(gè)角。transparent是透明的意思。

2.JavaScript基礎(chǔ)

JavaScript和Python的語法很類似，請(qǐng)移步JS專題

專題鏈接：http://www.cnblogs.com/wupeiqi/articles/5602773.html

http://www.w3school.com.cn/js/index.asp

1.JS、CSS、HTML實(shí)現(xiàn)模態(tài)對(duì)話框?

HTML代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/common.css"/><script type="text/javascript" src="js/common.js"></script> </head> <body><div><input type="button" onclick="fadeIn();" value="模態(tài)對(duì)話框"/></div><div id="formTable" class="modal hide"><form id="form0"><div class="modal-header" style=" height:40px;"><div style=" float:left;">This is a Modal Heading</div><div style=" float:right;"><a class="close" id="close" onclick="fadeOut();" style="cursor:pointer;">×</a></div></div><div class="modal-body"><h4>Text in a modal</h4><p>You can add some text here.</p></div><div class="modal-footer"><a href="javascript:void(0);" onclick="fadeOut();" class="btn btn-success">提交</a><a onclick="fadeOut();" class="btn" data-dismiss="modal">關(guān)閉</a><a href="javascript:void(0);" onclick="fadeOut();" class="btn" data-dismiss="modal">關(guān)閉</a></div></form></div><div id="shade" class="modal-backdrop hide"></div> </body> </html>

CSS代碼：

a { color: #428bca; text-decoration: none; }.modal-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1010;background-color: #000000;opacity: 0.7; }.modal {position: fixed;top: 50%;left: 50%;z-index: 1050;max-height: 500px;overflow: auto;width: 560px;margin: -250px 0 0 -280px;background-color: #ffffff;border: 1px solid red;/*border: 1px solid #999;*//*border: 1px solid rgba(0, 0, 0, 0.3);*//**border: 1px solid #999;*//* IE6-7 *//*邊框特殊效果*/-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip: padding-box;-moz-background-clip: padding-box;background-clip: padding-box; }.modal-header {padding: 9px 15px;border-bottom: 1px solid #eee; } .modal-header .close {margin-top: 2px; } .modal-body {padding: 10px; } .modal-body .modal-form {margin-bottom: 0; } .modal-footer {padding: 14px 15px 15px;margin-bottom: 0;background-color: #f5f5f5;border-top: 1px solid #ddd;-webkit-border-radius: 0 0 6px 6px;-moz-border-radius: 0 0 6px 6px;border-radius: 0 0 6px 6px;-webkit-box-shadow: inset 0 1px 0 #ffffff;-moz-box-shadow: inset 0 1px 0 #ffffff;box-shadow: inset 0 1px 0 #ffffff;*zoom: 1; } .modal-footer:before, .modal-footer:after {display: table;content: ""; } .modal-footer:after {clear: both; } .modal-footer .btn {float: right;margin-left: 5px;margin-bottom: 0; } .hide {display:none; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn:hover, .btn:focus { color: #333; text-decoration: none; }

JS代碼：

function fadeIn() {document.getElementById('formTable').className = 'modal';document.getElementById('shade').className = 'modal-backdrop'; }function fadeOut() {document.getElementById('formTable').className = 'modal hide';document.getElementById('shade').className = 'modal-backdrop hide'; }

代碼解析及展示：

實(shí)現(xiàn)原理是，首先寫三個(gè)大的div

需要點(diǎn)擊出效果的button

模態(tài)對(duì)話框(默認(rèn)不顯示)

蒙層(默認(rèn)不顯示)

當(dāng)點(diǎn)擊button時(shí)，會(huì)執(zhí)行個(gè)js方法，會(huì)使對(duì)話框和蒙層顯示出來，并且對(duì)話框在蒙層上方(z-index)。當(dāng)點(diǎn)擊對(duì)話框的確定以及其他時(shí)，對(duì)話框和蒙層還原

轉(zhuǎn)載于:https://www.cnblogs.com/Caesary/p/5772070.html

總結(jié)

以上是生活随笔為你收集整理的python周报第十五周的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： uniapp小程序使用省市县区选择器pi
下一篇：如何通过监听器统计在线人数？