简单制作的 html网站布局案例 全中文标注【个人学习案例1】

html部分:

<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>

<div id="全局">
    <div class="首页上面">
            <div class="logo标志">
                标志
                </div>
                
                    <div class="竖距"></div>
                        
                <div class="菜单">
                菜单
                </div>
                
                    <div class="竖距"></div>
                
                <div class="注册登录">
                注册
                </div>
        </div>
        
            <div class="横距"></div>
        
        <div class="首页中间">
            <div class="最新文章">
                文章
                </div>
                
                <div class="竖距"></div>
                
                <div class="热门文章">
                文章
                </div>
        </div>
        
            <div class="横距"></div>
        
        <div class="首页下面">
            <div class="页脚">
                页脚
                </div>
        </div>
</div>

</body>
</html>

css部分:

@charset "UTF-8";
body {
        padding:0;
        margin:0;
        line-height:center;
}

/*全局开头*/
#全局 {
        width:960px;
        margin:0 auto;
        line-height:left;
        background:#abc;
        
}
.竖距 {
        float:left;
        width:10px;
        height:100px;
}
.横距 {
        float:left;
        width:100%;
        height:10px;
}
/*首页上面部分*/
.首页上面 {
        width:100%;
        height:100px;
}
.logo标志 {
        float:left;
        width:220px;
        height:100px;
        background:#aaa;
}
.菜单 {
        float:left;
        width:500px;
        height:100px;
        background:#aaa;
}
.注册登录 {
        float:left;
        width:220px;
        height:100px;
        background:#aaa;
}
/*首页中间部分*/
.首页中间 {
        width:100%;
        height:500px;
}
.最新文章 {
        float:left;
        width:700px;
        height:490px;
        background:#eee;
}
.热门文章 {
        float:left;
        width:250px;
        height:490px;
        background:#eee;
}

/*首页下面部分*/
.首页下面 {
        width:100%;
        height:110px;
}
.页脚 {
        float:left;
        width:960px;
        height:100px;
        background:#515151;
}

效果图片:
简单制作的 html网站布局案例 全中文标注【个人学习案例1】

可能对你有帮助的内容:金币获取 | v7a,v8a,all等APK版本怎么选? | 下载帮助 | 阿里云代金券

文章名称:简单制作的 html网站布局案例 全中文标注【个人学习案例1】

文章链接:https://www.jipinsoft.com/1860.html

免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

(0)
打赏
番茄小子的头像番茄小子盟友
上一篇 2019年11月2日
下一篇 2019年11月2日

相关推荐

发表回复

登录后才能评论