admin管理员组文章数量:1566355
跟着Pink老师学完HTML+CSS后试着写了一个小米商城首页项目,虽然过程曲折,但是结果还是不错的,做项目的过程就是总结归纳知识点,让学过的东西能更加熟练的运用;
页面部分截图:
项目的搭建:
HTML部分代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="widdh=device-widdh, initial-scale=1.0">
<title>
小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD,小米电视官方网站
</title>
<meta name="discription"
content="小米官网直营小米公司旗下所有产品,包括Xiaomi手机系列Xiaomi 11 Ultra、MIX FOLD,Redmi 红米系列Redmi Note 9、Redmi K40 Pro,小米电视、笔记本、米家智能家居等,同时提供小米客户服务及售后支持.">
<meta name="keywords" content="Xiaomi,redmi,Xiaomi11 Ultra,Redmi Note 9,Xiaomi MIX Alpha,小米商城">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--快捷导航-->
<section class="shortcut">
<div class="w">
<div class="top-nav">
<a href="#">小米商城</a>
<span class="sp">|</span>
<a href="#">MIUI</a>
<span class="sp">|</span>
<a href="#">IoT</a>
<span class="sp">|</span>
<a href="#">云服务</a>
<span class="sp">|</span>
<a href="#">天星数科</a>
<span class="sp">|</span>
<a href="#">有品</a>
<span class="sp">|</span>
<a href="#">小爱开放平台</a>
<span class="sp">|</span>
<a href="#">企业团购</a>
<span class="sp">|</span>
<a href="#">资质证书</a>
<span class="sp">|</span>
<a href="#">协议规则</a>
<span class="sp">|</span>
<a href="#">下载app</a>
<span class="sp">|</span>
<a href="#">Select Location</a>
</div>
<div class="top-info">
<a href="#">登录</a>
<span class="sp">|</span>
<a href="#">注册</a>
<span class="sp">|</span>
<a href="#">消息通知</a>
</div>
</div>
</section>
<!--头部模块-->
<header class="header">
<div class="w">
<div class="logo">
<h1>
<a href="index.html" title="小米官网">小米商城</a>
</h1>
</div>
<div class="nav">
<ul class="nav-list">
<li class="nav-first">
<a href="#" class="link-first"><span class="text">全部商品分类</span></a>
<div class="site-first" style="display: block;">
<ul class="site-first-list">
<li class="first-item"><a herf="#" class="title">手机<span> </span></a></li>
<li class="first-item"><a herf="#" class="title">电视<span> </span></a></li>
<li class="first-item"><a herf="#" class="title">笔记本 平板<span> </span></a>
</li>
<li class="first-item"><a herf="#" class="title">家电<span> </span></a></li>
<li class="first-item"><a herf="#" class="title">出行 穿戴<span> </span></a>
</li>
<li class="first-item"><a herf="#" class="title">智能 路由器<span> </span></a>
</li>
<li class="first-item"><a herf="#" class="title">电源 配件<span> </span></a>
</li>
<li class="first-item"><a herf="#" class="title">健康 儿童<span> </span></a>
</li>
<li class="first-item"><a herf="#" class="title">耳机 音箱<span> </span></a>
</li>
<li class="first-item"><a herf="#" class="title">生活 箱包<span> </span></a>
</li>
</ul>
</div>
</li>
<li class="nav-item"><a href="#">Xiaomi手机</a></li>
<li class="nav-item"><a href="#">Redmi红米</a></li>
<li class="nav-item"><a href="#">电视</a></li>
<li class="nav-item"><a href="#">笔记本</a></li>
<li class="nav-item"><a href="#">平板</a></li>
<li class="nav-item"><a href="#">家电</a></li>
<li class="nav-item"><a href="#">路由器</a></li>
<li class="nav-item"><a href="#">服务</a></li>
<li class="nav-item"><a href="#">社区</a></li>
</ul>
</div>
<div class="header-search ">
<input type="text" placeholder="小米手机">
<span></span>
</div>
</div>
</header>
CSS部分代码:
.w {
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.shortcut {
position: relative;
z-index: 30;
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
}
.top-nav {
float: left;
height: 40px;
line-height: 40px;
}
.top-info {
position: relative;
float: right;
height: 40px;
line-height: 40px;
}
.shortcut a:hover {
color: #fff;
}
.shortcut .sp {
margin: 0 0.3em;
color: #424242;
}
.top-nav a {
line-height: 40px;
color: #b0b0b0;
display: inline-block;
}
.top-info a {
line-height: 40px;
color: #b0b0b0;
display: inline-block;
padding: 0 5px;
text-align: center;
}
.top-info .sp {
margin: 0;
}
.header {
height: 100px;
background-color: #fff;
}
.logo {
float: left;
margin-top: 22px;
height: 56px;
width: 56px;
}
.logo a {
display: block;
width: 56px;
height: 56px;
text-indent: -9999px;
overflow: hidden;
background: url(../images/logo.png) no-repeat;
background-size: contain;
}
.nav {
float: left;
width: 850px;
}
.nav .nav-list {
position: relative;
float: left;
width: 1100px;
height: 88px;
margin: 0;
padding: 12px 0 0 30px;
font-size: 16px;
}
.nav .nav-first {
position: relative;
float: left;
width: 127px;
padding-right: 15px;
}
.nav-first .link-first {
display: block;
padding: 26px 0 38px;
text-align: right;
color: #333;
visibility: hidden;
}
.site-first {
position: absolute;
top: 88px;
left: -87px;
width: 234px;
height: 460px;
font-size: 14px;
background: rgba(105, 101, 101, .6);
}
.site-first .site-first-list {
height: 460px;
border: 0;
margin: 0;
padding: 20px 0;
color: #fff;
}
.site-first-list .title {
position: relative;
display: block;
padding-left: 30px;
height: 42px;
line-height: 42px;
}
.site-first-list .title:hover {
background-color: coral;
}
.site-first-list .title span {
position: absolute;
font-family: "icomoon";
top: 12px;
right: 20px;
font-size: 20px;
line-height: 16px;
color: #e0e0e0;
}
.nav .nav-item {
float: left;
}
.nav .nav-item a {
display: block;
padding: 26px 10px 38px;
color: #333;
}
.nav-item a:hover {
color: coral;
}
.header-search {
position: relative;
float: right;
width: 296px;
height: 50px;
margin-top: 25px;
border: 1px solid #e0e0e0;
}
.header-search input {
position: absolute;
top: 0;
right: 51px;
width: 243px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
outline: none;
border-right: 1px solid #e0e0e0;
}
.header-search span {
position: absolute;
font-family: "icomoon";
top: 0;
right: 0;
width: 52px;
height: 50px;
font-size: 20px;
padding: 8px 15px;
color: #616161;
cursor: pointer;
}
.header-search span:hover {
background-color: coral;
}
版权声明:本文标题:HTML+CSS静态页面的实战练习——小米商城 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726414274a1069618.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论