一个不完整的页面布局

于 2018-09-08 15:54:11 发布
阅读量141 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42275455/article/details/82530115
版权 
<!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>&nbsp &nbsp &nbsp &nbsp <a href="#.">糖市信息</a></li>
          <li>&nbsp &nbsp &nbsp &nbsp <a href="#.">企业黄页</a></li>
          <li>&nbsp &nbsp &nbsp &nbsp <a href="#.">登陆</a></li>
          <li>&nbsp &nbsp &nbsp &nbsp <a href="#.">注册</a></li>
          <li>&nbsp &nbsp &nbsp &nbsp <a href="#.">信息反馈</a></li>
          <li>&nbsp &nbsp &nbsp &nbsp 
            <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>
&nbsp &nbsp &nbsp &nbsp 
<a href="">帮助中心</a>
&nbsp &nbsp &nbsp &nbsp 
<a href="">联系我们</a>
</div>
<hr Color='red'>
<div align="center" style="margin-top: 30px;margin-bottom: 30px;" style="width: 1400px;">
<p>友情链接：&nbsp &nbsp &nbsp &nbsp <a href="">百度</a>&nbsp &nbsp &nbsp &nbsp 鲁ICP备18019517号</p>
</div>
</div>
</body>
</html>

部分页面布局截图

命名不规范者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值