HTML+CSS网页制作——99银号
2024-06-08 11:05:54
实现的效果图
HTML框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>九九银号</title>
<link href="css/style.css" rel="stylesheet" />
</head><body>
<!--头部-->
<div class=" top">
<div class=" top1"><img src="data:images/logo.png" /></div>
<div class=" top2">
<div class=" top2-1"><img src="data:images/tel.png" /><p>全国统一服务热线:<a href="#">0743-3228170</a></p></div>
<div class=" top2-2"><img src="data:images/kefu.png" /><p>客服咨询QQ：<a href="#">215841034</a></p></div></div></div>
<!--导航部分-->
<div class="nav">
<ul>
<li><a href="#">99银号官网</a></li>
<li><a href="#">99银</a></li>
<li><a href="#">925银</a></li>
<li><a href="#">苗寨老银</a></li>
<li><a href="#">银饰配饰</a></li>
<li><a href="#">凤凰特产</a></li>
<li><a href="#">关于99银号</a></li>
<li><a href="#">联系99银号</a></li></ul>
</div>
<div class="banner"></div>
</div><!--中部-->
<div class="m"><!--中部第一个盒子-->
<div class="m1">
<!--中部第一个盒子左边-->
<div class="m1-left">
<div class="m1-left-1"><a>产品导航</a></div>
<div class="m1-left-2">
<div class="m1-left-2-1">
<p><span> ></span>99银饰品</p>
<ul><li ><span>></span><a href="#">99银长命锁</a></li><li ><span>></span><a href="#">99银手镯</a></li><li ><span>></span><a href="#">99银耳环</a></li><li ><span>></span><a href="#">99银吊坠</a></li><li ><span>></span><a href="#">99银项链</a></li><li ><span>></span><a href="#">99银戒指</a></li><li ><span>></span><a href="#">99银耳坠</a></li>
</ul></div>
<div class="m1-left-2-1"><p><span>></span>925银饰品</p><ul> <li ><span>></span><a href="#">925银长命锁</a></li><li ><span>></span><a href="#">925银手镯</a></li><li ><span>></span><a href="#">925银耳环</a></li><li ><span>></span><a href="#">925银吊坠</a></li><li ><span>></span><a href="#">925银耳坠</a></li><li ><span>></span><a href="#">925银项链</a></li><li ><span>></span><a href="#">925银戒指</a></li></ul></div><div class="m1-left-2-1"> <p><span>></span>苗寨老银</p> <ul> <li ><span>></span><a href="#">苗寨老银手镯</a></li><li ><span>></span><a href="#">苗寨老银耳环</a></li><li ><span>></span><a href="#">苗寨老银工艺品</a></li></ul> </div><div class="m1-left-2-1"><p><span>></span>银饰配饰</p> </div><div class="m1-left-2-1" ><p><span>></span>凤凰特产</p></div></div></div><!--中部第一个盒子右边-->
<div class="m1-right">
<div class="m1-right-1">
<div class="m1-right-1-1"><a>掌柜推荐</a></div>
<div class="m1-right-1-2"><img src="data:images/more.png" /></div>
</div>
<div class="m1-right-2"><ul><li><img src="data:images/p1.png"></li><li><img src="data:images/p2.png"></li><li><img src="data:images/p3.png"></li><li><img src="data:images/p4.png"></li><li><img src="data:images/p5.png"></li><li><img src="data:images/p6.png"></li><li><img src="data:images/p7.png"></li><li><img src="data:images/p8.png"></li><li><img src="data:images/p9.png"></li></ul></div></div></div>
<!--中部第二个盒子-->
<div class="m2">
<div class="m2-1">
<div class=" m2-1-1"><a>99银</a></div>
</div>
<div class="m2-2">
<ul>
<li><img src="data:images/c1.png" /></li>
<li><img src="data:images/c2.png" /></li>
<li><img src="data:images/c3.png" /></li>
<li><img src="data:images/c4.png" /></li></ul>
</div>
</div>
<div class="m2">
<div class="m2-1">
<div class=" m2-1-1"><a>925银</a></div>
</div>
<div class="m2-2">
<ul>
<li><img src="data:images/d1.png" /></li>
<li><img src="data:images/d2.png" /></li>
<li><img src="data:images/d3.png" /></li>
<li><img src="data:images/d4.png" /></li></ul>
</div>
</div>
<div class="m2">
<div class="m2-1">
<div class=" m2-1-1"><a>苗寨老银</a></div>
</div>
<div class="m2-2">
<ul>
<li><img src="data:images/e1.png" /></li>
<li><img src="data:images/e2.png" /></li>
<li><img src="data:images/e3.png" /></li>
<li><img src="data:images/e4.png" /></li></ul>
</div>
</div><!--中部第五个盒子--><div class="m5">
<!--中部第五行左列-->
<div class="m5-1">
<div class="m5-1-1">
<div class="m5-1-1-left"><a>关于99银号</a></div>
<div class="m5-1-1-right"><img src="data:images/more.png" /></div>
</div>
<div class="m5-1-2">
<div class="m5-1-2-left"><img src="data:images/f1.png" /></div>
<div class="m5-1-2-right"><img src="data:images/f2.png" /></div>
</div><div class="m5-1-3">
<p>九九银号位于"国家历史文化名城"—湖南省湘西土家族苗族州凤凰县沱江镇，
依托沱江的山清水秀，九九银号以"传承苗族传统纯手工工艺，发扬苗族文化特
色，锤打苗族文化"为宗旨，其银饰产品以苗族传统的手工工艺为依托，并结合现代
工艺，用专业的苗族银饰锻制技艺，打造风格迥异、适合不同人群需要的个性化九九银饰产品。
其每一件银饰饰品都展示着个性、时尚、自我的天堂，同时纯银的又具有保值作用，加上精湛的工艺，值得您的珍藏。 <a href="#">[详情]</a></p></div></div>
<div class="m5-2">
<div class="m5-2-1">
<div class="m5-2-1-left"><a>银饰文化</a></div>
<div class="m5-2-1-right"><img src="data:images/more.png" /></div>
</div>
<div class="m5-2-2">
<ul>
<li><span>></span><a href="#">苗族银饰与它的姐妹艺术...</a></li>
<li><span>></span><a href="#" >银饰文化的艺术...</a></li>
<li><span>></span><a href="#">苗族银饰的工艺...</a></li>
<li><span>></span><a href="#" >常见银饰小贴士...</a></li>
<li><span>></span><a href="#" >苗族银饰的含义...</a></li>
<li><span>></span><a href="#" >苗族银饰的象征_民族饰品...</a></li>
<li><span>></span><a href="#" >苗族银饰文化节...</a></li>
<li><span>></span><a href="#" >苗族银饰文化-白银饰品...</a></li>
<li><span>></span><a href="#">"中国银都"解读银饰文化...</a></li>
<li><span>></span><a href="#">中国银饰文化文化大观_银饰文化...</a></li>
</ul>
</div>
</div>
</div>
<!--中部第六个盒子-->
<div class="m6">
<div class="m6-1">
<div class="m6-1-1">
<div class="m6-1-1-left"><a>苗族文化</a></div>
<div class="m6-1-1-right"><img src="data:images/more.png" /></div>
</div><div class="m6-1-2"><ul>
<li><span>></span><a href="#">苗族其他类型的银饰文化...</a></li>
<li><span>></span><a href="#">苗族银饰头饰分类...</a></li>
<li><span>></span><a href="#">苗族银饰具有一种展示性，注重与服饰的搭配...</a></li>
<li><span>></span><a href="#">苗族银饰中可以透视出苗族的平等观念...</a></li>
<li><span>></span><a href="#">苗族银饰中独特的迁徙文化...</a></li>
<li><span>></span><a href="#">苗族银饰的特征...</a></li>
<li><span>></span><a href="#">苗族银饰中的龙的形状...</a></li>
</ul>
</div></div><div class="m6-2">
<div class="m6-2-1">
<div class=" m6-2-1-left"><a>常见问题</a></div>
<div class="m6-2-1-right"><img src="data:images/more.png" /></div></div>
<div class="m6-2-2">
<ul>
<li><span>></span><a href="#">苗族其他类型的银饰文化...</a></li>
<li><span>></span><a href="#">苗族银饰头饰分类...</a></li>
<li><span>></span><a href="#">苗族银饰具有一种展示性，注重与服饰的搭配...</a></li>
<li><span>></span><a href="#">苗族银饰中可以透视出苗族的平等观念...</a></li>
<li><span>></span><a href="#">苗族银饰中独特的迁徙文化...</a></li>
<li><span>></span><a href="#">苗族银饰的特征...</a></li>
<li><span>></span><a href="#">苗族银饰中的龙的形状...</a></li>
</ul>
</div>
</div></div></div>
<!--底部-->
<div class=" foot">
<div class="f1"><p>友情链接: dedecms模板 |</p></div>
<div class="f2"><p>实体店地址：湖南凤凰县沱江镇史家弄21号 全国统一销售服务热线：0743-3228170
版权所有：九九银號</p></div></div></body>
</html>
CSS样式表
/* CSS Document */*{ margin:0; padding:0;}
img{ border:none;}
ul,ol,li{ list-style:none;}
div{ margin: 0 auto; font-family: "宋体"; font-size:14px; text-align:center; display:block; margin:0 auto;}
a{ text-decoration:none;}
a:link{ text-decoration:none;}
a:visited{ text-decoration:none;}
a:hover{ text-decoration:none;}
a:active{ text-decoration:none;}
body{ width:1300px; height: auto; background: url(../images/background.png) top center repeat}
/*头部*/
.top{width:1300px; height:85px; margin-top:15px; margin-bottom:10px}.top1{width:495px; height:85px; float:left; margin-left:158px;}
.top1 img{width:495px; height:85px;}
.top2{ width:260px; height:58px; margin-top:22px; line-height:26px; float:right}
.top2-1{width:260px; height:26px; margin-bottom:4px}
.top2-1 img{width:24px; height:26px; float:left}
.top2-1 p{ text-align:left;}
.top2-2 {width:260px; height:26px;}.top2-2 img{width:24px; height:26px; float:left}
.top2-2 p{ text-align:left }
/*导航部分*/
.nav{width:1300px; height:50px; background:#303A48;}
.nav ul{ width:960px; height:50px; margin:0 auto}
.nav ul li{width:120px; height:50px; float:left}
.nav ul li a{width:120px; height:50px; font-size:16px; color:#FFFFFF; line-height:50px;}
.nav ul li a:hover{ display:block; color:#CCCCFF}
.banner{width:967px; height:304px; background:url(../images/banner.png) 0 0 no-repeat; margin-bottom:10px;}
/*中部*/
.m{width:967px; height:2787px;}
/*中部第一个盒子 */
.m1{width:967px; height:900px;}
/*中部第一个左边盒子1*/
.m1-left{ width:223px; height: auto;float:left; background:#FFFFFF}
.m1-left-1{width:223px; height:44px; background:#303A48; text-align:left; text-indent:14px}
.m1-left-1 a{ color: #FFFFFF; font-size:18px; line-height:44px; font-weight:bold;font-family:"微软雅黑";}
.m1-left-2 {width:223px; height:774px;}
.m1-left-2-1 {width:223px; height: auto;}
.m1-left-2-1 p{ border-bottom:1px dashed #CCC; color: #666666; height:30px; line-height:30px; text-align:left; margin-left:5px;}
.m1-left-2-1 span{ margin-right:8px; font-size:8px}
.m1-left-2-1 ul {width:180px; height:auto;margin:0 auto}
.m1-left-2-1 ul li{width:160px; height:30px; border-bottom:#CCC dashed 1px; margin:0 auto;text-align:left ; }
.m1-left-2-1 ul li a{ line-height:30px; color:#999;width:100px; height:30px; margin-left:5px; font-weight:bold; }/*中部第一个右边盒子1*/
.m1-right{width:730px; height:904px; float:right; background:#FFFFFF}
.m1-right-1{width:722px; height:45px; background: url(../images/zbbgcolor.png) top center repeat }
.m1-right-1-1{width:90px; height:45px; text-align: left ;line-height:45px; float:left; text-indent:14px;}
.m1-right-1-1 a{ font-size:16px; font-weight:bold; text-align:left;border-bottom:5px solid #000000 }
.m1-right-1-2{height:45px; width:40px; float:right;}
.m1-right-1-2 img{float: right; width:39px; height:12px; margin-top:14px ; }
.m1-right-2{width:722px; height:859px;}
.m1-right-2 ul{width:722px; height: auto; margin: 8px 3px}
.m1-right-2 ul li{width:240px; height:270px; float:left}
.m1-right-2 img{width:238px; height:264px; }
/*中部第二个盒子 */
.m2{ width:967px; height:354px; background:#FFFFFF; margin-top:10px; }
.m2-1{ width:967px; height:45px;background:url(../images/zbbgcolor.png) top center repeat; margin-bottom:10px}
.m2-1-1{width:90px; height:45px; float:left }
.m2-1-1 a{ font-family:"微软雅黑"; font-size:16px; font-weight:bold; line-height:45px; text-align:left; margin-left:8px ;
border-bottom:#000000 4px solid;}
.m2-2{width:967px; height:290px; margin-bottom:15px}
.m2 ul{width:956px; height:290px; float:left; margin:auto 5px}
.m2 ul li{width: 238px; height:277px; float:left}
/*中部第五个盒子 */.m5{ width:967px; height:430px;border:#ccc solid 1px; margin-top:20px;}
.m5-1{ width:530px; height:416px; float:left;}
.m5-1-1{width:530px; height:45px; background:url(../images/zbbgcolor.png) top center repeat}
.m5-1-1-left{width:120px; height:45px; text-align: left ;line-height:45px; float:left; text-indent:14px;}
.m5-1-1-left a{ font-size:16px; font-weight:bold; text-align:left;border-bottom:5px solid #000000 }
.m5-1-1-right{height:45px; width:40px; float:right;}
.m5-1-1-right img{float: right; width:39px; height:12px; margin-top:15px }.m5-1-2{ width:530px; height:200px; background:#FFFFFF}.m5-1-2-left{ width:237px; height:199px; float:left; margin-left:10px; margin-right:10px}
.m5-1-2-right{ width:237px; height:199px; float:left; margin-left:10px; margin-right:10px;}
.m5-1-3 {width:498px; height:155px; float:left;margin-left:19px; text-indent:28px; text-align:left; background:#FFFFFF}.m5-1-3 p{ color:#5C5F65; line-height:29px; font-size:14px;}.m5-2{ width:420px; height:416px; float: right;}
.m5-2-1{width:420px; height:45px; background:url(../images/zbbgcolor.png) top center repeat}
.m5-2-1-left{width:120px; height:45px; text-align: left ;line-height:45px; float:left; text-indent:14px;}
.m5-2-1-left a{ font-size:16px; font-weight:bold; text-align:left;border-bottom:5px solid #000000 }
.m5-2-1-right{height:45px; width:40px; float:right;}
.m5-2-1-right img{float: right; width:39px; height:12px; margin-top:15px }.m5-2-2{ width:420px; height:auto; float: left; background:#FFFFFF}
.m5-2-2 ul{ width:420px; height:371px; }
.m5-2-2 ul li{ width:350px; height:34px; border-bottom:#CCC dashed 1px; text-align: left ; margin-left:15px;}
.m5-2-2 ul li a{ line-height:34px; color:#999; margin-left:3px;}
.m5-2-2 ul li span{font-size:8px; margin-right:5px;}
/*中部第六个盒子 */
.m6{ width:967px; height:310px;border:#ccc solid 1px; margin-top:20px; overflow:hidden}.m6-1{ width:420px; height:310px; float:left;}
.m6-1-1{width:510px; height:45px; background:url(../images/zbbgcolor.png) 0 0 repeat; float:left}
.m6-1-1-left{width:120px; height:45px; text-align: left ;line-height:45px; float:left; text-indent:14px;}
.m6-1-1-left a{ font-size:16px; font-weight:bold; text-align:left;border-bottom:5px solid #000000 }
.m6-1-1-right{height:45px; width:40px; float:right;}
.m6-1-1-right img{float: right; width:39px; height:12px; margin-top:10px }.m6-1-2{ width:510px; height:310px; float: left; background:#FFFFFF; text-align:left}
.m6-1-2 ul{ width:400px; height:300px; text-align:left;}
.m6-1-2 ul li{ width:350px; height:34px; border-bottom:#CCC dashed 1px; text-align:left; margin-left:15px;}
.m6-1-2 ul li a{ line-height:34px; color:#999; margin-left:3px;}
.m6-1-2 ul li span{font-size:8px; margin-right:5px;}.m6-2{ width:420px; height:310px; float: right;}
.m6-2-1{width:420px; height:45px; background:url(../images/zbbgcolor.png) top center repeat; }
.m6-2-1-left{width:100px; height:45px; text-align: left ;line-height:45px; float:left; text-indent:14px; }
.m6-2-1-left a{ font-size:16px; font-weight:bold; text-align:left;border-bottom:5px solid #000000 }
.m6-2-1-right{height:45px; width:40px; float:right;}
.m6-2-1-right img{float: right; width:39px; height:12px; line-height:45px; margin-top:10px}.m6-2-2{ width:420px; height:auto; float:right; background:#FFFFFF}
.m6-2-2 ul{ width:420px; height:321px;}
.m6-2-2 ul li{ width:350px; height:34px; border-bottom:#CCC dashed 1px; text-align: left ; margin-left:15px;}
.m6-2-2 ul li a{ line-height:34px; color:#999; margin-left:3px;}
.m6-2-2 ul li span{font-size:8px; margin-right:5px;}
/*中部第六个盒子 *//*底部*/
.foot{ width:1300px; height:133px;}
.f1{ width:1300px; height:52px; background:#343F4E}
.f1 p{ margin-right:200px; line-height:52px; color:#FFF;}
.f2{ width:1300px; height:80px; background:#2E3847}
.f2 p{ line-height:40px; color:#FFF; margin-right:400px;}切片图库：
HTML+CSS网页制作——99银号相关推荐
- html书页卷角效果,HTML+CSS网页制作实例制作左上角卷角效果的网页
网页制作网络技术需要大家共同分享,不能闭门造车,下面是bj-dns文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 这篇文章中我们将介绍如何制做paper左上角的卷角效果. ...
- html+css网页制作
简易美食网页制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- java 网页排版乱_HTML、DIV+CSS网页制作中排版混乱的几种常见的情况
对于Web前端初学者或者经验不够丰富的人来说,出现页面排版布局混乱的情况并不罕见,有时候明明前面部分的网页都很整齐美观,可是在接下来的部分中经常会出现网页布局混乱,比如content无法调整到开发者需 ...
- css网页制作的基本步骤,CSS初步教学步骤
<CSS初步教学步骤>由会员分享,可在线阅读,更多相关<CSS初步教学步骤(15页珍藏版)>请在人人文库网上搜索. 1.框架与基本(CSS+DIV)的教学步骤准备工作:(1)进 ...
- html 网页联系人,HTML+CSS网页制作实例:制作联系人网页表单
网页制作文章简介:在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格. ...
- 【web开发网页制作】Html+Css网页制作关于我的家乡（6页面）【附源码下载】
[写在前面]之前学生时代自己也做了不少页面,现在毕业后也希望能慢慢的分享出来给大家,希望能给刚接触web开发的你带来一些启发.其实关于网页制作,没有大家想象中的那么难,接下来给大家详细介绍一下如何实现 ...
- CSS网页制作布局实例教程
本教程最终效果如下(浏览示例页面): 本教程素材及页面源代码下载 教程的每个部分都有其侧重点,其中前三节都是关于素材制作与设计的,要求有一定的Photoshop操作基础,我想这也是网页设计必备的基础技 ...
- HTML/CSS网页制作-----家居网
目录 网页优化 HTML部分代码 css部分代码 效果展示 网页优化 1, 抽取css公共样式 2, 制作成模板页(母版页) 目的:减少后期其他页面的代码复制,建议把首页制作完成后,另存为一个模板页, ...
- HTML+CSS网页制作——人生指南
实现的效果图: HTML框架制作(静态页面实现) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
最新文章
- 链表问题11——两个单链表相交的系列问题(二):找到两个无环链表的交点
- Pytorch+Text-CNN+Word2vec+电影评论情感分析实战
- js使用计时事件制作的钟表
- 聊聊高并发下的接口幂等性
- C语言经典例83-求0—7所能组成的奇数个数
- php创蓝253四要素认证_PHP下基于创蓝253接口的短信发送
- Error（6，35）java: 程序包 不存在，解决办法
- ASP 缩略图 （纠错版）
- [UOJ299][CTSC2017] 游戏
- Xcode做简易计算器
- 暑假集训-个人赛第六场
- LeetCode 665 非递减数列
- 鸿蒙系统对手机性能的提升,鸿蒙OS手机版再爆新特性，流畅度和性能大幅提升，用户评价很高...
- linux的启动流程和加载程序
- 【AWS系列】第四讲：什么是 AWS Serverless
- Python学习笔记：数据可视化(一)
- Java向word中插入Excel文件对象
- mysql中sum和count的区别
- @所有运维人丨多链路负载均衡那些事儿
- 十年前他在马王堆送快递，如今当上航空主管，拯救客户亿元大单