HTML网页结构与样式实战-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43968510/article/details/100170392

Html总体宏观

<!-- 标注版本 -->
<!DOCTYPE html>
<!-- 一个网页的根节点 -->
<html lang="en">
<!-- 网页:头部 -->
<head>
    <!-- 网页的编码格式　-->
    <meta charset="UTF-8">
    <!-- 网页的标题 -->
    <title>百度一下, 你就知道</title>
    <!-- 页签 -->
    <link rel="shortcut icon" href="../images/0701/favicon_baidu.ico">
    <style>
        * {
            padding: 0px;
            /** 块级居中 */
            margin: auto;
        }
        #all{
            width:1349px;
            height:600px;
        }
        #header{
            width:483px;
            height:24px;
            /*outline:1px solid red;*/
            /** 绝对定位 */
            position:absolute;
            right:0px;
            top:0px;
            /** 外边距:上 右左 下 */
            margin: 19px 0px 10px;
            /** 字体居中*/
            text-align: center;
        }
        /** > 是后代选择器 */
        #header>a{
            display: block;
            height:24px;
            float:left;
            color: #333;
            font-size:13px;
            /** 设置字体类型 */
            font-family: "微软雅黑";
            font-weight: 700;
            margin-left:19px;
            margin-top:2px;
        }
        #moreProducts{
            width:60px;
            height:23px;
            background-color:  #38f;
            color: #fff!important;
            /* 去掉下划线 */
            text-decoration:none;
            position:relative;
            right:-10px;
            top:-2px;
            text-align: center;
            line-height:22px;
        }
    </style>
</head>
<!-- 网页:身体　-->
<body>
<!-- all-->
<div id="all">
    <!-- 头部 -->
    <div id="header">
        <a href="javascript:;" style="margin-left:20px;">新闻</a>
        <a href="javascript:;">hao123</a>
        <a href="javascript:;">地图</a>
        <a href="javascript:;">视频</a>
        <a href="javascript:;">贴吧</a>
        <a href="javascript:;">学术</a>
        <a href="javascript:;">登录</a>
        <a href="javascript:;">设置</a>
        <a href="javascript:;" id="moreProducts">更多产品</a>
    </div>
</div>
</body>
</html>

运行结果

在这里插入图片描述
使用到的知识点:
1.设置页签
rel="shortcut icon"是设置网页标题的图标
href是资源路径
2.margin:atuo 对块级元素有效,会使块级元素居中
ps:F12键查看源码

3.!important 提升优先级
优先级:内联(行内)样式 > id选择器样式 > 类选择器样式 > 元素选择器样式(外部样式)
4.margin 外边距
对于本案例中的绝对定位position:absolute,对于选择器,如 > 等后续展开