【WEB】实战之html与css扁平化风格博客

最新推荐文章于 2025-06-08 14:20:56 发布

WHUZXQ

最新推荐文章于 2025-06-08 14:20:56 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/WHUZXQ/article/details/76620700

Web 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了如何使用HTML5和CSS实现网页布局，包括通过normalize.css确保跨浏览器样式一致性、利用新标签如<header>和<nav>进行结构化布局、解决布局中的常见问题如元素浮动和清除、以及美化界面等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.重置样式及文件结构

目的：使样式在不同浏览器下保持一致。

如果将系统样式全部清零，那相当于是无论好坏一并打死，并不是一个很好的解决方案，因此使用normalize.css(常规化).

用法：引入：
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">

2.布局

（1）头部：导航页面的布局

首先使用了< header >标签进行包裹，内部放置< nav >

 <header>
        <nav>
            <ul>
                <li class="logo"><a  href="#">张小窝</a></li>
                <li><a href="#">111</a></li>
                <li><a href="#">111</a></li>
                <li><a href="#">111</a></li>
            </ul>

        </nav>
        <div id="banner"></div>
   </header>

header是html5中的新标签，用来定义文档的页眉（介绍信息）。
nav标签定义导航链接的部分。

css部分：包括两个重点

1.去除ul，li自身样式
2.解决用户只能用过点击文字访问链接的问题

nav ul{
    list-style:none;//去除自带样式
    margin:0;

}
nav ul li{
    display:inline-block;//设为内联后，将会横排显示
    line-height: 50px;
    float:right;
    margin-right: 20px;
}

nav ul li a{
    line-height: 50px;
    text-decoration: none;
    display:inline-block;//设置为内联样式后，就可以改变其高度
    height: inherit;//高度设为继承上层父级元素，达到了2的目的
}
nav ul li.logo{
    float:left;
}

（2）内容

布局没有难度，具体如下：

<div id="banner">
   <div class="inner">
    <h1>张小窝</h1>
    <p class="sub-reading">ffff</p>
    <button>了解我</button>
    <div class="more">更多</div>
   </div>           
</div>

css有如下需要注意的地方：

1.使内容显示在界面的中上部

2.去掉button自带的样式

banner .inner{
    max-width: 300px;
    text-align: center;//文字居中
    margin: auto;//布局居中
    position: relative;//控制内容到顶部的距离
    top:160px;
}

#banner .inner h1
{
    margin:0;
}

button{
    border:none;
    background-color: #333;
    color:#eee;
    padding:10px;
}

3.界面效果

参考网址：https://html5up.net/spectralbu‘huo

4.其他CSS知识点盘点

1.img

img的大小不受父元素的约束，会有可能溢出父容器，因此要注意同时设置Img的大小。

2.清除浮动（重要）

.wrapper:after{
    content:''
    display:block;
    clear:both;
}

3.< section >
h5新标签，用于标识断落

4.div间无缘无故产生的空隙

如果经过检查不是margin或者padding的原因，可以尝试设置font-size=0，因为空隙可能是不同组件之间的行间距不同导致的空隙的产生。

5.控制两个元素并列显示
.element{
float:left;
width:50%;
box-sizing:border-box
}

6.筛选

.class:first-child
.class:nth-child(2)
.class:nth-child(3)

7.背景图片的控制

background-attachment:fixed;//背景图片固定，不随滚动而滚动
background-repeat:no-repeat;//关闭默认的重复显示
background-size:cover;//设置平铺
background-position:center center;//图片居中