HTML+CSS网页制作——安徽铁观音

2023-10-19 19:50
文章标签 网页 css html 制作 frontend 安徽 铁观音

本文主要是介绍HTML+CSS网页制作——安徽铁观音，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

已实现的效果图 

安徽铁观音HTML制作+CSS样式表

 

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>
</head>
<link  href="css/style.css"  rel="stylesheet" />
<body>
<div class="qj">
<!--头部-->
<div  class="top" >
<div  class="top1" ></div>
<div  class="top2" ></div>
<div  class="top3" >
<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="top4" ></div>
<!--中部-->
<!--中部左边列-->
<div class="m1">
<div class="left">
<div class="left1">商业分类</div>
<div class="left2">联系方尺</div>
<div class="left3">产品搜索</div>
</div>
<!--中部右边列-->
<div class="right">
<!--中部右边列左部分-->
<div class=" right-1eft">
<div  class=" right-left-1">新闻动态</div>
<div  class=" right-left-2">
<ul >
<li>这个冬天不太冷 2015-5-18</li>
<li>客服中心高效运转，获得一致好评 2015-5-18</li>
<li>总部各直营门店均安装POS机方便顾客消费 2015-5-18</li>
<li>厦门第八家直营店（金桥分店）试营业 2015-5-18</li>
<li>运营部一行前往郑州考察工作 2015-5-18</li>
</ul>
</div></div>
<!--中部右边列右部分-->
<div class=" right-right">
<div class="right-right-1">茶业动态</div><div  class=" right-right-2">
<ul >
<li>这个冬天不太冷 2015-5-18</li>
<li>客服中心高效运转，获得一致好评 2015-5-18</li>
<li>总部各直营门店均安装POS机方便顾客消费 2015-5-18</li>
<li>厦门第八家直营店（金桥分店）试营业 2015-5-18</li>
<li>运营部一行前往郑州考察工作 2015-5-18</li></ul>
</div></div>
<!--中部右边列下部分-->
<div class="right-bottom">
<div class="right-bottom-1">公司简介</div>
<div class="right-bottom-2">
<pre>   安徽铁观音欣欣茶叶，茶叶产地直销；经营地中高档安溪“铁观音”，本山，黄丹，毛蟹，
黄金贵， 等名茶！安徽铁观音欣欣茶叶，茶叶产地直销；经营地中高档安溪"铁观音"，本山，黄丹，
毛蟹，黄金 贵，等名茶安徽铁观音欣欣茶叶，茶叶产地直销；经营地中高档安溪"铁观音"详情请登入欣欣网站 http:www.tgy99.com生产许可编证 QS350541010470生产标准号：GB/T 1959
</pre></div>
</div></div></div>
<!--底部-->
<div class="m5">
<ul>
<li><a>关于我们</a>  -</li>
<li><a>联系我们</a>  -</li>
<li><a>帮助中心</a>  -</li>
<li><a>广告服务</a>  -</li>
<li><a>保密条款</a>  -</li>
<li><a>免费申明</a>  -</li>
<li><a>返回顶部</a></li>
</ul>
</div>
<div class="m6"></div>
<div class="m7">
<p>侵权信息投诉电话： 0592-3121281 本站郑重申明 所载文章数据仅供参考，使用前请核实，风险自负<br />
Copyright &copy;2015 www.0592TEA.net 运营策划：厦门磐石文化传播有限公司 All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>

CSS样式表

