赞
踩
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三角形</title> <style type="text/css"> .box{ width: 0px; height: 0px; border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid black; } </style> </head> <body> <div class="box"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度热榜</title> <style type="text/css"> body,h3,ul{ margin: 0px; padding: 0px; } .news{ width: 360px; /* height: 400px; */ /* background-color: red; */ margin: 50px auto 0px;/*上 左右 下*/ border:1px solid #ddd; padding: 15px; } .news h3 { /* border: 1px solid red; */ font-size: 20px; margin-bottom: 20px; } .news ul { /* border: 1px solid #000; */ list-style: none; } .news ul li { border-bottom: 1px dotted #ddd; height: 35px; line-height: 35px; font-size: 15px; color: #333; } .news ul li a{ color: #333; text-decoration: none;/* 去掉下划线 */ } .news ul li a:hover{ color: red; } .news ul li a span{ /* border: 1px solid red; */ margin-right: 10px; font-weight: bold; } .col1{ color: red; } .col2{ color: #ff5c55; } .col3{ color: #ffa552; } </style> </head> <body> <div class="news"> <h3>百度新闻热榜</h3> <ul> <li><a href=""><span class="col1">1</span>元宵晚会</a></li> <li><a href=""><span class="col2">2</span>国防部回应美袭击中国民用无人飞艇热</a></li> <li><a href=""><span class="col3">3</span>花开中国 感受春天</a></li> <li><a href=""><span class="col4">4</span>25城平均月薪8203.56元热</a></li> <li><a href=""><span class="col5">5</span>宝宝时隔9个月偶遇月嫂主动求抱</a></li> <li><a href=""><span class="col6">6</span>美前外交官:布林肯推迟访华非常可悲</a></li> <li><a href=""><span class="col7">7</span>武契奇称以被西方制裁而自豪</a></li> <li><a href=""><span class="col8">8</span>新冠病毒去哪儿了?多地疾控研判</a></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿小米商城左侧菜单</title> <style type="text/css"> body{ background-image: linear-gradient(to right,#fbd787,#c6ffdd); margin: 0; } .menu{ width: 300px; /* height: 700px; */ background-color: rgba(225, 255, 255, 0.6); margin: 50px auto 0px; } ul{ list-style: none;/* 去掉圆点 */ margin: 0; padding: 0; } a{ text-decoration: none; } .menu ul{ /* border: 1px solid red; */ /* padding: 20px 0; */ } .menu ul li{ /* border: 1px solid blue; */ height: 42px; line-height: 42px; } .menu ul li a{ /* border: 1px solid #000; */ display: block; /* padding-left: 20px;*/ text-indent: 2em; color: #000; /* background-image: url('images/right.png'); background-repeat: no-repeat; background-position: 255px 11px; background-size: 10px; */ background: url('images/right1.png') no-repeat 255px 15px; background-size: 10px; } .menu ul li a:hover{ background-color: #ff6700; color: white; background-image: url('images/right2.png'); } </style> </head> <body> <div class="menu"> <ul> <li><a href="" target="_blank">手机</a></li> <li><a href="" target="_blank">电视</a></li> <li><a href="" target="_blank">笔记本 平板</a></li> <li><a href="" target="_blank">家电</a></li> <li><a href="" target="_blank">出行 穿戴</a></li> <li><a href="" target="_blank">智能 路由器</a></li> <li><a href="" target="_blank">电源 配件</a></li> <li><a href="" target="_blank">健康 儿童</a></li> <li><a href="" target="_blank">耳机 音箱</a></li> <li><a href="" target="_blank">生活 箱包</a></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>产品展示效果</title> <style type="text/css"> body, p, h3 { margin: 0; } a{ text-decoration: none; /* border: 1px solid red; */ display: block;/* 干掉bug */ } .product { width: 268px; /* height: 500px; */ /* background-color: red; */ margin: 50px auto 0; border: 1px solid #ddd; text-align: center; /* 水平居中 */ } .product p.describe { /* border: 1px solid red; */ color: #845f3f; font-size: 16px; } .product-text { height: 100px; background-color: #f8f8f8; margin-top: 20px; padding: 5px; } .product-mark img { margin-left: 20px; } /* 去除图片空隙 */ /* .product .product-text .product-mark{ font-size: 0; } */ .product .product-text h3 { font-size: 20px; font-weight: 400; /* border: 1px solid red; */ /* margin-top: 10px;s */ color: #000; } .product .product-text p { color: #a92112; font-size: 20px; margin-top: 5px; } </style> </head> <body> <div class="product"> <a href="" target="_blank"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水,放心饮用</p> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="30"> <img src="images/tehui.png" alt="特惠" height="30"> <img src="images/baojia.png" alt="30天保价" height="30"> <img src="images/shouhou.png" alt="售后免邮" height="30"> </div> <h3>云米电水壶</h3> <p>¥59</p> </div> </a> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>精美的分页效果</title> <style type="text/css"> body{ margin: 0; } .page{ width: 100%; /* height: 200px; */ background-color: azure; text-align: center; font-size: 0px; padding: 20px 0; } .page a,.page span{ border: 1px solid #ddd; background-color: #fff; display: inline-block; /* width: 30px; */ height: 30px; text-decoration: none; line-height: 30px; color: #333; padding: 0 10px; font-size: 14px; margin: 0 2px; } .page span{ background-color: red; color: white; } </style> </head> <body> <div class="page"> <a href=" "><</a> <span>1</span> <a href=" ">2</a> <a href=" ">3</a> <a href=" ">4</a> <a href=" ">5</a> <a href=" ">...</a> <a href=" ">100</a> <a href=" ">></a> </div> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。