前端技术之页面布局

最新推荐文章于 2023-07-27 07:30:00 发布

码上学习笔记

最新推荐文章于 2023-07-27 07:30:00 发布

阅读量375

点赞数 2

分类专栏： JavaEE之前端技术文章标签： html5 css

本文链接：https://blog.csdn.net/qq_36279562/article/details/108528813

版权

JavaEE之前端技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

网页布局

三种传统PC端⽹⻚布局⽅式：
- 传统的DIV+CSS布局
- HTML5+CSS3布局
- 响应式布局

1. DIV+CSS布局

此种布局是⽹⻚的HTML通过DIV标签+CSS样式表代码开发制作的(HTML)⽹⻚的统称。

DIV+CSS布局好处：便于维护，有利的SEO（⾕歌将⽹⻚打开速度作为排名因素及SEO因素），

⽹页打开速度还原，符合web标准等。

程序示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DIV+CSS传统页面布局</title>

        <style>
            /*公共的CSS样式*/
            *{margin: 0px;padding: 0px;}
            a{text-decoration: none;}
            ul{list-style: none;}

            /*页面头部样式*/
            #header{
                position: fixed;
                top:0px;
                height:80px;
                width: 100%;
                border-bottom: 1px solid #46474a;
            }

            #header .header-nav{
                height: 80px;
                width: 1000px;
                background-color: goldenrod;
                margin: 0px auto;
            }

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

            /*页面主体样式*/
            #container{
                width: 100%;
            }
            #container .content{
                width: 1000px;
                margin: 50px auto 0px;

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

            }

            /*页面主体中的电影排行列表样式*/
            #container .content .main ul li{
                display: block;
                height: 220px;
                line-height: 220px;
                width: 100%;
                margin-bottom: 20px;

            }

            .main ul li .info{
                height: 100%;
                width: 680px;
                float: right;
                background-color:snow ;
                border-bottom: 1px solid #ededed;
            }

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

            .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: 300px;
                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-right"></div>
                                <div class="info-left"></div>
                            </div>
                            <div class="ids"></div>
                            <div class="pic"></div>
                        </li>
                       <li>
                           <div class="info">
                               <div class="info-right"></div>
                               <div class="info-left"></div>
                           </div>
                           <div class="ids"></div>
                           <div class="pic"></div>
                       </li>
                        <li>
                            <div class="info">
                                <div class="info-right"></div>
                                <div class="info-left"></div>
                            </div>
                            <div class="ids"></div>
                            <div class="pic"></div>
                        </li>
                        <li>
                            <div class="info">
                                <div class="info-right"></div>
                                <div class="info-left"></div>
                            </div>
                            <div class="ids"></div>
                            <div class="pic"></div>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul> <!-- 电影排行列表结束 -->
                </div>
            </div>
        </div><!-- 页面主体结束 -->
        <!-- 页面尾部开始 -->
        <div id="footer"></div>
        <!-- 页面主体结束 -->
    </body>
</html>

2. HTML5+CSS3布局

HTML5 可以让很多更语义化的结构化代码标签代替⼤量⽆意义的 div 标签

这种语义化的特性提升了⽹⻚的质量和语义

减少了以前⽤于CSS 调⽤的class 和 id 属性

对搜索引擎的友好新的结构标签带来的是⽹⻚布局的改变及提升对搜索引擎的友好。

HTML5的新标签元素有：

 <header> 定义页⾯或区段的头部；

 <footer> 定义页⾯或区段的尾部；

 <nav> 定义页⾯或区段的导航区域；

 <section> 页⾯的逻辑区域或内容组合；

 <article> 定义正⽂或⼀篇完整的内容；

 <aside> 定义补充或相关内容；

注意：使⽤HTML5 语义化标签的布局模式在IE9以下浏览器不兼容，可使⽤下⾯的代码解决。

3. 响应式布局

第⼀种：直接在⻚头中使⽤CSS样式修饰。

<style type="text/css">
 /* 宽度范围 最⾼度*/


 @media all and (min-width:300px) and (max-width:800px){

 body{

 color:red;

 }

 }

 @media all and (min-width:100px) and (max-width:300px){

 body{

 color:green;

 }

 }

</style>

第⼆种：导⼊不同的css样式⽂件

<link media="all and (min-width:300px) and (max-width:800px)" rel="stylesheet"

href="my.css" />

<link media="all and (min-width:100px) and (max-width:200px)" rel="stylesheet"

href="test.css" />

程序示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div.dd{
                border: 1px solid red;
                width: 1200px;
                margin: 0px auto;
            }
            ul{list-style:none;}
            ul li{
                width:180px;
                height:300px;
                margin:5px;
                float:left;
                border:1px solid yellow;
            }
            @media all and (min-width:501px) and (max-width:1000px){
                div.dd{width:980px}
                ul li{border-color:green;}
            }
            @media all and (min-width:0px) and (max-width:500px){
                div.dd{width:450px}
                ul li{border-color:red;}
            }
        </style>
    </head>
    <body>
        <h1>响应式布局</h1>
        <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>
                <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>

码上学习笔记

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端技术之页面布局

目录网页布局1. DIV+CSS布局程序示例2. HTML5+CSS3布局3. 响应式布局程序示例网页布局三种传统PC端⽹⻚布局⽅式：传统的DIV+CSS布局 HTML5+CSS3布局响应式布局 1. DIV+CSS布局此种布局是⽹⻚的HTML通过DIV标签+CSS样式表代码开发制作的(HTML)⽹⻚的统称。DIV+CSS布局好处：便于维护，有利的SEO（⾕歌将⽹⻚打开速度作为排名因素及SEO因素），⽹页
复制链接

扫一扫