粗糙网页布局

欢迎各位复制粘贴

往下看

网页body内容：

    <div class="one">
        <a href="#">产品</a>
        <a href="#">介绍</a>
        <a href="#">技术</a>
        <a href="#">领域</a>
        <a href="#">事实</a>
        <a href="#">联系人</a>
        <a href="#">版权声明</a>
    </div>
    <div class="two">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="there">
        <br>is xiaobai 
    </div>

没加css效果图 

 

 

 网页css内容： 

        a {
            display: inline-block;    /*元素显示模式的转换*/
            width: 150px;
            height: 50px;
            background-color: #55585a;  /*背景颜色*/
            font: 30px 华文行楷;
            color: #000;
            text-decoration: none;    /*删除下划线*/
            padding-left: 20px;    /*内容与左边边框线的距离*/
            padding-right: 20px;   /*内容与右边边框线的距离*/
            padding-top: 5px;      /*内容与顶边边框线的距离*/
            line-height: 45px;   /*行高既字体最底端与字体内部顶端之间的距离*/
            text-align: center;   /*文本内容居中对齐*/
        }
        a:hover {
            background-color: #ff6700;
        }
        .one{
            padding-left: 70px;
        }
        .two{
            height: 600px;
            width: 1455px;
            background-color:pink;
            padding-left: 65px;  
        }
        .two ul li{
            list-style: none;
            background-color:red;
            height: 600px;
            width: 400px;
            float: left;
            margin-right: 50px;
        }
        .there{
            text-align: center;
            background-color: grey;
            width: 100%;
            height: 100px;
            font-size: 20px;
            font-family: 黑体;
        }

 最终效果图：

 

 

谢谢大家 看完本人成果，

刚学没多久 希望在这记录自己的成长。

yes！！！