html+css页面练习3

news/2024/11/23 23:35:04/

今天整了一天，有点难啊，刚发现列表还有dl dt dd标签，也不知区别在哪里``，今日份代码记录一下，明天还要修改，其中有个错误，哪位大大能帮我看看最好了
2019/4/9补上全部代码。。还是有些问题

话说这个编辑器好难用啊！，图片上传出来顺序都不对，无语，效果图排序是1、3、2。

<!DOCTYPE html><html lang="en">
<head><title>极米商店</title><style type="text/css">
body{
margin:0;
padding:0;
}
.top{
margin:0 auto;
background-color:black;
color:white;
width:1200px;
height:60px;}
.top-left{
width:140px;
/*height: 60px;*/
height:38px;
padding:22px 0px 0px 34px;
/*background-color:pink;*/
float:left;
}
.center{
width:876px;
height:60px;
float:left;
margin:0;
padding:0;
}
.center li{
height:60px;
margin-right:40px;
margin-left:0;
list-style:none;
float:left;
line-height:60px;
}
.center li a{
text-decoration:none;
color:white;
}
.center li a:hover{
color:yellow;
}
.top-right{
height:40px;
width:120px;
float:left;
padding-top:20px;
}
.top-right img{
margin-right:20px;
}
.banner{
width:1200px;
height:450px;
margin:0 auto;
}
.zhongjian{
margin:0 auto;
width:1200px;
height:1000px;
background: #efefef;
float:left;
margin-left:112px;
}
.zhongjian-top{
width:1200px;
height:160px;
background-color:white;
}
.zhongjian-top dl{
width:199px;
height:140px;
border-right: 1px solid #dedede;
float:left;
text-align:center;
padding-top:20px;
margin:0;/*如果不加的话，右边框线会出来，不知道为什么*/
background-color:yellow;
}
.zhongjian-top dl dt img{
margin-bottom:20px;
}
.service_list{
width:1200px;
height:452px;
}
.service_list li{
width:365px;
height:216px;
margin:0px 22px 20px 0px;
float:left;
list-style:none;
background: #8f8f8f;
text-align: center;
}
.service_list li img{
margin:40px 0px 10px 0px;
}
.service_list li a{
text-decoration:none;
color:white;
}
.service_list li:hover{background: orange ;
}
.foot{
width:1200px;
height:400px;
background: pink;
float:left;
margin-left:112px;
padding:0;
}
.foot-top{
width:1200px;
height:128px;
background-color:white;
}
.jiage{
width:206px;
height:33px;
margin:56px 60px 56px 30px;
float:left;
}
.foot-center{
width:1200px;
height:184px;
background-color:white;
border-top:1px solid #dedede;
border-bottom:1px solid #dedede;
}
.foot-center-left{
width:910px;
height:186px;
float:left;
margin-top:-17px;}
.foot-center-left ul{
width:75px;
height:125px;
float:left;
margin:30px 120px 50px 40px;
}
.foot-center-left ul li{
list-style:none;}
.foot-center-left ul li a{
text-decoration:none;
color:black;
}
.foot-center-right{
width:288px;
height:186px;
border-left:1px solid #dedede;
float:left;
text-align:center;}
.foot-bottom{
width:1200px;
height:89px;
background-color:white;
padding-top:17px;
}
.foot-bottom-left{
width:850px;
height:60px;}
.foot-bottom-left li{
width:100px;
height:22px;
list-style:none;
float:left;
margin-left:0px;
border-right:1px solid #dedede;
text-align:center;
}
.foot-bottom-left li a{
text-decoration:none;
color:black;
font-size:12px;
}
.foot-bottom-left .mini{
width:60px;
height:22px;
list-style:none;
float:left;
}
.pic{
float:right;
margin-top:-60px;
padding-right:60px;
}
.zi{
font-size:12px;
color:gray;
float:left;
margin-top:-40px;
margin-left:48px;
}
</style> </head><body><!----------header------------------------------>
<div class="top">
<div class="top-left">
<img src="images/logo_03.png">
</div>
<ul class="center">
<li><a href="#">在线商店</a></li>
<li><a href="#">H1</a></li>
<li><a href="#">Z4极光</a></li>
<li><a href="#">Z4X</a></li>
<li><a href="#">Z4air</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 class="top-right">
<img src="images/s6_10.png" />
<img src="images/h_right_12.png" />
</div>
</div>
<!--banner图-->
<div class="banner">
<img src="images/s6_02.png" />
</div>
<!--中间部分-->
<div class="zhongjian">
<h1>常见问题</h1>
<div class="zhongjian-top">
<dl>
<dt><img src="images/l1_12.png" /></dt>
<dd>支付问题</dd>
</dl>
<dl>
<dt><img src="images/l1_12.png" /></dt>
<dd>支付问题</dd>
</dl>
<dl>
<dt><img src="images/l1_12.png" /></dt>
<dd>支付问题</dd>
</dl>
<dl>
<dt><img src="images/l1_12.png" /></dt>
<dd>支付问题</dd>
</dl>
<dl>
<dt><img src="images/l1_12.png" /></dt>
<dd>支付问题</dd>
</dl>
<dl>
<dt><img src="images/l1_12.png" /></dt>
<dd>支付问题</dd>
</dl>
<h1>自助服务</h1>
<ul class="service_list">
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
<li>
<a href="###"><img src="images/p1_05.png" alt=""> <p>在线客服</p></a></li>
</ul>
</div>
</div>
<!--foot-->
<div class="foot">
<!--foot-top-->
<div class="foot-top">
<div class="jiage">
<img src="images/liwu_17.png" />
满59元包邮（幕布除外)
</div>
<div class="jiage">
<img src="images/liwu_17.png" />
满59元包邮（幕布除外)
</div>
<div class="jiage">
<img src="images/liwu_17.png" />
满59元包邮（幕布除外)
</div>
<div class="jiage">
<img src="images/liwu_17.png" />
满59元包邮（幕布除外)
</div>
</div>
<!--foot-center-->
<div class="foot-center">
<div class="foot-center-left">
<ul>
<li><a href="#"><strong> 关于极米</strong></a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
</ul>
<ul>
<li><a href="#"><strong>关于极米</strong></a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
</ul>
<ul>
<li><a href="#"><strong>关于极米</strong></a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
</ul>
</div>
<div class="foot-center-right">
<h2>400-9628-978</h2>
<p>每日9点到23点收取话费</p>
<img src="images/line_server_28.png" />
</div>
</div>
<div class="foot-bottom">
<ul class="foot-bottom-left">
<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 class="mini"><a href="#">极米天猫</a></li>
<li class="mini"><a href="#">极米天猫</a></li>
<li class="mini"><a href="#">极米天猫</a></li>
<li class="mini"><a href="#">English</a></li>
</ul>
<div class="zi">@2016 XGIMI.ALLRIGHTJWIOHOS</div>
</div>
<div class="pic">
<img src="images/logo_last_35.png" />
</div>
</div>
</div>

