您的位置：首页 > Web前端 > CSS

使用CSS和HTML编写一个基本的Web框架

2015-10-13 19:07 741 查看

<!DOCTYPE html>  #文档类型，不写有时候浏览器会乱码
<html lang="en">  #文档语言
<head>  #头部
<meta charset="UTF-8">  #编码
<title>我的框架</title>  #打开后在浏览器上方显示标题
<style type="text/css">  #类型为Css

html,body {  /*注释，是一个标签选择器，给html和body标签添加元素效果*/
height: 100%;  #高为满屏
margin: 0;  /*边界线为0 */
}

.container{   /*类选择器，给外层部分设置元素效果*/
height: 100%;
}

.header{  /*注释，类名的定义必须要加点，在下面引用的时候不需要加点*/
height: 30px;
background: oldlace;  /*定义背景色*/
}

.content{   /*给主体部分设置元素效果*/
border: 1px dotted;  #定义边界线的样式和宽度
height: 100%;
}

.left_content{
background: #265a88;
width: 15%;
height: 100%;
float: left; /* 浮动效果，会占满其width+height部分*/
}
.right_content {
width: 85%;
height: 100%;
background: #adadad;
float: left;
}

.end{
background: red;
height: 10px dotted;
}
</style>
</head>
<body>

<div class="container"> <!--外层开始，调用类container填充自己-->
<div class="header">   <!--头部开始，调用类header-->
<h3>头部</h3>
</div>  <!--头部结束-->

<div class="content">  <!--主体开始，调用类content-->
<div class="left_content"> <!-- 左侧开始，调用类left_content-->
<h3>左侧</h3>
</div>  <!-- 左侧结束 -->

<div class="right_content"> <!-- 右侧开始调用类right_content -->
<h3>右侧</h3>
</div> <!--右侧结束 -->
</div>  <!-- 主体结束 -->

<div class="end"> <!-- 底部开始，调用类end-->
<h3>底部</h3>
</div> <!-- 底部结束 -->

</div> <!-- 外层结束 -->
</body>
</html>

用浏览器执行结果：

本文出自 “Linux” 博客，请务必保留此出处http://zhangshijie.blog.51cto.com/806066/1702626

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航