百度前端学院第七、八天案例（浮动方法）

最新推荐文章于 2024-05-07 07:18:22 发布

张麻子脸上为什么一定会有麻子

最新推荐文章于 2024-05-07 07:18:22 发布

阅读量179

点赞数

分类专栏：前端开发-css 文章标签： css html html5

本文链接：https://blog.csdn.net/shanshanerchuan/article/details/109818002

版权

前端开发-css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

百度前端学院第七、八天案例（浮动方法）

素材图：

（一）浮动布局
注：
（1）由于主导航栏布局中第一个盒子没有下边框，就导致整个导航栏区域不能直接设置下边框，这个问题比较头疼，我才用的是左中右三个盒子，左右两个盒子只设置一个下边框，但是感觉还不是特别好的方法，如果有同学有比较好的方法可以在评论区留言，看到了一定及时回复。
（2）内容区域是十个大小不等的li，要是一个个弄起来非常浪费时间，我就简化为9个大小相等的盒子了。
html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/float.css">

</head>

<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="w">
            <div class="headerLeft">
                logo
            </div>
            <div class="headerRight">
                <a href="#">Github</a>
                <a href="#">Register</a>
                <a href="#">Login</a>
            </div>
        </div>
    </div>

    <!-- banner区域 -->
    <div class="banner">
        <div class="w">
            <div class="bannerRight">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 主导航栏区域 -->
    <div class="nav">
        <!-- <div class="w"> -->
        <div class="one"></div>
        <div class="navLeft">
            <ul>
                <li>HOME</li>
                <li>PROFILE</li>
                <li>ABOUT</li>
            </ul>
        </div>
        <div class="two"></div>
        <!-- </div> -->
    </div>

    <!-- 主要内容区域 -->
    <div class="w content clearfix">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <!-- <li>10</li> -->
        </ul>
    </div>

    <!-- 底部区域 -->
    <div class="footer">2018 ife baidu.com</div>

</body>

</html>

css文件：

*{
    margin: 0;
    padding: 0;
}
.clearfix:after {      
    content: ".";     
    display: block;   
    clear: both;     
    visibility: hidden;      
    height: 0;    
    font-size:0;   
}
li{
    list-style: none;
}
.header{
    height: 80px;
    background-color: #333333;
    color: #fff;
}
.w{
    width: 960px;
    margin: 0 auto;
}
.headerLeft{
    float: left;
    height: 100%;
    line-height: 80px;
    font-size: 38px;
}
.headerRight{
    float: right;
}
.headerRight a{
    color: #fff;
}

/* banner区域 */
.banner{
    height: 300px;
    background-color: #66bb33;
}
.bannerRight{
    float: right;
    width: 145px;
    height: 60px;
    margin-top: 230px;
    /* background-color: pink; */
}
/* .bannerRight ul{
    margin-top: 10px;
} */

.bannerRight ul li{
    float: left;
    width: 30px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-right: 5px;
    margin-top:20px;
    background-color: #b2dd99;
}
.bannerRight ul li:nth-child(2){
    height: 45px;
    margin-top: 10px;
    background-color: #e0f1d6;
}
/* 主导航栏区域 */
.nav{
    height: 70px;
    /* border-bottom: 1px solid #dddddd; */
}
.one{
    float: left;
    width: 370px;
    height: 100%;
    /* background-color: pink; */
    border-bottom: 1px solid #ddd;
}
.two{
    float: right;
    width: 825px;
    height: 100%;
    /* background-color: blue; */
    border-bottom: 1px solid #ddd;
}
.navLeft{
    float: left;
    margin-top: 19px;

}

.navLeft ul li{
    float: left;
    width: 106px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 30% 30% 0 0;
    background-color: #eeeeee;
}
.navLeft ul li:nth-child(1){
    background-color: #fff;
    border-bottom: 0px solid #dddddd;
}

/* 核心内区域 */
.content ul li{
    float: left;
    width: 308px;
    height: 180px;
    line-height: 180px;
    text-align: center;
    border: 1px solid #dddddd;
    margin-top: 10px;
    margin-right: 10px;
}
/* 底部区域 */
.footer{
    height: 120px;
    line-height: 120px;
    text-align: center;
    background-color: #666666;
    margin-top: 20px;
    color: #fff;
}

张麻子脸上为什么一定会有麻子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端学院第七、八天案例（浮动方法）

百度前端学院第七、八天案例（浮动方法）素材图：（一）浮动布局注：（1）由于主导航栏布局中第一个盒子没有下边框，就导致整个导航栏区域不能直接设置下边框，这个问题比较头疼，我才用的是左中右三个盒子，左右两个盒子只设置一个下边框，但是感觉还不是特别好的方法，如果有同学有比较好的方法可以在评论区留言，看到了一定及时回复。（2）内容区域是十个大小不等的li，要是一个个弄起来非常浪费时间，我就简化为9个大小相等的盒子了。html文件：<!DOCTYPE html><html lang
复制链接

扫一扫