Java复习打卡day33

最新推荐文章于 2024-09-14 22:46:39 发布

weixin_51630304

最新推荐文章于 2024-09-14 22:46:39 发布

阅读量78

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/weixin_51630304/article/details/115759811

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS用户界面的多栏属性，展示了如何使用HTML5语义化标签进行网页布局，以及详细讲解了响应式布局的实现。通过实例代码，读者可以理解如何利用CSS对网页进行固定头部、导航、主体内容和底部的布局，以及如何通过媒体查询实现不同屏幕尺寸下的适配。此外，还讨论了HTML5中如<header>, <nav>, <section>和<footer>等语义化标签对网页可读性和搜索引擎优化的重要性。

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

CSS用户界面多栏属性介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>框架标签</title>
</head>
<body>
    <h1>HTML框架标签：iframe</h1>
    <ul>
        <li><a href="c.html" target="myframe">表单标签实例</a></li>
        <li><a href="e.html" target="myframe">图片标签实例</a></li>
        <li><a href="f.html" target="myframe">表格标签实例</a></li>
    </ul>    
    <iframe src="./f.html" frameborder="1" name="myframe" width="80%" height="500px"></iframe>
</body>
</html>

网页布局的介绍

DIV+CSS网页布局

这一串代码很长，但是都是本人一个字一个字打出来的，大家谨用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV+CSS传统网页布局1</title>
    <style>
        *{margin:0px;padding:0px;}
        a{text-decoration: none;}
        ul{list-style:none;}

        /* 头部样式 */
        #header{
            position: fixed;
            width: 100%;
            top: 0px;
            border: 1px, solid, #46474a;
        }
        #header .header-nav{
            margin: 0px, auto;
            height: 80px;
            width: 100%;
            background-color: goldenrod;

        }

        /* 导航样式 */
        #nav{
            margin-top: 81px;
            width: 100%;
            height: 60px;
            background-color: #46474a;
        }

        /* 页面主体样式 */
        #contianer{
            width: 100%;
        }

        #container .content{
            width: 1200px;
            margin: 0 auto;
            margin-top: 50px;
        }

        #container .content .main{
            width: 950px;
            margin: 0 auto;
        }

        /* 主体当中的电影列表样式 */
        #container .content .main ul li{
            height: 220px;
            line-height: 220px;
            width: 100%;
            display: block;
            margin-bottom: 20px;
            border: 1px dashed  #f60;
        }
        
        .main ul li .info{
            height: 100%;
            width: 680px;
            float: right;
            background-color: snow;
            border-bottom:1px solid  #aaa;
        }

        .main ul li .info .info-right{
            width: 80px;
            height: 80px;
            border: 1px dashed orange;
            float: right;
            margin-top: px;
        }
        .main ul li .info .info-left{
            width: 300px;
            height: 120px;
            border:1px dashed orange;
            margin-top: 50px;
        }

        .main ul li .ids{
            height: 50px;
            width: 50px;
            margin-top: 85px;
            margin-bottom: 85px;
            background-color: orange;
            display: inline-block;
        }

        .main ul li .pic{
            height: 200px;
            width: 160px;
            margin: 10px 25px;
            border: 1px dashed green;
            display: inline-block;
        }

        /* 页面尾部样式 */
        #footer{
            height: 340px;
            width: 100%;
            bottom: 0;
            background-color: #46474a;
        }
    </style>
</head>
<body>
    <!-- 网页头部开始 -->
    <div id="header">
        <div class="header-nav">
            <h2>用DIV+CSS布局模式实现《猫眼电影》榜单排行榜的页面</h2>
            网址：https://maoyan.com/board
        </div>
    </div>
    <!-- 网页头部结束 -->
    <!-- 导航开始 -->
    <div id="nav"></div>
    <!-- 导航部分结束 -->
    <!-- 网页主体部分开始 -->
    <div id="container">
        <div class="content">
            <div class="main">
                <ul>
                    <li>
                        <div class="info">
                            <div class="info-left"></div>
                            <div class="info-right"></div>
                        </div>
                        <div class="ids"></div>
                        <div class="pic"></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="info-left"></div>
                            <div class="info-right"></div>
                        </div>
                        <div class="ids"></div>
                        <div class="pic"></div>
                    </li>
                    <li><div class="info">
                        <div class="info-left"></div>
                        <div class="info-right"></div>
                    </div>
                    <div class="ids"></div>
                    <div class="pic"></div></li>
                    <li><div class="info">
                        <div class="info-left"></div>
                        <div class="info-right"></div>
                    </div>
                    <div class="ids"></div>
                    <div class="pic"></div></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 网页主体部分结束 -->
    <!-- 网页尾部开始 -->
    <div id="footer"></div>
    <!-- 网页尾部结束 -->
</body>
</html>

HTML5语义化标签布局

意思是说，将上面的html代码里的几个头标签换成header,nav,section,footer.然后浏览器依旧能识别。

这种模式对程序员来说，并没多大好处，但是对访客来说，非常方便的查询代码。

响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <style>
        div.dd{
            margin: 0 auto;
            width: 1200px;
            border: 1px solid red;
        }
        ul{list-style: none;}
        ul li{
            margin: 5px;
            height: 300px;
            width: 200px;
            border: 1px solid #ddd;
            float: left;
        }
        
        @media all and (min-width:500px) and (max-width:1000px){
            div.dd{width: 900;border-color: hotpink;}
            ul li{border-color: green;}
        }

        @media all and (min-width:0) and (max-width:500px){
            div.dd{width: 450px;}
            ul li{border-color: hotpink;}
        }
    </style>
</head>
<body>
    <div class="dd">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div style="clear: both; width: 100%; height: 1px;"></div>
    </div>
</body>
</html>