潭州学院html学习（day07）
一.完成以上的效果图
实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01作业</title> <style> *{padding:0;margin: 0;} a{text-decoration: none;color:inherit;} .wrap{ margin: 50px auto; width:300px; background: white; border:20px solid #cccccc; box-shadow: 0px 0px 10px 0; padding:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .box{ background: whitesmoke; height:100%; padding: auto; } .box img{ width:300px ; height: auto; } .box ul li a{ font-size: medium; color:#666; padding:5px; display: block; } ul li a:hover{ background-color: pink; text-decoration: underline; } </style> </head> <body> <div class="wrap"> <div class="box"> <img src="../images/01.jpg" alt="作业01"> <ul> <li><a href="#">[shaiya莹]水之密语靓彩</a></li> <li><a href="#">[抢新品NO.120]千金净雅妇科专用</a></li> <li><a href="#">[抢新品NO.120]千金净雅妇科专用</a></li> </ul> </div> </div> </body> </html>
二.完成如图的设计效果
实例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02作业</title> <style> *{padding: 0;color:0;} a{text-decoration: none;color: inherit;} .wrap{ margin: auto; width: 300px; border:20px solid #cccccc; box-shadow: 0 0 10px 0; padding: 20px; } .box{ width:300px; height: 100%; color:white; } .box img{ width: 300px; height: auto; } div h3{ font-family: Algerian; color:black; } .box ul li a{ padding: 5px; font-size: medium; display: block; color:black; } ul li a:hover{ background-color: pink; text-decoration: underline; } </style> </head> <body> <div class="wrap"> <div class="box"> <h3>享受 美食 娱乐</h3> <img src="../images/02.jpg" alt="02作业"> <ul> <li><a href="#">【美食特点】风味多样 四季有别 讲究菜肴的美感</a></li> <li><a href="#">【粤菜特色】它以选料广泛，讲究鲜.嫩.爽.滑.浓为主要特点 </a></li> <li><a href="#"> 【鲁菜特色】选料精细,刀法细腻,注重实惠,花色多样,善用葱姜</a></li> </ul> </div> </div> </body> </html>
三.完成以下效果图
实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03作业</title> <style> *{padding:0;margin: 0;} ul,ol{list-style: none;} a{text-decoration: none;color:inherit;} .side{ width: 40px; margin: 50px; } .side ul li{ width: 40px; height: 40px; margin-bottom: 5px; background-color: blue; cursor: pointer; /* 当鼠标移入元素，手指状 */ background-image: url("../images/03.png"); } .side ul li:nth-child(1){ background-position: -80px -280px;} .side ul li:nth-child(2){ background-position: 0 -200px;} .side ul li:nth-child(3){ background-position: 0 -240px;} .side ul li:nth-child(4){ background-position: 0 -320px;} .side ul li:nth-child(1):hover{ background-position: -120px -280px;} .side ul li:nth-child(2):hover{ background-position: -40px -200px;} .side ul li:nth-child(3):hover{ background-position: -40px -240px;} .side ul li:nth-child(4):hover{ background-position: -40px -320px;} .side ul li:nth-child(5):hover{ background-position: -40px 0;} </style> </head> <body> <div class="side"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
四.完成以下效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04作业</title> <style> *{padding: 0;margin: 0;} ul,ol{list-style: none;} a{text-decoration: none;color: inherit;} .box{ width:300px; background: whitesmoke; margin: 50px auto; border: 10px solid #ccc; padding: 10px; box-shadow: 0 0 10px 0; } .box ul li { padding: 5px; cursor: pointer; } .box ul li span{ display:inline-block; background-image: url("../images/04.png"); height: 20px; width:20px; vertical-align: middle; } .box ul li p{ font-size: 14px; display:inline-block; font-family: Algerian; color: #666666; vertical-align: middle; overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis; /* 文本超出用省略号修饰 */ white-space: nowrap; /* 文本不换行 */ width: 250px; } .box ul li:hover{ background-color: pink; } .box ul li:nth-child(1) span{background-position: -440px 0px;} .box ul li:nth-child(2) span{background-position: -440px -199px;} .box ul li:nth-child(3) span{background-position: -440px -40px;} .box ul li:nth-child(4) span{background-position: -440px -239px;} .box ul li:nth-child(5) span{background-position: -440px -80px;} .box ul li:nth-child(6) span{background-position: -440px -278px;} .box ul li:nth-child(7) span{background-position: -440px -120px;} </style> </head> <body> <div class="box"> <ul> <li> <span></span> <p>秋冬最夯，贝雷帽，报童帽大PK</p> </li> <li> <span></span> <p>比大牌更有格调的小众婚恋品牌</p> </li> <li> <span></span> <p>手腕不过档，用什么来补救</p> </li> <li> <span></span> <p>丑鞋出没！穿好了算你赢</p> </li> <li> <span></span> <p>红色这么穿，才能气场全开</p> </li> <li> <span></span> <p>再说汉子土，这些品牌要生气了</p> </li> <li> <span></span> <p>户外眼镜再丑也能赢得男神归</p> </li> </ul> </div> </body> </html>
注意：
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 文本超出用省略号修饰 */
white-space: nowrap; /* 文本不换行 */
