收藏
批改狀態(tài)：合格
老師批語：有時 , 你把自己當成瀏覽器的設計者, css的開發(fā)者, 如果換做你, 你會怎么在頁面中顯示這些元素, 很多概念就好明白了
一、制作一張商品信息表，內(nèi)容自定，要求用到行與列的合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table表格樣式</title> <link rel="stylesheet" type="text/css" href="static/css/style1.css"> </head> <body> <table> <caption>商品信息表</caption> <thead> <tr> <th>倉庫</th> <th>產(chǎn)品編號</th> <th>品名</th> <th>數(shù)量</th> </tr> </thead> <tbody> <tr> <td rowspan="3">倉庫A</td> <td>0104</td> <td>小米MI</td> <td>8</td> </tr> <tr> <td>0527</td> <td>華為pro</td> <td>12</td> </tr> <tr> <td>0311</td> <td>Macbook</td> <td>55</td> </tr> <tr> <td rowspan="2">倉庫B</td> <td>0980</td> <td>iPhone 11</td> <td>666</td> </tr> <tr> <td>1515</td> <td>switch L</td> <td>3</td> </tr> <tr> <td>合計</td> <td colspan="2"></td> <td>744</td> </tr> </tbody> <tfoot> <tr> <td>備注</td> <td colspan="3">每天下午5:00巡查安全隱患，以防火災發(fā)生！</td> </tr> </tfoot> </table> </body> </html>
table {
box-sizing: border-box;
/*邊框折疊*/
border-collapse: collapse;
color: #444;
margin: 20px auto;
width: 600px;
box-shadow: 1px 1px 1px #999
}
caption{
margin:10px;
font-size: 1.2rem;
}
td,th{
border: 1px solid #444;
text-align: center;
padding:10px;
}
tbody > tr:nth-of-type(odd){
background-color:#ededed;
}
thead tr:nth-child(1){
background: linear-gradient(lightblue,white);
}
tfoot tr:nth-child(1){
background: linear-gradient(white,lightblue);
}
/*倉庫A單元格*/
tbody>tr:first-of-type>td:first-of-type{
background: linear-gradient(to right,lightgreen,white);
}
/*倉庫B單元格*/
tbody>tr:nth-of-type(4)>td:first-of-type{
background: linear-gradient(to right,lightgreen,white);
}
/*合計單元格*/
tbody>tr:last-of-type>td:first-of-type{
background: linear-gradient(to right,lightgreen,white);
}效果
二、使用<div><span><p><ul>...等標簽來制作一張課程表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不使用table做表格</title> <link rel="stylesheet" type="text/css" href="static/css/style2.css"> </head> <body> <article class="table"> <h3 class="caption">課程表</h3> <section class="thead"> <div> <span>序號</span> <span>課程</span> <span>描述</span> </div> </section> <section class="tbody"> <div> <span>1</span> <span>html</span> <span>h5常用標簽的使用</span> </div> <div> <span>2</span> <span>css</span> <span>css3樣式和頁面布局</span> </div> <div> <span>3</span> <span>php</span> <span>php語法和常用函數(shù)</span> </div> </section> <section class="tfoot"> <div> <span>備注：</span> <span>直播</span> <span>每天22:00</span> </div> </section> </article> </body> </html>
.table{
display: table;
box-sizing: border-box;
border-collapse: collapse;
border:1px solid #444;
width: 600px;
margin:auto;
color: #444;
}
.caption{
display: table-caption;
text-align: center;
letter-spacing: 10px;
font-size: 2rem;
color: lightblue;
text-shadow: 2px 2px 1px #444
}
.thead{
display: table-header-group;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
letter-spacing: 5px;
color: white;
text-shadow: 1px 1px 1px #444;
background:linear-gradient(lightgreen,lightblue);
}
.tbody{
display: table-row-group;
}
.tfoot{
display: table-footer-group;
background: linear-gradient(#fff,lightblue)
}
/*將所有div轉(zhuǎn)為行*/
section div{
display:table-row;
}
/*所有span轉(zhuǎn)換為單元格*/
section div span{
display: table-cell;
border:1px solid #444;
padding: 10px;
text-align: center;
}效果
三、使用絕對定位，實現(xiàn)用戶登錄框在頁面中始終居中顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>絕對定位</title> <link rel="stylesheet" type="text/css" href="static/css/style3.css"> </head> <body> <div class="login"> <p>請先登錄</p> <form action="" method="post"> <p> <label for="username">用戶名：</label> <input type="username" name="username" id="username"> </p> <p> <label for="password">密碼：</label> <input type="password" name="password" id="password"> </p> <button>登錄</button> </form> </div> </body> </html>
.login{
position: absolute;
height: 200px;
width: 300px;
border:1px solid black;
text-align: center;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -100px;
}效果
四、模仿課堂案例, 實現(xiàn)圣杯布局,并寫出完整流程與布局思路
圣杯布局還是很有意思的，首先html頁面元素有頭部、底部、左邊欄、右邊欄和主體部分。主體部分標簽放在左右邊欄前面優(yōu)先渲染。
定義body寬度，防止PC端瀏覽器錯位。設置左右邊欄和主體部分高度和寬度，因為沒有內(nèi)容撐起這幾個塊兒元素。思路是在整個main標簽里給左右兩邊分別向內(nèi)擠出來200px作為左右側(cè)邊的位置，也就是padding-left:200px、padding-right:200px，中間的100%就是主體部分。
所以給主體部分設置寬度100%，左右寬度各為200px。然后設置這三個元素左浮動。
利用margin:-100%把左邊拉到main的最左邊，注意，不會影響到padding-left預留的200px，然后再使用相對定位往左邊推200px，也就是left:-200px讓左邊歸位。
右邊只用margin:200px即可達到main的最右邊位置，不會影響到padding-right預留的200px，再使用相對定位把右邊欄往右推200px，也就是left:200px完成基本布局。也就是左右兩邊欄寬度固定，中間自適應。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <link rel="stylesheet" type="text/css" href="static/css/style4.css"> </head> <body> <header>頭部</header> <main> <!-- 主題內(nèi)容區(qū)優(yōu)先渲染 --> <article>主體</article> <aside class="left">左</aside> <aside class="right">右</aside> </main> <footer>底部</footer> </body> </html>
body{
width: 1000px;
}
header,footer{
height: 50px;
background: lightgrey;
text-align: center;
}
main > article,
.left,
.right{
float: left;
}
main{
box-sizing: border-box;
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
main > article{
background-color: lightpink;
width: 100%;
min-height: 600px;
}
aside{
min-height: 600px;
width: 200px;
}
.left{
background-color: lightgreen;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
background-color: lightblue;
margin-left: -200px;
position: relative;
left:200px;
}結(jié)果
手抄代碼：
總結(jié)：本次作業(yè)又把之前幾節(jié)課學的內(nèi)容復習了一下，表格和選擇器。掌握的更加熟悉。定位布局方面，絕對定位掌握的不是很好，如果把body或者html設置成定位父級，絕對定位的元素就會向上偏移無法解決只好讓定位父級是初始包含塊，還需要更多的學習和練習。
微信掃碼
關(guān)注PHP中文網(wǎng)服務號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號