7月9号作业 - 作业

实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼结构之---关于我们</title>
    <link rel="stylesheet" href="static/css/style.css">

    <style type="text/css" >
        /******************* 头部样式开始 ******************/
        p{
            font-size: 15px;
            line-height: 30px;
        }
        .header{
        }

        /*头部内容区*/
        .header .content{  /*在.header和.content之间必须有个空格,否者这个样式不生效*/
            width: 1000px;
            height: 60px;
            background-color: #444;
            margin: 0 auto;
        }
        .header .content .nav{
            list-style: none;
        }

        .header .content .nav .item a {
            /* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
            min-width: 100px;
            min-height: 60px;
            float: left;
            color: #fff;
            line-height: 60px;
            text-decoration: none;
            text-align: center;


        }
        .header .content .nav .item a:hover {
            /* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
            background-color: red;
            /* 将导航文本设置为系统根字体大小的1.2倍 */
            font-size: 1.2rem;
        }

        /******************* 主体样式开始 ******************/

        /*双飞翼由大名鼎鼎的玉但提出, 淘宝网率先使用*/
        /* 使用双飞翼布局实现主体部分 */

        /***** 第一步: 主体容器设置总宽度,并水平居中 *****/
        .container {
            width: 1000px;
            margin: 5px auto;
            overflow: hidden;
            padding-top: 5px;
        }


        .banner{
            width: 1000px;
            height: 200px;
            margin-bottom: 10px;

        }

        /***** 第二步: 左,右二侧固定宽度,中间区块自适应 *****/

        /* 1. 中间区块宽度设置在它的容器wrap中 */
        .main {
            width: 700px;
            min-height: 800px;
            box-sizing: border-box;
            background-color:white;
            float: right;
            margin-top: 150px;
            padding: 20px;
        }

        .main h2{
            text-align: center;
        }

        /* 2. 设置左,右区块的宽度和高度(因为无内容,所以设置了最小高度),并设置参考色块 */

        /* 左边栏样式 */
        .left {
            width: 200px;
            min-height: 800px;
            background-color: #444444;
            float: left;
            margin-top:100px;

        }

        .left .nav{
            list-style: none;
        }

        .left .nav .item a {
            /* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
            min-width: 100px;
            min-height: 60px;
            float: left;
            color: #fff;
            line-height: 60px;
            text-decoration: none;
            text-align: center;


        }
        .left .nav .item a:hover {
            /* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
            background-color: red;
            font-size: 1.2rem;
        }

        /* 右边栏样式 */
        .right {
            width: 200px;
            min-height: 800px;
            float: left;
            margin-left: -200px;
        }

        .footer{
        }

        .footer .content {
            width: 1000px;
            height: 60px;
            background-color: #444;
            margin: 0 auto;
            text-align: center;
            line-height: 60px;
        }
        .footer .content p a{

            color: #ffffff;
            text-decoration: none;

        }

        .footer .content p a:hover{

            background-color: red;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="">首页</a> </li>
            <li class="item"><a href="">公司新闻</a> </li>
            <li class="item"><a href="">最新产品</a> </li>
            <li class="item"><a href="">关于我们</a> </li>
            <li class="item"><a href="">联系我们</a> </li>
        </ul>

    </div>
    <!--主体部分-->
    <div class="container">
        <!--   banner图-->
        <div class="banner">
            <img src="http://www.php.cn/static/images/index_banner7.jpg" alt="php中文网">
        </div>
        <!--创建中间内容块-->
        <!-- 中间内容区需要创建一个父级容器进行包裹 -->
        <div class="main">

            <h2>关于我们</h2>
            <hr style="color: black;">
            <p>
                艾媒网获悉，7月7日，沽空机构Muddy Waters Research浑水发布报告称，安踏通过控制大多数一级分销商来给利润注水，
                建议沽空安踏。7月8日早盘，安踏体育跌近9%。午间，安踏体育公告，公司股票在港交所短暂停牌。停牌前，
                安踏体育报每股51.25港元/股，较上一交易日跌7.32%，市值蒸发109亿。
                不过，今天上午，安踏在港交所发布公告称， 9点开始复牌并对做空报告内容进行了澄清。
            </p>
        </div>
        <!--左侧边栏栏目-->
        <div class="left">
            <ul class="nav">
                <li class="item"><a href="">公司新闻</a> </li>
                <li class="item"><a href="">最新产品</a> </li>
                <li class="item"><a href="">关于我们</a> </li>
                <li class="item"><a href="">联系我们</a> </li>
            </ul>
        </div>
    </div>
    <!--底部-->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">© PHP中文网版权所有</a>  |
                <a href="">0551-65358899</a>  |
                <a href="">皖ICP备18***333-1</a>
            </p>
        </div>
    </div>
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：qualified

Teacher's comments：下次写上作业标题, 以便于核对 , 直接上代码不合适
Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例