/* CSS Document */
*{ margin:0; padding:0;}
img{ border:none;}
ul,ol,li{ list-style:none;}
div{ height:auto; /*overflow:hidden;*/ 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;}
em,i {font-style:normal; font-size:100%;}
body{ background:url(../images/background.png) 0  0 no-repeat  fixed;}
/*头部*/
.qj{width:1310px; height: auto; background:url(../images/background.png) top center repeat; border-right:#000000 solid 6px; border-bottom: #000000 solid 6px;}
.top{ width:1310px; height:auto; border: 1px solid #000000 ; background:url(../images/background.png) 0 0 repeat}
.top1{height:20px; width:1000px; background: url(../images/head1.png) top center repeat}
.top2{width:1000px; height:344px; background:url(../images/head%20tupian.png) 0 0 no-repeat}
.top3{width:1000px; height:23px; background: url(../images/head2%20r5_c2.png)  top  center repeat}
.top3 ul{ width:780px; height:23px;  text-align:center; margin:auto ; }
.top3 ul li{ width:72px; height:23px;float:left; text-align:center;line-height:23px; font-family:"微软雅黑"; font-size:14px; font-weight:bold; color:#FFF; margin-left:4px; }
.top3 ul li a{color:#FFF; display:block; float:left; text-align:center;  }.top3 ul li a:hover{ background:#333;}.top4{height:12px; width:1000px; background: url(../images/huisebeijing%20.png) top center repeat}/*中部*/
.m1{width:1310px; height:582px; } 
/*中部左边*/
.left{width:402px; height:582px; float:left; border-right: #999999 solid 5px}
.left1{width:128px; height:22px; line-height:22px; margin:90px 10px  30px 190px; text-align:left; border-bottom:3px solid  #999999;  font-family:"微软雅黑";}
.left2{width:128px; height:22px;line-height:22px;margin: 90px 10px  30px 190px;text-align:left; border-bottom:3px solid   #999999;  font-family:"微软雅黑";}
.left3{width:128px; height:22px; line-height:22px;margin: 90px 10px 30px 190px;text-align:left; border-bottom:3px solid  #999999;  font-family:"微软雅黑";}
/*中部右边*/
.right{width:900px; height:582px; float: right; }
.right-1eft{width:380px; height:200px; float: left;}.right-left-1{width:210px; height:18px; border-bottom:3px solid  #999999; line-height::23px; text-indent:15px; text-align:left; margin: 15px 15px; font-family:"微软雅黑";}.right-left-2{width:380px; height:170px; float:left ; margin-left:10px }
.right-left-2 ul{ width:380px; height:160px; margin:2px 20px; text-align:left; list-style: disc}
.right-left-2 ul li{ width:380px; height:23px;float:left; text-align:left; line-height:23px;  font-size:12px;  color: #000000;list-style: disc}.right-right{width:380px; height:200px; float: left;}.right-right-1{width:210px; height:18px; border-bottom:3px solid  #999999; line-height::23px; text-indent:15px; text-align:left; margin: 15px 15px;  font-family:"微软雅黑";}.right-right-2{width:380px; height:170px; float:left  }
.right-right-2 ul{ width:380px; height:160px; margin:2px 20px; text-align:left; list-style: disc}
.right-right-2 ul li{ width:380px; height:23px;float:left; text-align:left; line-height:23px;  font-size:12px;  color: #000000;list-style: disc}.right-bottom{width:650px; height:382px; float: left;}
.right-bottom-1{width:600px; height:23px; border-bottom:3px solid  #999999; line-height::23px; text-indent:30px; text-align:left; margin: 15px 15px;  font-family:"微软雅黑";}
.right-bottom-2 { text-indent:28px; line-height: 40px; height:40px; text-align:left; margin-left:30px}
/*底部*/
.m5{background: url(../images/bottom%201.png) top center repeat; width :1000px; height:25px; text-align:center}
.m5 ul {width:502px; height:25px;  float:left;  text-align: center; margin:0px 250px}
.m5 ul li{width:70px; height:25px; float:left; line-height:25px; color:#FFFFFF;}
.m5 ul li a{ color:#CCCCCC; display:block; line-height:25px; float:left}.m5 ul li a:hover{ background:#333;}
.m6{background:url(../images/huisebeijing%20.png) top center repeat; width:1000px; height:18px}
.m7{color: #000000;}

切片图片

 

这篇关于HTML+CSS网页制作——安徽铁观音的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/241983。

相关文章

一文教你Python如何快速精准抓取网页数据

一文教你Python如何快速精准抓取网页数据

《一文教你Python如何快速精准抓取网页数据》这篇文章主要为大家详细介绍了如何利用Python实现快速精准抓取网页数据,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录1. 准备工作2. 基础爬虫实现3. 高级功能扩展3.1 抓取文章详情3.2 保存数据到文件4. 完整示例
阅读更多...
python获取网页表格的多种方法汇总

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2