HTML5+CSS3学习

最新推荐文章于 2024-07-31 23:13:20 发布

mmn1

最新推荐文章于 2024-07-31 23:13:20 发布

阅读量511

点赞数 1

分类专栏： CSS3 HTML5

本文链接：https://blog.csdn.net/hellobupt/article/details/81022137

版权

CSS3 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

作为一个独立的前端开发，在制作网页时第一步就应该先规划好想要实现的页面架构以及对应版面的安排。而语义标记则是实现页面设计的一大法宝，但是由于语义标记是用来定义网页的架构的，让人们更好的检索。所以如果只是一些没有意义的内容应尽量避免语义标记。大多数情况下一个网页可以划分为：标题区、导航区、内容区、页脚区四个部分。对于分区的语义标记在下面一一列出：

标题区：<header>

导航区：<aside>（定义侧边栏）可以内嵌<nav>（网页链接菜单），在<nav>里面如果需要罗列标题的话可以利用<ul><li><a>对应内容</a></li></ul>。

内容区：<article>在内容的里面通过<section><fieldset>对应内容</fieldset></section>和<div>等语句进行页面分割。

页脚区：<footer>用来放置一些版权说明或者是联系方式。

通过上面的语义，并不能直接设置网页的结构。只是让搜索引擎更方便的检索到网页的内容。网页布局及尺寸需要利用CSS3进一步进行设计。以下的CSS设计采用了之前提到的《h5+C3+js》中内容。

body{
    margin: 0px;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}
#main{
    margin: 0px auto; /*水平居中*/
}
header{}
aside{
    width:
    float: left;    /*导航栏靠左显示*/
    background: url( );    /*加入背景图*/
}
nav{}
article{}
footer{
    border: 1px #330000 solid;
    background: #330000;
    color: #ffffff;
    width: 800px;
    height: 50px;
    text-align:center;   /*文字居中*/
    line-height: 50px;   /*行高*/
}

display 属性规定元素应该生成的框的类型。用于定义建立布局时元素生成的显示框类型。如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。根据《h5+C3+js》一书中的内容display: block指区块固定大小，当文字超过区块时，文字会换行。display: inline 则是文字超过区块时，区块会扩大。

自此跟着《HTML5+CSS3+JavaScript网页设计》学习的前两部分已经完结。