前端笔记：HTML+CSS练习案例
整理自b站课程《前端实战训练：2个网站+1个APP》
页面展示：
代码目录
代码包：
链接：https://pan.baidu.com/s/1Wv7b8Ku28n_GW_AKX964dA?pwd=b57f
提取码：b57f
index.css
/* 顶部黑色导航部分 */
.black-nav{
width: 100%;
height: 40px;
/* 控制文字部分与box同高，文字效果上下居中 */
line-height: 40px;
font-size: 12px;
background-color: #333333;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.black-nav-left{
float: left;
}
.black-nav-right{
float: right;
}
/* .black-nav-rigtht{
float: right;
} */
.black-nav-left li,.black-nav-right li{
float: left;
}
.black-nav a{
color: #b0b0b0;
}
.wrap span{
color: #424242;
margin: 0 4px;
}
/* 第二行白色导航部分 */
.middle-nav{
width: 100%;
height: 100px;
background-color: #ffffff;
}
.logo{
width: 234px;
height: 100px;
float: left;
}
.mi-logo{
width: 56px;
margin-top: 10px;
}
.new-prod{
margin-top: 22.5px;
}
.middle-nav-bar{
float: left;
width: 696px;
height: 100px;
}
.middle-nav-bar ul li{
float: left;
padding: 38px 10px;
}
.middle-nav-bar a{
color: #333333;
}
/* 搜索框 */
.search{
float: left;
width: 296px;
height: 100px;
}
.search input{
float: left;
height: 50px;
width: 285px;
border: 1px solid #e0e0e0;
margin-top: 25px;
padding-left: 10px;
}
/* banner */
.banner{
width: 100%;
height: 460px;
}
/* 右侧(实为底部)图片 */
.banner-box{
width: 1226px;
height: 460px;
background-image: url("../images/banner.jpg");
background-size: 100%;
}
.banner .wrap{
position: relative;
}
/* 左侧导航栏 */
.side{
position: absolute;
float: left;
left: 0;
top: 0;
width: 234px;
height: 420px;
padding: 20px 0;
background-color: rgba(105,101,101,0.6);
}
.side ul li{
text-align: left;
height: 42px;
padding-left: 30px;
line-height: 42px;
}
.side ul li a{
color: #ffffff;
font-size: 14px;
}
/* 鼠标悬停效果 */
.side ul li:hover{
background-color: #ff6700;
}
/* 手机展示部分 */
.container{
width: 100%;
background-color: #f5f5f5;
padding-top: 4px;
padding-bottom: 12px;
/* 示例网站部分，底部可添加，无固定长度，故不用固定在底部 */
}
.title{
/* 文字靠左边摆放 */
text-align: left;
font-weight: 300;
font-size: 22px;
color: #333;
height: 58px;
line-height: 58px;
}
.phone-left{
width: 234px;
height: 614px;
float: left;
}
.phone-right{
width: 992px;
height: 614px;
float: left;
}
.items{
float: left;
width: 234px;
height: 300px;
margin-left: 14px;
margin-bottom: 14px;
background-color: #ffffff;
}
.items img{
width: 160px;
margin: 20px 0 18px;
}
.name{
margin-bottom: 3px;
height: 21px;
color: #212121;
font-size: 14px;
margin: 0 auto;
width: 194px;
font-weight: 200;
}
.desc{
width: 214px;
color: #b0b0b0;
font-size: 12px;
margin: 0 auto;
width: 194px;
margin-bottom: 10px;
}
.price{
font-size: 14px;
color: #ff6700;
}
.price del{
color: #b0b0b0;
}
reset.css
/* 标签格式化文件 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
body{text-align: center;font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;}
ul,ol,li{ list-style: none;}
a{text-decoration: none;}
.clear{
overflow: hidden;
clear: both;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="black-nav">
<div class="wrap">
<ul class="black-nav-left">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">天星数科</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">小爱开发平台</a><span>|</span></li>
<li><a href="#">企业团购</a><span>|</span></li>
<li><a href="#">资质证照</a><span>|</span></li>
<li><a href="#">协议规则</a><span>|</span></li>
<li><a href="#">下载app</a><span>|</span></li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">Select Location</a><span>|</span></li>
</ul>
<ul class="black-nav-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li>
<li><a href="#">购物车(0)</a><span>|</span></li> </ul>
</div>
</div>
<!-- 中间导航栏 -->
<div class="middle-nav">
<div class="wrap">
<div class="logo">
<a href="#">
<img src="images/logo-mi2.png" alt="小米logo" class="mi-logo">
</a>
<a href="#">
<img src="images/new.gif" alt="新品发布会" class="new-prod">
</a>
</div>
<div class="middle-nav-bar">
<ul class="middle-nav-left">
<li><a href="#">小米手机</a></li>
<li><a href="#">Redmi红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="家电">
</div>
</div>
</div>
<!-- banner轮播 -->
<div class="banner">
<div class="wrap">
<div class="banner-box">
</div>
<div class="side">
<ul>
<li><a href="#">手机 电话卡</a></li>
<li><a href="#">电视 盒子</a></li>
<li><a href="#">笔记本 显示器</a></li>
<li><a href="#">家电 插线板</a></li>
<li><a href="#">出行 穿戴</a></li>
<li><a href="#">智能 路由器</a></li>
<li><a href="#">电源 配件</a></li>
<li><a href="#">健康 儿童</a></li>
<li><a href="#">耳机 音响</a></li>
<li><a href="#">生活 箱包</a></li>
</ul>
</div>
</div>
</div>
<!-- 手机部分 -->
<div class="container">
<div class="wrap">
<div class="phone_detail">
<h2 class="title">手机</h2>
<div class="phone clear">
<div class="phone-left">
<a href="#">
<img src="images/all.webp" alt="折叠手机">
</a>
</div>
<div class="phone-right">
<ul class="phone-items">
<li class="items">
<a href="#">
<img src="images/p1.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/p2.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/p3.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/p4.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/p5.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/p6.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/p7.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/p8.webp" alt="">
<h3 class="name">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1499元起
<del>1699元</del>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
