我写的CSS(最基本的外框架)

最新推荐文章于 2023-07-23 23:56:20 发布

greatverve

最新推荐文章于 2023-07-23 23:56:20 发布

阅读量2.4k

点赞数

分类专栏： CSS学习文章标签： css border header 浏览器框架

本文链接：https://blog.csdn.net/greatverve/article/details/3518809

版权

CSS学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上中下，左中右，居中，这些布局方法是最基本的。

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>css基本布局方法</title>
    <style type="text/css">
        *
        {
            font-size:12px;
            font-family:verdana;
            margin:0px;/*--定义元素周围的空间*/
            padding:0px;/*--定义元素边框与元素内容之间的空白*/
        }
        #body
        {
            position:relative;
            width:85%;
            margin:3px auto;/*上下,左右,这里的左右就是居中*/
            height:100%;
        }
        #sidebar /*左边*/
        {
            position:absolute;
            left:0;
            top:0;
            width:200px;
        }
        #right
        {
            width:240px;
            position:absolute;
            right:0;
            top:0;
        }
        #center
        {
            margin:0 241px 0 201px;/*上右下左*/
        }
        #header,#footer
        {
            width:85%;
            margin:0 auto;/*由浏览器设置*/
            height:50px;
        }
        #sidebar,#right,#center,#header,#footer{border:solid 1px #000;}
        #sidebar,#right,#center{height:780px;}
    </style>
</head>
<body>
<div id="header">head</div>
<div id="body">
    <div id="sidebar">left<br />left<br /></div>
    <div id="center">center</div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
 

greatverve

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
我写的CSS(最基本的外框架)

上中下，左中右，居中，这些布局方法是最基本的。 html xmlns="http://www.w3.org/1999/xhtml" >head> title>css基本布局方法title> style type="text/css"> * { font-size:12px;
复制链接

扫一扫