JavaEE笔记——前端基础之页面布局

时间:2024-03-14 13:47:23

目录

网页布局

1. DIV+CSS布局

程序示例

2. HTML5+CSS3布局

3. 响应式布局

程序示例


网页布局

  • 三种传统PC端⽹⻚布局⽅式:

    • 传统的DIV+CSS布局

    • HTML5+CSS3布局

    • 响应式布局

1. DIV+CSS布局

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

DIV+CSS布局好处:便于维护,有利的SEO(⾕歌将⽹⻚打开速度作为排名因素及SEO因素),

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

JavaEE笔记——前端基础之页面布局

程序示例

<!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 标签

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

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

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

HTML5的新标签元素有:

 <header> 定义页⾯或区段的头部;
​
 <footer> 定义页⾯或区段的尾部;
​
 <nav> 定义页⾯或区段的导航区域;
​
 <section> 页⾯的逻辑区域或内容组合;
​
 <article> 定义正⽂或⼀篇完整的内容;
​
 <aside> 定义补充或相关内容;

JavaEE笔记——前端基础之页面布局

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

JavaEE笔记——前端基础之页面布局

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>