三層結構的模擬框
要求：
1.最上面一層需要有一個form表單 獲取用戶名和密碼
2.第二層就是淺黑色
3.第三層放一張圖片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <title>模擬框</title> <style> <!--第二層布局--> .cover { position:fixed; top:0px; left:0px; right:0px; bottom:0px; <!--背景灰顏色和透明度--> background-color:rgba(127,127,127,0.75); <!--設置堆疊優先級最大最優先--> z-index:999 } <!--第一層--> .model{ position:fixed;
<!--top和left用於調整所在位置--> top:50%; left:45%; z-index:1000; background-color:white; height:200rpx; width:400rpx; margin-top:-100px; margin-bottom:-200px; } </style> <body> <!--第三層--> <div class='content'> <img src='img\zhu.jpg'/> </div> <!--第二層--> <div class="cover"></div> <!--第一層--> <div class="model"> <!--form表--> <form action=''> <p>用戶: <input name='username' type='text'/> </p> <p>密碼: <input name='password' type='password'/> </p> <input type='submit' value='注冊'/> <input type='button' value='取消' id='d1'/> </form> </div> </body> </html>
成果展示
書寫簡易博客園界面
技巧：
# 1.先寫html代碼
搭建網頁不要急着寫 先利用div構造頁面的大致布局；
在使用div做頁面布局的時候 ，div個數較多為了能夠很好的區分；
我們通常會給不同的div起不同的class屬性(屬性值最好能夠有一定的區分度)；
# 2.再寫css代碼
HTML代碼
<html> <head>
<meta charset="utf-8">
<title>博課園</title>
<link rel="stylesheet" href="mycss.css"/>
</head> <body>
<!--博客左側內容-->
<div class="blog-left"> <div class="blog-avatar"> <img src="img/ma.jpg"/> </div> <div class="blog-title"> <p>我的博客</p> </div> <div class="blog-desc"> <p>友好的boy</p> </div> <div class="blog-info"> <p><a href="https://www.baidu.com">百度</a></p> <p><a href="https://www.google.com">谷歌</a></p> <p><a href="https://v3.bootcss.com/">Bootstrap</a></p> </div> <div class="blog-link"> <p><a href="https://www.python.org/">Python</a></p> <p><a href="https://www.jetbrains.com/zh-cn/webstorm/">JavaScript</a></p> <p><a href="https://golang.google.cn/">Golang</a></p> </div> </div>
<!--博客左側內容-->
<div class="blog-right clearfix"> <div class="article-list"> <div class="article-title"> <span class="title"> 招親 </span> <span class="data"> 2021-8-6 </span> </div> <div class="article-content"> <div class="left"> <img src="img/zhu.jpg"> </div> <div class="right"> <p>小女十八，閉月羞花，盛世美顏，沉魚落雁，若那位壯士能娶我家千金，老夫感激涕零，必當重重有賞</p> </div> </div> <div class="article-others"> <span>#Python</span> <span>#JavaScript</span> </div> </div> </body> </html>
CSS代碼
body{ margin: 0px; background-color: rgb(238,238,238); } a{ text-decoration: none; } <!--用於解決浮動帶來的問題--> .clearfix:after { content: ''; display: block; clear:both; } <!--左側布局--> .blog-left{ float: left; position: fixed; width: 20%; height: 100%; top: 0px; left: 0px; background-color:rgb(78,78,78); } <!--頭像框架--> .blog-avatar{ height: 200px; width:200px; border:5px solid white; border-radius:50%; overflow: hidden; margin:20px auto; } .blog-avatar img{ width: 100%; } .blog-title,.blog-desc { color: darkgray; font-size:18px; text-align: center; } .blog-desc{ margin-bottom:50px } .blog-info a,.blog-link a{ color: darkgrey; } .blog-info{ margin-bottom:50px; } .blog-info a:hover, .blog-link a:hover{ color: white; } .blog-info p,.blog-link p { margin-left:100px; text-align:center; margin:10px auto; } <!--右側布局--> .blog-right{ float: right; height: 2000px; width: 80%; } <!--列表設置--> .article-list{ background-color:white; margin:20px 40px 20px 20px; box-shadow:2px 2px 5px #000; } .article-title{ border-left:10px solid red; } .article-title .title{ font-size:36px; margin-left:16px; } .article-title .data{ float:right; margin:20px 20px; } .article-content{ padding: 0px; height: 160px; border-bottom:1px solid black } <!--文章圖片所在位置--> .article-content .left{ margin: 5px; padding: 0px; height: 150px; width: 150px; float:left; } <!--圖片大小--> .article-content .left img{ height: 150px; width:150px; } <!--文章位置--> .article-content .right{ margin: 5px; padding: 0px; height: 200px; float: left; } .article-content .right p{ font-size:20px; text-indent:20px } .article-others{ padding:10px 20px; }
成果展示
前端框架工具
# 前端的框架有很多 功能也參差不齊 前端框架 頁面搭建相關 Bootstrap elementui layui 功能應用相關 react Vue # Bootstrap框架 能夠讓你cv快速搭建頁面 bootstrap.css # 未壓縮的 bootstrap.min.css # 壓縮之后的 # 頁面布局 <div class='container'> # 左右兩邊是否有留白 <div class='row'> # 一行均分12份 <div class='col-md-6 c1'></div> # 控制占幾份 # 響應式布局 .col-xs-超小屏幕 手機 (<768px),.col-sm-小屏幕 平板 (≥768px),.col-md-中等屏幕 桌面顯示器 (≥992px) 能夠根據瀏覽器窗口和機器型號的不同自動調節比例 使用bootstrap的情況下給標簽調樣式 一般都是修改標簽的calss值即可