广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >css网页布局案例分析
  • 200

0
分享到

css网页布局案例分析

2024-04-02 19:04:59 200人浏览 泡泡鱼
摘要

这篇文章主要介绍了CSS网页布局案例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css网页布局案例分析文章都会有所收获，下面我们一起来看看吧。position:stati

这篇文章主要介绍了CSS网页布局案例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css网页布局案例分析文章都会有所收获，下面我们一起来看看吧。

position:static
忽略top/bottom/left/right或者z-index
position:relative
设置相对定位的元素不会脱离文档流
position:fixed
不会随着视口滚动而滚动，继承absolute的特点
position:sticky
和top属性搭配，可以设置吸附导航效果，但兼容性不太理想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style> *{margin:0;padding:0;} div{width:100%;} .banner{text-align: center;background-color:#f2f4f6;padding:100px 0;} .nav{text-align: center;border:1px solid #333;position: sticky;top:0;background-color:#abcdef;padding:20px 0;} .content{width:60%;margin:50px auto;} p{margin-bottom:50px;}
    </style>
</head>
<body>
    <div class="banner">这是广告图</div>
    <div class="nav">导航 | 导航 | 导航</div>
    <div class="content">
        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>
        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>
        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>
        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>
        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>
        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>
        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>
    </div>
</body>
</html>

css网页布局案例分析css网页布局案例分析
 
 
左侧固定三级导航demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style> *{margin:0;padding:0;} .page{width:100%;} .nav{position: fixed;top:50%;left:0;width:160px;height:205px;margin-top:-102.5px;} .nav-li{width:100%;line-height:40px;text-align:center;color:#fff;background:#333;border-bottom:1px solid #fff;cursor: pointer;} .nav-li:hover ul{display: block;} .title{width:100%;height:40px;} .nav-li ul{width:100%;background-color: #fff;display: none;} .nav-li ul li{width:100%;height:40px;line-height:40px;text-align:center;color:#333;border-bottom:1px dashed #666;position: relative;} .nav-li ul li:hover .list3{display: block;} .list3{width:100%;position: absolute;top:0;left:160px;display: none;} .item3{width:100%;height:40px;line-height:40px;text-align:center;background:#444;color:#fff;border-bottom:1px dashed #666;}
    </style>
</head>
<body>
    <div class="page">
        <div class="nav">
            <div class="nav-li">
                <div calss="title">一级导航1</div>
                <ul>
                    <li>二级导航1 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                    <li>二级导航2 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                    <li>二级导航2 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                    <li>二级导航2 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="nav-li">
                <div calss="title">一级导航1</div>
                <ul>
                    <li>二级导航1 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                    <li>二级导航2</li>
                    <li>二级导航3</li>
                    <li>二级导航4</li>
                </ul>
            </div>
            <div class="nav-li">
                <div calss="title">一级导航1</div>
                <ul>
                    <li>二级导航1 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                    <li>二级导航2</li>
                    <li>二级导航3</li>
                    <li>二级导航4</li>
                </ul>
            </div>
            <div class="nav-li">
                <div calss="title">一级导航1</div>
                <ul>
                    <li>二级导航1 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                    <li>二级导航2</li>
                    <li>二级导航3</li>
                    <li>二级导航4</li>
                </ul>
            </div>
            <div class="nav-li">
                <div calss="title">一级导航1</div>
                <ul>
                    <li>二级导航1 <div class="list3">
                            <div class="item3">三级导航1</div>
                            <div class="item3">三级导航2</div>
                            <div class="item3">三级导航3</div>
                            <div class="item3">三级导航4</div>
                        </div>
                    </li>
                    <li>二级导航2</li>
                    <li>二级导航3</li>
                    <li>二级导航4</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

css网页布局案例分析
 
 html+css网页项目布局demo:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style> *{margin:0;padding:0;} header{width:100%;height:100px;} header img{width:300px;height:85px;padding-left:100px;padding-top:8px;} .loGo{float:left;} .nav{float:right;} .nav ul{padding-right:100px;} .nav ul li{float: left;list-style: none;width:80px;height:100px;line-height:100px;color:#333;} .main{position: relative;} .top{width:100%;height:600px;} .top img{width:100%;height:100%;} .topLayer{width:100%;height:600px;position: absolute;background-color: #000;opacity: .5;top:0;left:0;} .topLayer-top{width:500px;height:300px;position: absolute;top:280px;margin-top:-150px;z-index:2;left:50%;margin-left:-250px;} .Word{padding-top:100px;color:#fff;font-size: 45px;font-weight: bold; text-align: center;} .topLayer-top button{width:200px;height:60px;margin-top:50px;color:#fff;background-color: #f5704f;font-weight: bold;text-align: center;font-size: 14px;border-radius:8px;margin-left:150px;border: 1px solid #fff;cursor: pointer;} .topLayer-top button:hover{background-color: #fff;color:#f5704f;border: 1px solid #f5704f;} .middle{width:1000px;margin:0 auto;} .common{float: left;width:33.3%;padding-top:50px;text-align: center;} .common img{width:100px;height:100px;} .com{font-size:20px;color:#7d7c7f;padding-top:20px;} .m-middle{font-size:22px;color:#e19796;font-weight:bold;padding-top:50px;font-style: italic;text-align: center;padding-bottom:50px;} .clear{clear:both;} .m-bottom{margin-bottom:20px;} .m-com{float: left;padding:10px;text-align: center;} .m-com img{width:310px;height:260px;} .des1{font-size:20px;color:#7d7d7f;padding-top:20px;} .des2{font-size:20px;color:#bdbdbc;padding-top:20px;} .bottom{background-color: #f9f9f9;padding-bottom:30px;} .bottom .content{width:1000px;margin:0 auto;} .content .title{text-align: center;font-size: 20px;color:#7d7c7f;padding:50px 0 30px 0;font-weight:bold;} .pic-content dl{width:470px;float: left;margin:10px 12px;} .pic-content dl img{width:470px;height:460px;} .pic-content dd{padding-top:15px;font-size: 16px;color:#7d7c7f;} footer{width:100%;height:100px;background-color: #292c35;color:#fff;font-size: 15px;text-align: center;line-height:100px;}
    </style>
</head>
<body>
    <header>
        <div class="logo"><img src="img/logo.png" alt="logo"></div>
        <div class="nav">
            <ul>
                <li>首页</li>
                <li>图片</li>
                <li>视频</li>
                <li>手记</li>
            </ul>
        </div>
    </header>
    <div class="main">
        <div class="top">
            <img src="img/1.jpeg" alt="1">
        </div>
        <div class="topLayer"></div>
        <div class="topLayer-top">
            <div class="word">MY BEAUTIFUL LIFE</div>
            <button>LOOK MORE &gt;</button>    
        </div>
        <div class="middle">
            <div class="m-top">
                <div class="common weixin">
                    <img src="img/weixin.png" alt="weixin">
                    <div class="com">WECHAT</div>
                </div>
                <div class="common weibo">
                    <img src="img/weibo.png" alt="weibo">
                    <div class="com">MICROBLOG</div>
                </div>
                <div class="common qq">
                    <img src="img/qq.png" alt="qq">
                    <div class="com">QQ</div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="m-middle"> "I want to give good things to record down,<br>after the recall will be very beautiful." </div>
            <div class="m-bottom">
                <div class="m-com">
                    <img src="img/03-01.jpg" alt="">
                    <div class="des1">Cool Image</div>
                    <div Class="des2">Record The Picture</div>
                </div>
                <div class="m-com">
                    <img src="img/03-02.jpg" alt="">
                    <div class="des1">Great Picture</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="m-com">
                    <img src="img/03-03.jpg" alt="">
                    <div class="des1">Cool Image</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="bottom">
            <div class="content">
                <div class="title">FROM THE PHOTO ALBUM</div>
                <div class="pic-content">
                    <dl>
                        <dt><img src="img/04-01.jpg"></dt>
                        <dd>Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.</dd>
                    </dl>
                    <dl>
                        <dt><img src="img/04-02.jpg"></dt>
                        <dd>Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.</dd>
                    </dl>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        &copy; 2019 test.com 备案号xxxxxxxx号 </footer>
</body>
</html>

关于“css网页布局案例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“css网页布局案例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网html频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css网页布局案例分析

本文链接: https://www.lsjlt.com/news/93397.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • css网页布局案例分析
    这篇文章主要介绍了css网页布局案例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css网页布局案例分析文章都会有所收获，下面我们一起来看看吧。position:stati...
    99+
    2022-10-19
  • CSS布局方案的示例分析
    这篇文章给大家分享的是有关CSS布局方案的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。居中布局水平居中1）使用inline-block+text-align原理：先将子...
    99+
    2022-10-19
  • css Flexbox布局实例分析
    今天小编给大家分享一下css Flexbox布局实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。概念Flexbox是f...
    99+
    2023-06-30
  • CSS中Grid网格布局的示例分析
    这篇文章主要介绍CSS中Grid网格布局的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！介绍CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义...
    99+
    2022-10-19
  • DIV CSS网页布局开发参考规范的示例分析
    今天就跟大家聊聊有关DIV CSS网页布局开发参考规范的示例分析，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。你对DIV CSS网页布局开发参考规范...
    99+
    2022-10-19
  • CSS中flex布局实例分析
    这篇文章主要介绍“CSS中flex布局实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS中flex布局实例分析”文章能帮助大家解决问题。1. 浏览器 fl...
    99+
    2022-10-19
  • CSS图片布局实例分析
    这篇文章主要介绍了CSS图片布局实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS图片布局实例分析文章都会有所收获，下面我们一起来看看吧。层叠样式表(英文全称:Cascading Style Shee...
    99+
    2023-06-27
  • CSS中经典三栏布局方案的示例分析
    这篇文章主要介绍CSS中经典三栏布局方案的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1. float布局最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：&...
    99+
    2022-10-19
  • CSS中Gird布局的示例分析
    这篇文章主要介绍CSS中Gird布局的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！CSS网格布局是一个二维的基于网格的布局系统, 其目的在于完全改变我们设计基于网络的用户界...
    99+
    2022-10-19
  • CSS伸缩盒布局实例分析
    这篇文章主要介绍“CSS伸缩盒布局实例分析”，在日常操作中，相信很多人在CSS伸缩盒布局实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS伸缩盒布局实例分析”的疑惑...
    99+
    2022-10-19
  • h5新特性及网页布局的示例分析
    这篇文章主要介绍了h5新特性及网页布局的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。HTML5 中的一些有趣的新特性：用于绘画的 ...
    99+
    2022-10-19
  • CSS高级布局技巧实例分析
    今天小编给大家分享一下CSS高级布局技巧实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下...
    99+
    2022-10-19
  • css中sticker-footer布局的示例分析
    这篇文章将为大家详细讲解有关css中sticker-footer布局的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在网页设计中，Sticky footers设计...
    99+
    2022-10-19
  • css中双飞翼布局和圣杯布局的示例分析
    这篇文章主要为大家展示了“css中双飞翼布局和圣杯布局的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中双飞翼布局和圣杯布局的示例分析”这篇文章吧...
    99+
    2022-10-19
  • R语言绘图布局的案例分析
    本文将为大家详细介绍“R语言绘图布局的案例分析”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“R语言绘图布局的案例分析”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。在...
    99+
    2023-06-14
  • css网页有哪些布局
    这篇文章主要介绍了css网页有哪些布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1、左边固定，右边自适应布局的两种实现方式效果图如下：大...
    99+
    2022-10-19
  • css中flex弹性布局的示例分析
    这篇文章将为大家详细讲解有关css中flex弹性布局的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。案例基础布局html<ul class="box">&...
    99+
    2023-06-08
  • css布局之BFC模式的示例分析
    这篇文章主要为大家展示了“css布局之BFC模式的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css布局之BFC模式的示例分析”这篇文章吧。详解BFC...
    99+
    2022-10-19
  • Flex布局与缩放比例计算案例分析
    本篇文章为大家展示了Flex布局与缩放比例计算案例分析，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。一、Flex 布局简介Flex 是 Flexible Box 的缩写，意为"弹性布局&q...
    99+
    2023-06-08
  • CSS网格布局：使用网格布局创建复杂的网页布局
    CSS网格布局：使用网格布局创建复杂的网页布局，需要具体代码示例在现代的网页设计中，网页布局起着至关重要的作用。为了创建复杂的网页布局，设计师和开发人员需要使用优秀的工具和技术。其中，CSS网格布局是一种强大而灵活的方法，可以帮助我们轻松地...
    99+
    2023-11-18
    网格布局 CSS编程 复杂网页布局
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作