html+css页面练习3

最新推荐文章于 2023-09-23 17:10:08 发布
最新推荐文章于 2023-09-23 17:10:08 发布
阅读量790 收藏 1
点赞数
分类专栏： html+css 文章标签： html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoukeguai/article/details/89097305
版权

今天整了一天，有点难啊，刚发现列表还有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>

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

zhoukeguai
关注
专栏目录
HTML网页设计学习练习
01-12
这是一个网页开发的练习，对于初学者熟练掌握html技术，以及window对象的各种属性，方法的练习具有很好的讲解，里面使用了javascript css网页布局等技术，使用了类选择器，id选择器 属性选择器等内容，js的响应等事件
css网页布局小练习，文字案例，小米官网卡片案例
m0_51045721的博客
02-18 1556
1、网页排版 目标效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML网页小练习
qq_44376244的博客
06-01 461
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为
HTML简易网页练习
zhangmingxian1的博客
10-28 1429
例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)例如：b i u sub sup span(没有任何默认样式的行内元素)定义：在默认情况下，可以和其他行内元素在一行显示。3、在p标签中，不能嵌套其他的块级元素。定义：在默认情况下，独占一行的元素。4、p标签常用于页面中的纯文本。分割线可以用标签2、文字的尺寸依次减小。
HTML+CSS 静态页面练习
smilingSML的博客
09-23 103
效果图是以下，没有用图标引入，做的潦草了一点，重复代码也有很多，暂时没达到节约代码的水平。
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
最新发布
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
HTML + CSS + 练习静态页面 + 实现豆瓣首页
06-30
在这个“HTML + CSS + 练习静态页面 + 实现豆瓣首页”的项目中，我们将深入理解这两门技术，并通过实践来提升技能。 HTML是网页内容的标记语言，用于定义网页的元素结构。例如，`<html>`标签表示整个文档，`<head>`...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
这个“Web入门初学者纯静态页面练习”是针对那些刚刚接触Web前端开发的学习者设计的，旨在帮助他们掌握HTML和CSS的基本概念以及布局与浮动的设计技巧。 HTML是网页内容的结构语言，它定义了网页的各个元素，如标题...
html5+css3练习.zip
05-28
在这个“html5+css3练习.zip”压缩包中，包含了用于新手学习的实例，特别是针对那些对HTML5和CSS3还不太熟悉的人。 首先，HTML5（超文本标记语言第五版）是网页内容的结构化语言，它增强了网页的语义性，引入了许多...
HTML5+CSS3网页设计模板(30例)zip
03-15
HTML5和CSS3是现代网页设计的两大核心技术，它们为创建功能丰富、视觉吸引人的网页提供了强大的工具。这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板，适合初学者和专业设计师用于学习和...
Html页面嵌套页面练习
05-19
好看的Html页面优化,实现网页之间的衔接,主页、注册、登陆,进入网页自动播放音乐,主页右上角是视频,左下角是页面切换的按钮
html 第八章
08-10
学习指导：活动页的局部布局
第八章课堂练习-上机练习4.rar
10-13
定位浮动
照片墙css3
08-30
照片墙源码，可实现照片随机摆放，选中后摆正放大
html小小练习，纯简单页面，主要用来熟悉html
weixin_52099241的博客
07-13 333
一个不知名自编的表单界面 用到了table input等简单属性 效果是这样的 下面为代码部分 我的图片路径是自己的 用到的图片我就放在这里了 如果想随便练练，可以拿图或者用自己随便找的图 水印不知道咋去…凑合用吧 在结尾这里使用了一个不对的属性就是align和border，大家一定要注意web语言标准化的问题，html，css，js等代码各司其职，我这样写只是为了展示界面效果，毕竟用纯html代码写页面有很多位置会卡不好，会使得页面难看......
HTML作业（一）
ll_j_21的博客
10-16 6008
一、 在这里插入代码片
html练习
Wonder
05-12 414
做出来的效果： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 align="center"><font colo...
HTML5+CSS3企业网站实战教程
"html5 + css3企业网站" 在构建基于HTML5和CSS3的企业网站时，我们可以看到这个PPT课程的主要目标是教会学员如何创建一个界面美观、风格统一、结构完整且内容丰富的静态商业网站。课程由高小梅在2018年07月24日讲解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值