博客列表 >5.1号作业完善页面关于我们

5.1号作业完善页面关于我们

蜗牛是条鱼
蜗牛是条鱼原创
2019年05月07日 18:46:19786浏览

5.1号作业:完善关于我们这个页面

直接可以用 产品页页面改下就可以了

  1. 头部 底部 ,左侧都是可以复用的。

  2. 如果要美观点,直接修改内容样式就可以。

  3. 实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="static/css/header.css">
        <link rel="stylesheet" href="static/css/footer.css">
        <link rel="stylesheet" href="static/css/news.css">
        <title>关于我们</title>
    </head>
    <body>
    <!-- 头部 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="index.html">首页</a></li>
                <li class="item"><a href="news.html">公司新闻</a></li>
                <li class="item"><a href="products.html">最新产品</a></li>
                <li class="item"><a href="about.html">关于我们</a></li>
                <li class="item"><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 中间主体 -->
    <div class="container">
        <!--   banner图-->
        <div class="banner">
            <img src="static/images/banner.jpg" alt="">
        </div>
    
        <!-- 1. 中间内容区块 -->
        <div class="wrap">
            <div class="main">
                <div class="news-list">
                    <h3>关于我们</h3>
                    <p>我公司的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                        每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                        用户自己一下, 实在是不好意思了, 毕竟9块9就包邮了(PDD商城哟)</p>
                    <p>我公司的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                        每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                        用户自己一下, 实在是不好意思了, 毕竟9块9就包邮了(PDD商城哟)</p>
                    <p>我公司的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                    每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                    用户自己一下, 实在是不好意思了, 毕竟9块9就包邮了(PDD商城哟)</p>
                    <p>我公司的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                        每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                        用户自己一下, 实在是不好意思了, 毕竟9块9就包邮了(PDD商城哟)</p>
                </div>
            </div>
        </div>
    
        <!-- 2. 左侧分为上下二 -->
        <div class="left">
            <h3>栏目</h3>
            <div class="category">
                <ul>
                    <li><a href="">公司新闻</a></li>
                    <li><a href="">最新产品</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">联系我们</a></li>
                </ul>
            </div>
    
        </div>
    
    
    </div>
    
    <!-- 底部 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">© PHP中文网版权所有</a>  | 
                <a href="">0551-88889999</a>  | 
                <a href="">皖ICP2016098801-1</a>
            </p>
    
        </div>
    </div>
    </body>
    </html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议