30个HTML+CSS前端开发案例（6-10）
- 常用的选项卡菜单效果
- 网页框架布局
- 酷狗音乐热榜
- 小米商城首页产品栏
- 酷狗精选歌单效果
常用的选项卡菜单效果
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用的选项卡菜单效果title>
<style type="text/css">
body{
margin: 0;
}
.tab{
width: 800px;
background-color: #f7f7f7;
border-radius: 50px;
margin: 50px auto 0;
font-size: 0;
text-align: center;
padding: 5px 0;
}
.tab span{
height: 40px;
display: inline-block;
padding: 0 40px;
line-height: 40px;
font-size: 16px;
border-radius: 50px;
}
.tab span i{
width: 26px;
height: 26px;
display: inline-block;
background-image: url('images/icon.png');
vertical-align: middle;
margin-right: 5px;
}
.tab span i.icon1{
background-position: -26px 0px;
}
.tab span i.icon2{
background-position: -52px 0px;
}
.tab span i.icon3{
background-position: -78px 0px;
}
.tab span i.icon4{
background-position: -104px 0px;
}
.tab span i.icon5{
}
.tab span.current{
background-color: #fe94a9;
color: #fff;
}
.tab span.current i.icon1{
background-position: 0 -26px;
}
.tab span.current i .icon2{
background-position: -26px -26px;
}
.tab span.current i .icon3{
background-position: -52px -26px;
}
.tab span.current i .icon4{
background-position: -78px -26px;
}
.tab span.current i .icon5{
background-position: -104px -26px;
}
style>
head>
<body>
<div class="tab">
<span class="current"><i class="icon1">i>备孕期间span>
<span><i class="icon2">i>怀孕span>
<span><i class="icon3">i>0-1岁span>
<span><i class="icon4">i>1-2岁span>
<span><i class="icon5">i>2-3岁span>
div>
body>
html>
网页框架布局
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页框架布局title>
<style type="text/css">
body ul{
margin: 0;
padding: 0;
}
.layout {
width: 1000px;
margin: 50px auto 0;
}
.column-2 {
margin-top: 20px;
}
.column-2 .column-2-1 {
width: 700px;
height: 300px;
float: left;
background-color: red;
}
.column-2 .column-2-2 {
width: 280px;
height: 300px;
float: right;
background-color: yellow;
}
.clear {
clear: both;
}
.column-3 {
margin-top: 20px;
}
.column-3-1 {
width: 260px;
height: 300px;
background-color: bisque;
float: left;
}
.column-3-2 {
width: 300px;
height: 300px;
background-color: orangered;
float: left;
margin-left: 20px;
}
.column-3-3 {
width: 400px;
height: 300px;
background-color: #009af3;
float: right;
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
ul{
list-style: none;
}
.column-n{
margin-top: 20px;
}
.column-n ul{
}
.column-n ul li{
width: 190px;
height: 200px;
float: left;
margin: 5px;
background-color: chartreuse;
}
style>
head>
<body>
<div class="layout">
<div class="column-2">
<div class="column-2-1">div>
<div class="column-2-2">div>
<div class="clear">div>
div>
<div class="column-3 clearfix">
<div class="column-3-1">div>
<div class="column-3-2">div>
<div class="column-3-3">div>
div>
<div class="column-n">
<ul class="clearfix">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
div>
body>
html>
酷狗音乐热榜
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酷狗音乐热榜title>
<style type="text/css">
body,
h3,
h4,
p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.music-hot {
width: 350px;
height: 500px;
margin: 50px auto 0;
}
.music-hot h3 {
height: 40px;
line-height: 40px;
}
.img-collection h3 span {
font-size: 28px;
font-weight: 100;
}
.img-collection h3 span i {
color: #009af3;
font-style: normal;
}
.img-collection h3 a {
text-decoration: none;
color: #666;
font-size: 14px;
font-weight: 100;
float: right;
}
.music-hot .item {
height: 98px;
background-color: #f6f6f6;
margin-top: 20px;
}
.music-hot .item .item-img {
width: 98px;
height: 98px;
float: left;
}
.music-hot .item .item-txt {
width: 232px;
height: 98px;
float: right;
background: url('images/arrow.png') no-repeat right center;
}
.music-hot .item .item-txt h4 {
font-size: 14px;
padding: 8px 0;
}
.music-hot .item .item-txt p {
font-size: 14px;
color: #555;
line-height: 25px;
}
.music-hot .item .item-txt p span {
color: #999;
}
.music-hot .item a {
display: block;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.music-hot .item .item-txt h4 {
color: #000;
}
style>
head>
<body>
<div class="music-hot">
<div class="img-collection">
<h3>
<a href="">更多a>
<span><i>精选i>图片span>
h3>
div>
<a href="" class="clearfix">
<div class="item">
<div class="item-img">
<img src="images/nav1.jpg" alt="音乐飙升榜" width="98">
div>
<div class="item-txt">
<h4>酷狗飙升榜h4>
<p>1 . 很受伤 (Live)- <span>郁可唯span>p>
<p>2 . Lemon (柠檬)- <span>米津玄師span>p>
div>
div>
a>
<a href="" class="clearfix">
<div class="item">
<div class="item-img">
<img src="images/nav2.jpg" alt="音乐飙升榜" width="98">
div>
<div class="item-txt">
<h4>酷狗飙升榜h4>
<p>1 . 很受伤 (Live)- <span>郁可唯span>p>
<p>2 . Lemon (柠檬)- <span>米津玄師span>p>
div>
div>
a>
<a href="" class="clearfix">
<div class="item">
<div class="item-img">
<img src="images/nav3.jpg" alt="音乐飙升榜" width="98">
div>
<div class="item-txt">
<h4>酷狗飙升榜h4>
<p>1 . 很受伤 (Live)- <span>郁可唯span>p>
<p>2 . Lemon (柠檬)- <span>米津玄師span>p>
div>
div>
a>
div>
body>
html>
小米商城首页产品栏
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城首页产品栏title>
<style type="text/css">
body {
margin: 0;
background-color: #ddd;
}
h3,
h4,
p,
ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.product {
width: 1226px;
margin: 50px auto 0;
}
.product .product-hot {
width: 234px;
float: left;
}
.product-hot img {
display: block;
}
.product .product-list {
width: 992px;
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.product-list ul {
}
.product-list ul li {
width: 234px;
height: 300px;
float: left;
margin-left: 14px;
margin-bottom: 14px;
background-color: white;
}
.product-list ul li:nth-last-child(1) {
height: 143px;
}
.product-list ul li:nth-last-child(2) {
height: 143px;
}
.product-list ul li a {
display: block;
height: inherit;
text-align: center;
padding-top: 30px;
box-sizing: border-box;
}
.product-list ul li a h3 {
font-size: 14px;
font-weight: 400px;
padding: 0 5px 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.product-list ul li a p.describe {
color: #999;
}
.product-list ul li a p.price {
font-size: 14px;
padding-top: 15px;
}
.product-list ul li a p.price span {
color: orange;
margin-right: 10px;
}
.product-list ul li a p.price del {
color: #999;
}
.product-list ul li .txt {
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
.product-list ul li .img {
width: 80px;
height: 80px;
float: right;
margin-right: 20px;
}
.product-list ul li .txt h4 {
font-weight: 400;
font-size: 14px;
text-align: left;
}
.product-list ul li .txt p {
font-size: 14px;
text-align: left;
color: orange;
margin-top: 15px;
}
.product-list ul li .more{
margin-top: 20px;
}
.product-list ul li .txt h4.ti{
font-size: 20px;
}
.product-list ul li .txt p.hot{
color: #999;
}
style>
head>
<body>
<div class="product clearfix">
<div class="product-hot">
<a href="">
<img src="images/mi00.webp" alt="热卖" width="234px">
a>
div>
<div class="product-list">
<ul class="clearfix">
<li>
<a href="">
<img src="images/mi01.webp" alt="" width="160">
<h3>Xiaomi Watch S1h3>
<p class="describe">腕事具备p>
<p class="price"><span>1099元起span><del>2099元起del>p>
a>
li>
<li>
<a href="">
<img src="images/mi02.webp" alt="" width="160">
<h3>Xiaomi Watch S1h3>
<p class="describe">腕事具备p>
<p class="price"><span>1099元起span><del>2099元起del>p>
a>
li>
<li>
<a href="">
<img src="images/mi03.webp" alt="" width="160">
<h3>Xiaomi Watch S1h3>
<p class="describe">腕事具备p>
<p class="price"><span>1099元起span><del>2099元起del>p>
a>
li>
<li>
<a href="">
<img src="images/mi04.webp" alt="" width="160">
<h3>Xiaomi Watch S1h3>
<p class="describe">腕事具备p>
<p class="price"><span>1099元起span><del>2099元起del>p>
a>
li>
<li>
<a href="">
<img src="images/mi05.webp" alt="" width="160">
<h3>Xiaomi Watch S1h3>
<p class="describe">腕事具备p>
<p class="price"><span>1099元起span><del>2099元起del>p>
a>
li>
<li>
<a href="">
<img src="images/mi06.webp" alt="" width="160">
<h3>Xiaomi Watch S1h3>
<p class="describe">腕事具备p>
<p class="price"><span>1099元起span><del>2099元起del>p>
a>
li>
<li>
<a href="">
<img src="images/mi07.webp" alt="" width="160">
<h3>Xiaomi Watch S1h3>
<p class="describe">腕事具备p>
<p class="price"><span>1099元起span><del>2099元起del>p>
a>
li>
<li>
<a href="">
<div class="txt">
<h4>Redmi Buds 3 青春版h4>
<p>999元p>
div>
<div class="img">
<img src="images/mi08.webp" alt="" width="80">
div>
a>
li>
<li>
<a href="">
<div class="txt">
<h4 class="ti">浏览更多h4>
<p class="hot">热门p>
div>
<div class="img more">
<img src="images/circle-arrow.svg" alt="" width="48">
div>
a>
li>
ul>
div>
div>
body>
html>
酷狗精选歌单效果
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酷狗精选歌单效果title>
<style type="text/css">
body,
p,
h3 {
margin: 0;
padding: 0;
}
.music {
width: 480px;
height: 480px;
background-color: aqua;
margin: 50px auto 0;
}
a {
text-decoration: none;
color: #000;
}
.music a {
width: 480px;
height: 480px;
display: block;
position: relative;
}
.music p.music-number {
height: 35px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
text-align: center;
}
.music p.music-number span.icon-earphone {
width: 35px;
height: 35px;
float: right;
background: url('images/earphone.svg') no-repeat center;
background-size: 20px;
margin-right: 10px;
}
.music p.music-number span.musci-number-txt {
height: 35px;
float: right;
font-size: 14px;
color: white;
line-height: 35px;
padding-right: 10px;
}
.music .music-text {
width: 100%;
height: 80px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
color: white;
}
.music .music-text h3 {
font-weight: 100;
padding: 15px 0 5px 10px;
}
.music .music-text p {
color: #ddd;
padding-left: 10px;
}
.music .music-mask {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: none;
}
.music .play-button {
width: 36px;
height: 36px;
position: absolute;
bottom: 22px;
right: 22px;
background: url('images/play-button.svg');
display: none;
}
.music a:hover .music-mask,
.music a:hover .play-button {
display: block;
}
style>
head>
<body>
<div class="music">
<a href="#">
<img src="images/kugou-img1.jpg" alt="" width="480">
<p class="music-number">
<span class="musci-number-txt">679.9万span>
<span class="icon-earphone">span>
p>
<div class="music-text">
<h3>乡村之旅：安静惬意，与自然同在h3>
<p>蔓若p>
div>
<div class="music-mask">
<div class="play-button">div>
div>
a>
div>
body>
html>
