响应式布局案例实战

最新推荐文章于 2023-05-15 20:13:36 发布

高谷o

最新推荐文章于 2023-05-15 20:13:36 发布

阅读量885

点赞数

文章标签： css css3 html html5 javascript

本文链接：https://blog.csdn.net/gaogu_milk/article/details/107759188

版权

本文分享了一次响应式布局的实战案例，详细介绍了HTML、CSS和JavaScript代码实现过程。通过不同屏幕尺寸的效果图展示了布局的适应性变化，包括大于1024px、640px到1024px及小于640px的情况。总结中提到，为了兼容性选择了浮动布局，利用span实现导航按钮，并用js控制下拉菜单的显示。该案例适合作为初学者了解和练习响应式设计的基础。

摘要由CSDN通过智能技术生成

响应式布局案例实战

前几天做了一个响应式布局的案例，这里和大家分享一下，主要是总结一些经验。

1.html代码

<body>
    <!-- 头部 -->
    <header id="header">
        <div class="logo">
                <img src="images/largelogo.jpg" alt="logo" class="large">
                <img src="images/middlelogo.jpg" alt="logo" class="middle">
                <img src="images/smalllogo.jpg" alt="logo" class="small">
        </div>
        <div class="search">
            <input type="search" name="kw" placeholder="请输入搜索内容">
            <button>搜索</button>
        </div>
        <div class="nav">
            <button id="btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul>
                <li><a href="javascript:">首页</a></li>
                <li><a href="javascript:">课程</a></li>
                <li><a href="javascript:">公告</a></li>
                <li><a href="javascript:">登录</a></li>
            </ul>
        </div>
    </header>
    <!--横幅 -->
    <div id="banner">
        <img src="images/banner.jpeg" alt="banner">
    </div>
    <!-- 主体内容 -->
    <div id="main">
        <div class="row">
            <div class="col">
                <a href="javascript:">
                    <img src="images/main1.jpeg">
                </a>
                <p>HTML5</p>
            </div>
            <div class="col">
                <a href="javascript:">
                    <img src="images/main2.jpg">
                </a>
                <p>CSS3</p>
            </div>