琼殿技术论坛»首页 › 前端开发技术交流 › HTML论坛 › 四十四：HTML5之HTML5页面布局案例
返回列表 发新帖
查看: 51|回复: 0

四十四：HTML5之HTML5页面布局案例

[复制链接]
哎呦喂说的就是你

2

主题

0

回帖

0

积分

热心网友

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2010-3-3
发表于 2021-1-16 15:52:00 | 显示全部楼层 |阅读模式

 

HTML5新布局的意义：

1.语义化：HTML5可以让更多语义化的结构代码标签代替大量的无异议的div标签

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

　　2.减少了以前用于CSS调用class和id属性

2.对搜索引擎的友好：新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好

 

HTML5之前的布局

HTML5布局

 

布局目标示例：

 

html结构

 

CSS

初始化样式和属性

/* 去除默认样式和初始化属性 */
*{margin: 0;padding: 0;border: none;font-family: Arial;font-size: 14px;}

/* 去掉超链接的下划线 */
a{text-decoration: none}

/* 去掉ul标签默认的· */
ul{list-style: none}

header部分

/* header块 */
header{height: 80px; background: #000}
/* 灰度条 */
header:after{}

/* header.container容器 */
header > .container{width: 1200px; margin: 0 auto /* 左右居中 */}

/* header.logo的a标签 */
header > .container > a{
    display: block; /* 把超链接变成块级元素 */
    float: left; /* 左浮动 */
    margin: 5px 25px;  /* 外边距，上下5，左右25 */
}
/* header.logo尺寸 */
header > .container > a > img{width: 198px; height: 73px;}

/* 导航条 */
header > .container > nav{float: right; /* 右浮动 */}
/* 导航条下的超链接 */
header > .container > nav > a{
    font-size: 24px;
    width: 110px;
    height: 73px;
    line-height: 73px;  /* 行高==高度，垂直居中 */
    text-align: center;  /* 左右居中 */
    display: block; /* 把超链接变成块级元素 */
    float: left; /* 右浮动 */
    color: #fff;  /* 文字白色 */
}
/* 菜单按钮背景 */
header > .container > nav > a.nav-a1{background: #433b90}
header > .container > nav > a.nav-a2{background: #017fcb}
header > .container > nav > a.nav-a3{background: #78b917}
header > .container > nav > a.nav-a4{background: #feb800}

/* 当前选中的超链接特效 */
header > .container > nav > a:hover,  /* 鼠标经过时触发 */
header > .container > nav > a.active{padding-bottom: 7px; /* 下边距7px */}

 

banner部分

/* banner部分 */
.banner{background: #eaeaea;}
/* ul标签 */
.banner > ul{
    position: relative; /* 相对定位 */
    width: 1490px;
    height: 538px;
    margin: 0 auto; /* 水平居中 */
    padding-top: 10px; /* 内边距为10px */
}
/* li标签，图片尺寸 */
.banner > ul > li{
    position: absolute; /* 绝对定位 */
    width: 610px;
    height: 300px;
    overflow: hidden; /* 溢出部分隐藏 */
}
/* 分别控制每张banner */
/* 中间激活的banner */
.banner > ul > li.active{
    z-index: 2;  /* 标记位置 */
    top: 37px; /* 距上边37px */
    /* 左右都为0，则把图片水平居中 */
    right: 0;
    left: 0;
    /* 图片尺寸 */
    width: 960px;
    height: 460px;
    margin: auto;
    border: 1px solid #fff;  /* 边框 */
}
/* 左侧的banner */
.banner > ul > li.left{
    z-index: 1;  /* 标记位置 */
    /* 上下为0，则实现垂直居中 */
    top: 0;
    bottom: 0;
    left: 0; /* 靠左 */
    margin: auto;
}
/* 右侧的banner */
.banner > ul > li.right{
    z-index: 1;  /* 标记位置 */
    /* 上下为0，则实现垂直居中 */
    top: 0; bottom: 0;
    right: 0; /* 靠右 */
    margin: auto;}
/* 图片位置 */
.banner > ul > li > img{position: absolute; /* 绝对定位 */ left: -30%; height: 100%;}

页面主体

 

页脚部分

/*页脚*/
footer{background: #000;}
footer > .container{width: 1200px;height: 64px;margin: 0 auto;}
/* 左边 */
footer > .container > p{line-height: 64px; /* 行高与容器一致，垂直居中 */ float: left; /* 左浮动 */ color: #fff;}
/* 右边图标 */
/* span标签 */
footer > .container > span{float: right;margin: 14px 40px; /* 上面14px，右边40px */}
/* 图片 */
footer > .container > span > img{margin-left: 4px;opacity: .7; /* 透明度0.7 */}
/* 当鼠标经过图片的时候 */
footer > .container > span > img:hover{opacity: 1; /* 透明度1 */ cursor: pointer;  /* 鼠标变小手 */}

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="container">
            <a href="#">
                <img src="logo.jpg" alt="">
            </a>
            <nav>
                <a href="#" class="nav-a1">home</a>
                <a href="#" class="nav-a2">菜单一</a>
                <a href="#" class="nav-a3">菜单二</a>
                <a href="#" class="nav-a4">菜单三</a>
            </nav>
        </div>
    </header>

    <!-- banner -->
    <section class="banner">
        <ul>
            <li class="active"><img src="banner1.jpg" alt=""></li>
            <li class="left"><img src="banner2.jpg" alt=""></li>
            <li class="right"><img src="banner3.jpg" alt=""></li>
        </ul>
    </section>

    <!-- 主体 -->
    <section class="main">
        <!-- 侧边栏 -->
        <aside>
            <h1>Recent <samp>Course</samp> </h1>
            <dl>
                <dt>标题1</dt>
                <dd><img src="05.png" alt=""></dd>
                <dd>内容1，内容1，内容1，内容1，内容1，内容1，内容1，内容1，内容1，内容1，内容1，内容1</dd>
            </dl>
            <dl>
                <dt>标题2</dt>
                <dd><img src="04.png" alt=""></dd>
                <dd>内容2，内容2，内容2，内容2，内容2，内容2，内容2，内容2，内容2，内容2，内容2，内容2</dd>
            </dl>
            <dl>
                <dt>标题3</dt>
                <dd><img src="07.png" alt=""></dd>
                <dd>内容3，内容3，内容3，内容3，内容3，内容3，内容3，内容3，内容3，内容3，内容3，内容3</dd>
            </dl>
            <dl>
                <dt>标题4</dt>
                <dd><img src="09.png" alt=""></dd>
                <dd>内容4，内容4，内容4，内容4，内容4，内容4，内容4，内容4，内容4，内容4，内容4，内容4</dd>
            </dl>
        </aside>

        <!-- 文章栏 -->
        <article>
            <h1>Recent <samp>Course</samp> </h1>
            <p>
                第一段内容，第一段内容，第一段内容，第一段内容，第一段内容，第一段内容，
                第一段内容，第一段内容，第一段内容，第一段内容，第一段内容，第一段内容
            </p>
            <img src="article.png" alt="">
            <p>
                第二段内容，第二段内容，第二段内容，第二段内容，第二段内容，第二段内容，
                第二段内容，第二段内容，第二段内容，第二段内容，第二段内容，第二段内容
            </p>
            <p>
                第三段内容，第三段内容，第三段内容，第三段内容，第三段内容，第三段内容，
                第三段内容，第三段内容，第三段内容，第三段内容，第三段内容，第三段内容
            </p>
        </article>
    </section>

    <!--页脚-->
    <footer>
        <div class="container">
            <p>Copyright</p>
            <span>
                <img src="qq.png" alt="">
                <img src="sina.png" alt="">
                <img src="weichat.png" alt="">
            </span>
        </div>
    </footer>

</body>
</html>

 

CSS

/* 去除默认样式和初始化属性 */
*{margin: 0;padding: 0;border: none;font-family: Arial;font-size: 14px;}

/* 去掉超链接的下划线 */
a{text-decoration: none}

/* 去掉ul标签默认的· */
ul{list-style: none}

/* header块 */
header{height: 80px; background: #000}
/* 灰度条 */
header:after{}

/* header.container容器 */
header > .container{width: 1200px; margin: 0 auto /* 左右居中 */}

/* header.logo的a标签 */
header > .container > a{
    display: block; /* 把超链接变成块级元素 */
    float: left; /* 左浮动 */
    margin: 5px 25px;  /* 外边距，上下5，左右25 */
}
/* header.logo尺寸 */
header > .container > a > img{width: 198px; height: 73px;}

/* 导航条 */
header > .container > nav{float: right; /* 右浮动 */}
/* 导航条下的超链接 */
header > .container > nav > a{
    font-size: 24px;
    width: 110px;
    height: 73px;
    line-height: 73px;  /* 行高==高度，垂直居中 */
    text-align: center;  /* 左右居中 */
    display: block; /* 把超链接变成块级元素 */
    float: left; /* 右浮动 */
    color: #fff;  /* 文字白色 */
}
/* 菜单按钮背景 */
header > .container > nav > a.nav-a1{background: #433b90}
header > .container > nav > a.nav-a2{background: #017fcb}
header > .container > nav > a.nav-a3{background: #78b917}
header > .container > nav > a.nav-a4{background: #feb800}

/* 当前选中的超链接特效 */
header > .container > nav > a:hover,  /* 鼠标经过时触发 */
header > .container > nav > a.active{padding-bottom: 7px; /* 下边距7px */}


/* banner部分 */
.banner{background: #eaeaea;}
/* ul标签 */
.banner > ul{
    position: relative; /* 相对定位 */
    width: 1490px;
    height: 538px;
    margin: 0 auto; /* 水平居中 */
    padding-top: 10px; /* 内边距为10px */
}
/* li标签，图片尺寸 */
.banner > ul > li{
    position: absolute; /* 绝对定位 */
    width: 610px;
    height: 300px;
    overflow: hidden; /* 溢出部分隐藏 */
}
/* 分别控制每张banner */
/* 中间激活的banner */
.banner > ul > li.active{
    z-index: 2;  /* 标记位置 */
    top: 37px; /* 距上边37px */
    /* 左右都为0，则把图片水平居中 */
    right: 0;
    left: 0;
    /* 图片尺寸 */
    width: 960px;
    height: 460px;
    margin: auto;
    border: 1px solid #fff;  /* 边框 */
}
/* 左侧的banner */
.banner > ul > li.left{
    z-index: 1;  /* 标记位置 */
    /* 上下为0，则实现垂直居中 */
    top: 0;
    bottom: 0;
    left: 0; /* 靠左 */
    margin: auto;
}
/* 右侧的banner */
.banner > ul > li.right{
    z-index: 1;  /* 标记位置 */
    /* 上下为0，则实现垂直居中 */
    top: 0; bottom: 0;
    right: 0; /* 靠右 */
    margin: auto;}
/* 图片位置 */
.banner > ul > li > img{position: absolute; /* 绝对定位 */ left: -30%; height: 100%;}


/* 页面主体 */
.main{width: 1200px;height: 473px;margin: 34px auto 0;}
/* 统一设置h1标签的字体（标题） */
.main h1{font-size: 30px;font-weight: lighter;margin-bottom: 23px;  /* 下边距23px */}
.main h1 > samp{font-size: 30px;color: #7c7c7c;}

/* 左侧标题 */
.main aside{float: left;  /* 左浮动 */ width: 450px;}

/* 把dd标签的图片放到dt标签的标题前面 */
.main > aside > dl{
    position: relative;  /* 相对定位，给后面的dt、dd绝对定位使用 */
    display: block;  /* 改为块级元素 */
    height: 74px; margin-bottom: 17px;  /* 下边距 */
}
/* dt标签 */
.main > aside > dl > dt{
    position: absolute; /* 绝对定位 */ top: -1px;left: 92px;
    /* 文字部分 */
    font-size: 16px;font-weight: bold;line-height: 16px;text-decoration: underline;  /* 下划线 */
}
/* dd标签, dd:first-of-type: 选择属于其父元素的首个元素，即dl下的第一个dd */
.main > aside > dl > dd:first-of-type{position: absolute;left: 0;}

/* dd标签, dd:last-of-type: 选择属于其父元素的最后一个元素，即dl下的最后一个dd */
.main > aside > dl > dd:last-of-type{position: absolute;top: 20px;left: 90px;}

/* 文章内容 */
.main article{float: right;  /* 右浮动 */ width: 720px;overflow: hidden; /* 溢出部分隐藏 */}
/* 统一设置下边距 */
.main > article > p,
.main > article > img{margin-bottom: 20px;}


/*页脚*/
footer{background: #000;}
footer > .container{width: 1200px;height: 64px;margin: 0 auto;}
/* 左边 */
footer > .container > p{line-height: 64px; /* 行高与容器一致，垂直居中 */ float: left; /* 左浮动 */ color: #fff;}
/* 右边图标 */
/* span标签 */
footer > .container > span{float: right;margin: 14px 40px; /* 上面14px，右边40px */}
/* 图片 */
footer > .container > span > img{margin-left: 4px;opacity: .7; /* 透明度0.7 */}
/* 当鼠标经过图片的时候 */
footer > .container > span > img:hover{opacity: 1; /* 透明度1 */ cursor: pointer;  /* 鼠标变小手 */}

 
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|琼殿技术论坛 |nimba_sitemap:appname

相关侵权、举报、投诉及建议等，请发 E-mail：qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部