效果如图：
在这里插入图片描述在这里插入图片描述在这里插入图片描述


http://www.ppmy.cn/news/695143.html

相关文章

达龙云电脑体验

达龙云电脑体验

前言(所谓前言就是些没用的废话&#xff0c;想看主要内容的可直接跳过)&#xff1a; 本人不才&#xff0c;半吊子程序员&#xff0c;平时靠接点定制软件混口饭吃&#xff0c;但是我又不喜欢整天闷在家里&#xff0c;所以才喜欢折腾一些移动设备。曾经买过一台x86构架的平板(me4…
阅读更多...
AUTOSAR从入门到精通-【应用篇】基于 AUTOSAR 规范的 E2E 通信安全研究

AUTOSAR从入门到精通-【应用篇】基于 AUTOSAR 规范的 E2E 通信安全研究

目录 前言 国内外研究现状 2 AUTOSAR 架构分析 2.1 AUTOSAR 软件架构 2.1.1 应用程序软件组件层
阅读更多...
2023-6-29-第十一式代理模式

2023-6-29-第十一式代理模式

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f4a5;&#x1f4a5;&#x1f4a5;欢迎来到&#x1f91e;汤姆&#x1f91e;的csdn博文&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f49f;&#x1f49f;喜欢的朋友可以关注一下&#xf…
阅读更多...
国外邮箱安全性排名，国外邮箱哪个安全好用？

国外邮箱安全性排名，国外邮箱哪个安全好用？

邮箱安全的重要性无庸赘述&#xff0c;这也恰恰是大家注册邮箱主要考虑的。国外邮箱哪个安全好用&#xff1f;个人邮箱哪个好用和安全&#xff1f;经过测试对比后选择了TOM VIP邮箱&#xff0c;这款个人邮箱安全性高&#xff0c;功能性强。 国外邮箱哪个安全好用&#xff1f;整…
阅读更多...
好用的电子邮箱测评，这么多的邮箱究竟哪个最好用呢？

好用的电子邮箱测评，这么多的邮箱究竟哪个最好用呢？

在日常办公中&#xff0c;商务邮箱承载着对外沟通的重要作用。主流的电子邮箱品牌偏多&#xff0c;究竟哪个邮箱品牌更好用呢&#xff1f;本期小编为大家测评163.net邮箱&#xff0c;一起来看看吧~ 首先是邮箱稳定性的测评 通过反复的快速的点击&#xff0c;测试页面的反应速…
阅读更多...
哪个邮箱好用又安全？最安全的邮箱排名是？

哪个邮箱好用又安全？最安全的邮箱排名是？

常用的电子邮箱有网易、QQ、tom vip邮箱等&#xff0c;考虑安全性注册了TOMVIP邮箱。其中有个有趣的功能很实用&#xff0c;及时关注邮箱的安全状况&#xff0c;保障邮箱稳定安全。 登录VIP邮箱后&#xff0c;找到VIP邮箱点击右上角【设置】 进入个人中心&#xff0c;点击【…
阅读更多...
工作用哪个邮箱好用？好用的办公邮箱让你放假无烦恼

工作用哪个邮箱好用？好用的办公邮箱让你放假无烦恼

小伙伴们&#xff0c;已经初五了&#xff0c;这个春节&#xff0c;你有没有被“办公不便”的甜蜜困惑所打扰呢&#xff1f;如果你有这样的困惑&#xff0c;下面以TOMVIP邮箱为例&#xff0c;来了解一下高效办公的小技巧吧&#xff0c;不错过每一个重要邮件&#xff0c;更高质量…
阅读更多...
怎么申请好用的邮箱，电子邮箱品牌评测，哪个更好用呢？

怎么申请好用的邮箱，电子邮箱品牌评测，哪个更好用呢？

作为一名称职的打工人&#xff0c;拥有一个顺手的邮箱非常关键&#xff0c;与客户商务洽谈也会顺利很多&#xff0c;电子邮箱品牌说少不少&#xff0c;怎么选到个好用的呢&#xff0c;一起来看看吧~ 先来个邮箱稳定性的测试 小编选了几个品牌&#xff0c;通过反复的收发信测试…
阅读更多...
最新文章

Copyright @ 2022~2023