三角形
<!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;
margin: 50px auto 0px;
border:1px solid #ddd;
padding: 15px;
}
.news h3 {
font-size: 20px;
margin-bottom: 20px;
}
.news ul {
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{
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;
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{
}
.menu ul li{
height: 42px;
line-height: 42px;
}
.menu ul li a{
display: block;
text-indent: 2em;
color: #000;
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;
display: block;
}
.product {
width: 268px;
margin: 50px auto 0;
border: 1px solid #ddd;
text-align: center;
}
.product p.describe {
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 h3 {
font-size: 20px;
font-weight: 400;
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%;
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;
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>