<!DOCTYPE html>
<html>
<head>
<title>冰封食堂</title>
<meta charset="utf-8">
<style>
li{float: left;list-style: none;}
a{text-decoration: none;}
.div{margin: 0 auto;}
</style>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div align="center" style="width: 1400px;height: 200px">
<!--顶部图片-->
<img src="./img/top.jpg" style="width: 100%;height: 100%">
</div>
<div align="center" style="border-width: 8px;border-color: HEX;border-style:ridge; width: 1400px;height: 40px">
<ul align="center">
<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>       
<select class="selectpicker">
<option>French</option>
<option>German</option>
<option>Italian</option>
<option>Japanese</option>
</select>
</li>
</ul>
</div>
<div style="width: 1400px;height: 1200px">
<div style="float:left; width: 20%;height: 1200px">
<!--左侧长图-->
<img src="./img/left.jpg" style="width: 100%;height: 100%">
</div>
<div style="float:right; width: 80%;height: 1200px">
<div style="float:left; width: 75%;height: 1500px">
<div style="width: 100%;height: 300px; border-width:3px;border-color: red; ">
<div style="float:left; width: 60%;height: 30px; border-width: 3px;border-color: 000;border-style:none;">
<div align="center" style="line-height: 30px; float:left; width:30% ;height: 30px">
白糖销售信息
</div>
<div align="center" style="line-height: 30px; float:right; width:20% ;height: 30px">
<a href="">了解更多</a>
</div>
</div>
<div style="float:right; width: 40%;height: 300px; border-width: 2px;border-color: 000;border-style:none;">
<!--滚动页面右侧图片-->
<img src="./img/gdyc.jpg" style="width: 95%;height: 95%">
</div>
<div style="float:left; width: 60%;height: 270px; border-width: 2px;border-color: 000;border-style:none;">
<!--滚动页面-->
<marquee scrolldelay="1" bgcolor="skyblue" width="95%" height="95%" direction="up">
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
</marquee>
</div>
</div>
<div style="width: 100%;height: 300px">
<div style="float:left; width: 30%;height: 300px; border-width: 1px;border-color: 000;border-style:none; ">
<!--图片1-->
<img src="./img/gdt1.jpg" style="width: 95%;height: 95%">
</div>
<div style="float:right; width: 70%;height: 300px">
<div style="float:left; width: 50%;height: 300px">
<!--图片2-->
<img src="./img/gdt2.jpg" style="width: 95%;height: 95%">
</div>
<div style="float:right; width: 50%;height: 300px">
<!--图片3-->
<img src="./img/gdt3.jpg" style="width: 95%;height: 95%">
</div>
</div>
</div>
<div style="width: 100%;height: 300px">
<div style="float:left; width: 60%;height: 300px">
<!--滚动页面-->
<marquee scrolldelay="1" bgcolor="skyblue" width="95%" height="95%" direction="up">
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
<p>示例文本文字!</p>
</marquee>
</div>
<div style="float:right; width: 40%;height: 300px">
<!--滚动页面右侧图片-->
<img src="./img/gdyc.jpg" style="width: 95%;height: 95%">
</div>
</div>
<div style="width: 100%;height: 300px">
<div style="float:left; width: 30%;height: 300px">
<!--图片1-->
<img src="./img/gdt1.jpg" style="width: 95%;height: 95%">
</div>
<div style="float:right; width: 70%;height: 300px">
<div style="float:left; width: 50%;height: 300px">
<!--图片2-->
<img src="./img/gdt2.jpg" style="width: 95%;height: 95%">
</div>
<div style="float:right; width: 50%;height: 300px">
<!--图片3-->
<img src="./img/gdt3.jpg" style="width: 95%;height: 95%">
</div>
</div>
</div>
</div>
<div style="float:right; width: 25%;height: 1200px">
<!--右侧长图-->
<img src="./img/right.jpg" style="width: 100%;height: 100%">
</div>
</div>
</div>
<div align="center" style="margin-top: 30px;margin-bottom: 30px;" style="width: 1400px">
<p style="width: 1400px"><nobr> 冰峰食糖信息网,是由青岛冰峰食糖信息咨询有限公司为优化食糖购销环境、提高糖企知名度、</nobr></p>
<p style="width: 1400px">强化食糖品牌建设、提升食糖行业整体研发水准、促进食糖行业良性长期发展设立的新型信息交流</p>
<p style="width: 1400px">传播服务平台,欢迎制糖企业、经销商、终端等用户免费注册免费发布各类信息。欢迎期货公司、证券</p>
<p style="width: 1400px">公司、投资公司与信息网合作,通过本网站内部系统向注册用户发送食糖研发报告。 </p>
</div>
<div align="center" style="margin-top: 30px;margin-bottom: 30px;" style="width: 1400px">
<p style="width: 1400px">冰峰食糖信息网声明:本网站发布的一切信息,</p>
<p style="width: 1400px">本网站并不保证其真实性,由此产生的一切后果,本公司并不承担任何责任。</p>
</div>
<div style="width: 1400px; background-color: #CCCCCC;margin: 0 auto;">
<div align="center" style="margin-top: 30px;margin-bottom: 30px; ">
<a href="">关于我们</a>
       
<a href="">帮助中心</a>
       
<a href="">联系我们</a>
</div>
<hr Color='red'>
<div align="center" style="margin-top: 30px;margin-bottom: 30px;" style="width: 1400px;">
<p>友情链接:        <a href="">百度</a>        鲁ICP备18019517号</p>
</div>
</div>
</body>
</html>
一个不完整的页面布局
最新推荐文章于 2024-08-29 08:55:17 发布