静态博客网页

最新推荐文章于 2023-07-23 22:01:36 发布

chonghan8991

最新推荐文章于 2023-07-23 22:01:36 发布

阅读量134

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4091210/blog/3021487

版权

div标签：

Html的标签，成对出现<div></div>

<div>定义页面上的一块区域，对整个页面划分区域用

常用的有id和class属性：<div id=“menu”></div>

Css样式：

引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css" />

css样式写法：选择器{ 属性1:属性1的值;… }

选择器分为：id选择器（#id）、class选择器（.class）、标签选择器（div）

写一个静态博客页面：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->

</head>

<body>
    <div id="box">
        <div id="banner">
            <img src="images/bg.jpg" alt="我的图片不见了" />

        </div>
        <div id="menu">
            我是菜单
        </div>
        <div id="main">
            <!--左边区域-->
               <div id="left">
                左边区域
            </div>
            <div id="right">
                右边区域
            </div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
#box{
    background-color:#F00;
    width:1024px;
    height:1300px;
    /*margin:0 auto;*/
    margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
    background-color:#66F;
    height:209px;
}
#menu{
    background-color:#C0F;
    height:50px;
}
#main{
    background-color:#6F6;
    height:1000px;
}
#left{
    background-color:#33F;
    height:1000px;
    width:250px;
    float:left;/*可以使div横向排排坐*/
}
#right{
    background-color:#F3F;
    height:1000px;
    width:774px;
    float:right;/*可以使div横向排排坐*/
}

#footer{
    background-color:#F63;
    height:80px;
}

转载于:https://my.oschina.net/u/4091210/blog/3021487

chonghan8991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
静态博客网页

div标签： Html的标签，成对出现<div></div> <div>定义页面上的一块区域，对整个页面划分区域用常用的有id和class属性：<div id=“menu”></div> Css样式：引用方式-外链式：&...
复制链接

扫一扫