用html设计一个静态网页_学生个人静态网页制作模板
2023-06-13 09:14:09 时间
大家好，又见面了，我是你们的朋友全栈君。
用HTML和CSS制作简单的静态网页（小米商城）
网页效果如下：
代码如下
（第一次写静态网页，中间css代码和html代码没有分离，所以代码可能有点乱还请见谅） 1、css代码
/*--------------------------------------------01-----------------------------------------------------------*/
*{
margin: 0;
padding: 0;
}
/*清除标志*/
li{
list-style: none;
}
/*清除下划线*/
a{
text-decoration: none;
}
.tp{
height: 120px;
width: 1360px;
}
/*把li向左浮动，然后设置一个右边的外边距（就是空格）*/
.ul li{
float: left;
padding-right: 15px;
}
.ul li a{
color: rgb(176,176,176);
}
.ul li a:hover{
color: white;
}
/*------------------------------------------02-------------------------------------------------------------*/
.shopping{
float: right;
}
/*a是内联元素，先改成块元素，然后设置外边距*/
.shopping a{
display: block;
padding: 0px 50px;
color: rgb(176,176,176);
}
.shopping a:hover{
background-color: saddlebrown;
}
.right{
float: right;
}
.right a{
padding-right: 10px;
color: rgb(176,176,176);
}
.right a:hover{
color: white;
}
.all{
width: 90%;/* 只占父标签的百分之90的宽度 */
margin: 0 auto;
overflow: hidden;/*清除浮动*/
}
.top-boss{
background-color: black;
line-height: 40px;
}
/*-------------------------------------------03------------------------------------------------------------*/
.img{
float: left;
margin: 23px 190px 0 0;
}
.second-ul li{
float: left;
padding-right: 25px;
}
.second-ul li a:hover{
color: coral;
}
.input{
float: right;
}
.input input{
width: 249px;
height: 45px;
border:1px solid #dfdfdf;
}
.input input:focus{
background-color: whitesmoke;
}
.ss{
float: right;
margin: 27px 0 0 0;
}
.all2{
/*解决高度塌陷*/
overflow: hidden;
background-color: white;
height: 100px;
/*li高度居中*/
line-height: 100px;
width: 90%;
/*宽度居中*/
margin: 0 auto;
}
/*---------------------------------------------04----------------------------------------------------------*/
.center-img{
float: right;
}
.left0 ul{
margin: 20px 0 ;
}
.left0 li a {
display: block;
line-height: 42px;
background-color: rgb(114,135,157);
color: white;
}
.left0 li a:hover{
background-color: rgb(255,103,0);
}
.center-boss{
overflow: hidden;
width: 90%;
height: 460px;
/*宽度居中*/
margin: 0 auto;
background-color: rgb(114,135,157);
}
/*----------------------------------------------05---------------------------------------------------------*/
.center-two{
background-color: rgb(95,87,80);
height: 170px;
width: 220px;
margin: 15px 15px 15px 0;
}
.center-two ul div li{
font-size: 12px;
}
.center-two ul div {
float: left;
margin: 5px;
}
.center-two ul{
overflow: hidden;
margin: 0 0 0 15px;
}
.center-two-one ul li{
float: right;
margin: 15px 0 0 15px;
}
.center-two-one ul li img{
height: 170px;
width: 317px;
}
#a{
overflow: hidden;
width: 90%;
/*height: 170px;*/
margin: 0 auto;
}
#a{
background-color: white;
}
/*----------------------------------------------小米闪购---------------------------------------------------------*/
.zifu{
height: 58px;
background-color: rgb(245,245,245);
overflow: hidden;
}
.zifu h2{
float: left;
line-height: 58px;
font-size: 22px;
font-weight: 200;
}
.zifu a{
line-height: 58px;
display: block;
float: right;
background-color: rgb(245,245,245);
}
.sangou-one{
float: left;
/*margin: 0 0 15 0px;*/
width: 100px;
}
.sangou-two ul li{
float: right;
margin: 0 0 10px 10px;
}
.sangou{
overflow: hidden;
background-color: rgb(245,245,245);
width: 90%;
margin: 0 auto;
}
#q a img{
margin: 0 0 10px 0;
}
/*----------------------------------------------手机---------------------------------------------------------*/
.phone-one{
height: 58px;
background-color: rgb(245,245,245);
overflow: hidden;
}
.phone-one h2{
float: left;
line-height: 58px;
font-size: 22px;
font-weight: 200;
}
.phone-one a{
display: block;
color: black;
float: right;
line-height: 58px;
}
.phone-one a:hover{
color: orangered;
}
.phone-two{
float: left;
}
.phone-three a img{
padding: 0 0 10px 9px;
float: right;
}
.phone{
overflow: hidden;
background-color: rgb(245,245,245);
width: 90%;
margin: 0 auto;
}
.phone-bottom{
margin-bottom: 9px;
}
/*----------------------------------------------家电-搭配--智能-----------------------------------------------------*/
.jiadian-top{
background-color: rgb(245,245,245);
overflow: hidden;
}
.jiadian-top h2{
float: left;
line-height: 58px;
font-size: 22px;
font-weight: 200;
}
.jiadian-top a{
/*display: block;*/
color: black;
float: right;
line-height: 58px;
}
.jiadian-top a:hover{
color: orange;
text-decoration: underline;
}
.jiadian{
overflow: hidden;
background-color: rgb(245,245,245);
width: 90%;
margin: 0 auto;
}
.jiadian-left{
float: left;
}
.jiadian-left a img{
margin-bottom: 9px;
}
.jiadian-right a img{
float: right;
margin: 0 0 9px 9px;
}
.much{
float: right;
margin: 0 0 9px 9px;
}
.jiadian-buttom{
margin-bottom: 9px;
}
/*--------------------------------------------底部导航条----------------------------------------*/
.last-top{
overflow: hidden;
background-color: white;
width: 90%;
margin: 0 auto;
}
.last-top ul li {
float: left;
height: 80px;
line-height: 80px;
margin: 0 70px;
}
.last-top ul li a{
color: rgb(97,97,97);
}
.last-top ul li a:hover{
color: orange;
}
.last-center .dl dt{
margin: 40px 0 26px;
font-size: 14px;
}
.last-center .dl{
float: left;
width: 160px;
}
.last-center .dl dd{
font-size: 12px;
margin: 10px 0 0 0;
}
.last-center{
overflow: hidden;
width: 90%;
margin: 0 auto;
background-color: white;
margin-bottom: 45px;
}
.last-center .dl a dd{
color: rgb(97,97,97);
}
.last-center .dl a dd:hover{
color: orange;
}
/*--------------------------------------最底部----------------------------------------*/
.img{
float: left;
margin: 30px 13px 0 0;
}
.list{
margin: 30px 0 0 0 ;
float: left;
}
.p a{
font-size:11px ;
color: rgb(97,97,97);
}
.p a:hover{
color: orange;
}
.p1 a{
font-size:11px ;
color: rgb(97,97,97);
}
.p1 a:hover{
color: orange;
}
.p2 a{
font-size:11px ;
color: rgb(176,176,176);
}
.p2 a:hover{
color: orange;
}
.p2 span{
font-size:11px ;
color: rgb(176,176,176);
}
.last-last{
overflow: hidden;
/*background-color: deepskyblue;*/
width: 90%;
margin: 0 auto;
}2、HTML代码
<!--/*----------------------------------------1---------------------------------------------------------------*/-->
<div class="tp">
<img src="img/tp.png"/>
</div>
<!--/*----------------------------------------2---------------------------------------------------------------*/-->
<div class="top-boss">
<div class="all">
<div class="left">
<ul class="ul">
<li><a href="">小米商城</a></li>
<li><a href="">MIUI</a></li>
<li><a href="">loT</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="">下载app</a></li>
<li><a href="">智能生活</a></li>
</ul>
</div>
<div class="shopping">
<a href="" >购物车</a>
</div>
<div class="right">
<a href="">登录</a>
<a href="">注册</a>
<a href="">消息通知</a>
</div>
</div>
</div>
<!--/*--------------------------------------------3-----------------------------------------------------------*/-->
<div class="top-boss-2">
<div class="all2">
<div class="img">
<a href=""><img src="img/logo-footer.png"/></a>
</div>
<div class="second-ul">
<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 class="ss">
<a href=""><img src="img/ss.png" style="display: block;"/></a>
</div>
<div class="input">
<form action="" method="post">
<input type="text" size="1"/>
</form>
</div>
</div>
</div>
<!--/*------------------------------------------4-------------------------------------------------------------*/-->
<div >
<div class="center-boss">
<div class="center-img">
<img src="img/cen.png"/>
</div>
<div class="left0">
<ul>
<li><a href=""><span class="li"> 手机 电话卡</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 电视 盒子</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 笔记本 平板</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 家电 插线板</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 出行 穿戴</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 智能 路由器</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 电源 配件</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 健康 儿童</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 耳机 音响</span><span id="litwo"> ></span></a></li>
<li><a href=""><span class="li"> 生活 箱包</span><span id="litwo"> ></span></a></li>
</ul>
</div>
</div>
</div>
<!--/*----------------------------------------------5---------------------------------------------------------*/-->
<div >
<div id="a">
<div class="center-two-one">
<ul>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340"/></a></li>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340"/></a></li>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340"/></a></li>
</ul>
</div>
<div class="center-two"">
<ul>
<div >
<li><a href="" id="lia"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"/></a></li>
<li><a href=""style=" color: rgb(207,204,202);;"id="lia">企业团购</a></li>
</div>
<div>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"/></a></li>
<li><a href=""style="color: rgb(207,204,202);">小米秒杀</a></li>
</div>
<div>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"/></a></li>
<li><a href=""style="color: rgb(207,204,202);">F码通道</a></li>
</div>
<div>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"/></a></li>
<li><a href=""style="color: rgb(207,204,202);">米粉卡</a></li>
</div>
<div>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"/></a></li>
<li><a href=""style="color: rgb(207,204,202);">以旧换新</a></li>
</div>
<div>
<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"/></a></li>
<li><a href=""style="color: rgb(207,204,202);">话费充值</a></li>
</div>
</ul>
</div>
</div>
</div>
<!--/*----------------------------------------------小米闪购--------------------------------------------------------*/-->
<div style="background-color: rgb(245,245,245);">
<div class="sangou">
<div class="zifu">
<h2>小米闪购</h2>
<a href="">< ></a>
</div>
<div class="sangou-one">
<img src="img/5.png"/>
</div>
<div class="sangou-two">
<ul>
<li><a href=""><img src="img/1.png"/></a></li>
<li><a href=""><img src="img/2.png"/></a></li>
<li><a href=""><img src="img/3.png"/></a></li>
<li><a href=""><img src="img/4.png"/></a></li>
</ul>
</div>
<div id="q">
<a href=""><img src="img/1.1.png"/></a>
</div>
</div>
</div>
<!--/*----------------------------------------------手机--------------------------------------------------------*/-->
<div style="background-color: rgb(245,245,245);" >
<div class="phone">
<div class="phone-one">
<h2>手机</h2>
<a href="">查看全部</a>
</div>
<div class="phone-two">
<a href=""><img src="img/phone-left.png"/></a>
</div>
<div class="phone-three">
<a href=""><img src="img/phone1.png"/></a>
<a href=""><img src="img/phone1.png"/></a>
<a href=""><img src="img/phone1.png"/></a>
<a href=""><img src="img/phone1.png"/></a>
<a href=""><img src="img/phone1.png"/></a>
<a href=""><img src="img/phone1.png"/></a>
<a href=""><img src="img/phone1.png"/></a>
<a href=""><img src="img/phone1.png"/></a>
</div>
<div class="phone-bottom">
<a href=""><img src="img/phont-bottom.png"/></a>
</div>
</div>
</div>
<!--/*----------------------------------------------家电--------------------------------------------------------*/-->
<div style="background-color: rgb(245,245,245);">
<div class="jiadian">
<div class="jiadian-top">
<h2>家电</h2>
<a href="">热门影音</a>
<a href="" style="margin: 0 20px 0 0 ;">家电</a>
</div>
<div class="jiadian-left" style="width: 235px;">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c4de5f15f6dc9946e5d0827fd96d71.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e03c0fe4af4d613603f22aaa8e0ea00.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
</div>
<div class="jiadian-right">
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<div class="much" style="width: 235px;">
<a href=""><img src="img/jia.png"/></a>
<a href=""><img src="img/much.png"/></a>
</div>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
</div>
<div class="jiadian-buttom">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a>
</div>
</div>
</div>
<!--/*----------------------------------------------智能--------------------------------------------------------*/-->
<div style="background-color: rgb(245,245,245);">
<div class="jiadian">
<div class="jiadian-top">
<h2>智能</h2>
<a href="">安防</a>
<a href="" style="margin: 0 20px 0 0;">出行</a>
<a href="" style="margin: 0 20px 0 0 ;">热门</a>
</div>
<div class="jiadian-left" style="width: 235px;">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
</div>
<div class="jiadian-right">
<a href=""><img src="img/zhi.png"/></a>
<a href=""><img src="img/zhi.png"/></a>
<a href=""><img src="img/zhi.png"/></a>
<a href=""><img src="img/zhi.png"/></a>
<div class="much" style="width: 235px;">
<a href=""><img src="img/zhin.png"/></a>
<a href=""><img src="img/much.png"/></a>
</div>
<a href=""><img src="img/zhi.png"/></a>
<a href=""><img src="img/zhi.png"/></a>
<a href=""><img src="img/zhi.png"/></a>
</div>
<div class="jiadian-buttom">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45207e414f661234bfc3909d11ad2bab.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a>
</div>
</div>
</div>
<!--/*----------------------------------------------搭配--------------------------------------------------------*/-->
<div style="background-color: rgb(245,245,245);">
<div class="jiadian">
<div class="jiadian-top">
<h2>搭配</h2>
<a href="">耳机音箱</a>
<a href="" style="margin: 0 20px 0 0 ;">热门</a>
</div>
<div class="jiadian-left" style="width: 235px;">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a00bdd568dbc2b02f8fe0fa8d1b46f28.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6874615b3c50e837ffe532eb6ea4ef1a.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
</div>
<div class="jiadian-right">
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<div class="much" style="width: 235px;">
<a href=""><img src="img/jia.png"/></a>
<a href=""><img src="img/much.png"/></a>
</div>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
<a href=""><img src="img/jiadian.png"/></a>
</div>
<div class="jiadian-buttom">
<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1615d1842fe85914a545297836a44271.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a>
</div>
</div>
</div>
<!-----------------------------------------------------------底部导航条----------------------------------------->
<div >
<div class="last">
<div class="last-top">
<ul>
<li><a href="">预约维修服务</a></li>
<li><a href="">7天无理由退货</a></li>
<li><a href="">15天免费换新</a></li>
<li><a href="">满99包邮</a></li>
<li><a href="">520余家售后网点</a></li>
</ul>
</div>
<hr />
<div class="last-center">
<dl class="dl">
<dt>帮助中心</dt>
<a href=""><dd>账户管理</dd></a>
<a href=""><dd>购物指南</dd></a>
<a href=""><dd>订单操作</dd></a>
</dl >
<dl class="dl">
<dt>服务支持</dt>
<a href=""><dd>售后政策</dd></a>
<a href=""><dd>自动服务</dd></a>
<a href=""><dd>相关下载</dd></a>
</dl>
<dl class="dl">
<dt>线下门店</dt>
<a href=""><dd>小米之家</dd></a>
<a href=""><dd>服务网点</dd></a>
<a href=""><dd>授权体验店</dd></a>
</dl>
<dl class="dl">
<dt>关于小米</dt>
<a href=""><dd>加入小米</dd></a>
<a href=""><dd>了解小米</dd></a>
<a href=""><dd>投资者关系</dd></a>
<a href=""><dd>企业社会责任</dd></a>
<a href=""><dd>廉洁举报</dd></a>
</dl>
<dl class="dl">
<dt>关注我们</dt>
<a href=""><dd>新浪微博</dd></a>
<a href=""><dd>官方微信</dd></a>
<a href=""><dd>联系我们</dd></a>
<a href=""><dd>公益基金会</dd></a>
</dl>
<dl class="dl">
<dt>特色服务</dt>
<a href=""><dd>F码通道</dd></a>
<a href=""><dd>礼物码</dd></a>
<a href=""><dd>防伪查询</dd></a>
</dl>
</div>
</div>
</div>
<!---------------------------------------------------最底部---------------------------------------------------------------------------->
<div style="background-color: rgb(245,245,245); ">
<div class="last-last">
<div class="img">
<img src="img/logo-footer.png"/>
</div>
<div class="list">
<p class="p">
<a href="">小米商城</a>
<a href="">MIUI</a>
<a href="">米家</a>
<a href="">米聊</a>
<a href="">多看</a>
<a href="">游戏</a>
<a href="">政企服务</a>
<a href="">小米天猫店</a>
<a href="">小米集团隐私政策</a>
<a href="">小米公司儿童信息保护规则</a>
<a href="">小米商城隐私政策</a>
<a href="">小米商城用户协议</a>
<a href="">问题反馈</a>
</p>
<p class="p1">
<a href="">北京互联网法院法律服务工作站</a>
<a href="">中国消费者协会</a>
<a href="">北京市消费者协会</a>
</p>
<p class="p2">
<a href="">Mi.com</a>
<span>京ICP证110507号</span>
<a href="">京icp备10046444号</a>
<a href="">京公网安备11010802020134号</a>
<a href="">京网文[2020]0276-042号</a>
<br />
<a href="">（京）网械平台备字（2018）第00005号</a>
<a href="">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
<a href="">营业执照</a>
<a href="">医疗器械质量公告</a>
<br />
<a href="">增值电信业务许可证</a>
<a href=""> 网络食品经营备案 京食药网食备202010048 </a>
<a href="">食品经营许可证</a>
<br />
<span>违法和不良信息举报电话：171-5104-4404</span>
<a href="">知识产权侵权投诉</a>
<a href="">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
</p>
</div>
</div>
</div>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/197395.html原文链接：https://javaforall.cn