• 所有问题

    • HTML与CSS代码写出一个简单的页面框架

    如题所述

    举报该问题
    推荐答案   推荐于2017-10-15
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基本框架结构</title>
    <style type="text/css">
    * { margin:0; padding:0; }
    body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:150%; }
    ul { list-style:none; }
    img { border:0 none; }
    a { text-decoration:none; color:#333; }
    h1 { font-size:18px; }
    h2 { font-size:14px; }
    h3 { font-size:14px; font-weight:normal; }
    h4 { font-size:12px; }
    h5 { font-size:12px; font-weight:normal; }
    .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0; }

    #container{ margin:0 auto; width:960px; }
    /*header*/
    #header { height:100px; background:#cf0; }
    #header h1 { padding:10px 20px; }
    #nav { background:#FF6600; height:35px; margin-bottom:6px; padding:5px; }
    #nav ul li { float:left; }
    #nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none; }
    #nav ul li a:hover { text-decoration:underline; background:#06F; color:#FFF; }
    /*main*/
    #mainContent { overflow:auto; zoom:1; margin-bottom:6px; }
    #side { width:200px; float:left; }
    .sidebox { border:1px solid #ed6400; margin-bottom:6px; }
    .sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff; }
    .sidebox ul { padding:4px 6px; }
    #main { width:742px; float:right; }
    .mainbox { border:1px solid #ed6400; margin-bottom:6px; }
    .mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff; }
    .mainbox ul { padding:4px 6px; }
    /*footer*/
    #footer { border-top:3px solid #0CF; height:50px; text-align:center; padding:6px; color:#999; }

    </style>
    </head>
    <body>

    <div id="container">
    <div id="header">
    <h1>头部</h1>
    <!-- end #header -->
    </div>
    <div class="clearfloat"></div>
    <div id="nav">
    <ul>
    <li><a href="#">导航一</a></li>
    <li><a href="#">导航二</a></li>
    <li><a href="#">导航三</a></li>
    <li><a href="#">导航四</a></li>
    <li><a href="#">导航五</a></li>
    </ul>
    <!-- end #nav -->
    </div>
    <div id="Content">
    <div id="side">
    <div class="sidebox">
    <h4>块标题</h4>
    <ul>
    块内容
    </ul>
    </div>
    <!-- end #side -->
    </div>
    <div id="main">
    <div class="mainbox">
    <h2>块标题</h2>
    <ul>
    块内容
    </ul>
    </div>
    <!-- end #main -->
    </div>
    <!-- end #fContent -->
    </div>
    <div class="clearfloat"></div>
    <div id="footer"> 底部
    <!-- end #footer -->
    </div>
    <!-- end #container -->
    </div>
    </body>
    </html>

    自己把样式放进css文件里面
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2019-03-10
    <!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>
    <meta
    http-equiv="Content-Type"
    content="text/html;
    charset=utf-8"
    />
    <title>基本框架结构</title>
    <style
    type="text/css">
    *
    {
    margin:0;
    padding:0;
    }
    body
    {
    margin:0
    auto;
    font-size:12px;
    font-family:Verdana;
    line-height:150%;
    }
    ul
    {
    list-style:none;
    }
    img
    {
    border:0
    none;
    }
    a
    {
    text-decoration:none;
    color:#333;
    }
    h1
    {
    font-size:18px;
    }
    h2
    {
    font-size:14px;
    }
    h3
    {
    font-size:14px;
    font-weight:normal;
    }
    h4
    {
    font-size:12px;
    }
    h5
    {
    font-size:12px;
    font-weight:normal;
    }
    .clearfloat
    {
    clear:both;
    height:0;
    font-size:
    1px;
    line-height:
    0;
    }
    #container{
    margin:0
    auto;
    width:960px;
    }
    /*header*/
    #header
    {
    height:100px;
    background:#cf0;
    }
    #header
    h1
    {
    padding:10px
    20px;
    }
    #nav
    {
    background:#FF6600;
    height:35px;
    margin-bottom:6px;
    padding:5px;
    }
    #nav
    ul
    li
    {
    float:left;
    }
    #nav
    ul
    li
    a
    {
    display:block;
    padding:4px
    10px
    2px
    10px;
    color:#fff;
    text-decoration:none;
    }
    #nav
    ul
    li
    a:hover
    {
    text-decoration:underline;
    background:#06F;
    color:#FFF;
    }
    /*main*/
    #mainContent
    {
    overflow:auto;
    zoom:1;
    margin-bottom:6px;
    }
    #side
    {
    width:200px;
    float:left;
    }
    .sidebox
    {
    border:1px
    solid
    #ed6400;
    margin-bottom:6px;
    }
    .sidebox
    h4
    {
    background:#ff911a;
    padding:2px
    6px;
    border-bottom:1px
    solid
    #ed6400;
    color:#fff;
    }
    .sidebox
    ul
    {
    padding:4px
    6px;
    }
    #main
    {
    width:742px;
    float:right;
    }
    .mainbox
    {
    border:1px
    solid
    #ed6400;
    margin-bottom:6px;
    }
    .mainbox
    h2
    {
    background:#ff911a;
    padding:2px
    6px;
    border-bottom:1px
    solid
    #ed6400;
    color:#fff;
    }
    .mainbox
    ul
    {
    padding:4px
    6px;
    }
    /*footer*/
    #footer
    {
    border-top:3px
    solid
    #0CF;
    height:50px;
    text-align:center;
    padding:6px;
    color:#999;
    }
    </style>
    </head>
    <body>
    <div
    id="container">
    <div
    id="header">
    <h1>头部</h1>
    <!--
    end
    #header
    -->
    </div>
    <div
    class="clearfloat"></div>
    <div
    id="nav">
    <ul>
    <li><a
    href="#">导航一</a></li>
    <li><a
    href="#">导航二</a></li>
    <li><a
    href="#">导航三</a></li>
    <li><a
    href="#">导航四</a></li>
    <li><a
    href="#">导航五</a></li>
    </ul>
    <!--
    end
    #nav
    -->
    </div>
    <div
    id="Content">
    <div
    id="side">
    <div
    class="sidebox">
    <h4>块标题</h4>
    <ul>
    块内容
    </ul>
    </div>
    <!--
    end
    #side
    -->
    </div>
    <div
    id="main">
    <div
    class="mainbox">
    <h2>块标题</h2>
    <ul>
    块内容
    </ul>
    </div>
    <!--
    end
    #main
    -->
    </div>
    <!--
    end
    #fContent
    -->
    </div>
    <div
    class="clearfloat"></div>
    <div
    id="footer">
    底部
    <!--
    end
    #footer
    -->
    </div>
    <!--
    end
    #container
    -->
    </div>
    </body>
    </html>
    自己把样式放进css文件里面
    相似回答
    HTML和css网页设计代码(html和css网页设计作业)答：HTML与CSS代码写出一个简单的页面框架首先，您需要创建一个div，对div进行添加一个class。我们利用CSS通过class来设置div的边框。创建一个用于设置边框的CSS文件，对于您实际开发中，将边框添加到您的CSS文件中即可。可以在html中写页面的框架，然后在写CSS样式。CSS样式可以利用外部链接连接到html页面上得到...
    html和css制作简单网页代码(用html与css制作网页大全)答：你可以使用DW软件，就是MacromediaDreamweaver，常用的版本是V0。你可以通过内置的2种方式来制作HTML网页：一种是直接书写HTML代码；另一种是通过设计器来部署简单的页面。如果你需要，可以在附件中下载。如何用html编写一个简单的网页1、先将按钮Submit1的disabled属性设为true，这样按钮是不可用的。然后再...
    用html如何制作一个简单的网页代码?答：1、首先，在计算机桌面上创建一个新文件夹，然后在该文件夹中创建一个新的文本文档。2、然后双击打开带有记事本的文本文档，如下图所示，我们编写一个简单的html代码。3、单击“另存为”的功能选项，显示默认保存为编码为ANSI。4、我们将更改编码和文件名，将其更改为如图所示的图像并保存。5、然后返回...
    如何用html编写一个简单的网页答：代码如下：<html> <body> 最简单的网页 </body> </html> 4、保存并关闭txt文本，然后修改我们txt文本的扩展名为html，此时会弹出警告框，提示我们修改后可能会导致文件不能使用，这是操作系统的一个处理逻辑，为了防止无意或恶意的损坏文件的行为。5、无需担心，因为这在我们自己的掌控之下，确认警告...
    HTML与CSS代码写出一个简单的页面框架答：<title>基本框架结构</title> <style type="text/css"> { margin:0; padding:0; } body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:150%; } ul { list-style:none; } img { border:0 none; } a { text-decoration:none; color:#333; } h1 { font-...
    谁能帮我用HTML语言做一个简单的网页?代码就行答：<title>第一个html网页</title> <metacharset="utf-8"> </head> <body> </body> </html> <html> <head> <title>第一个html网页</title> <metacharset="utf-8"> </head> <body> <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第...
    html+css做一个完整的可以跳转的网页答：一、常规的JS页面跳转代码 1、在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href="你所要跳转的页面";</script> 2、在新窗体中打开页面用：<script type="text/javascript"> window.open('你所要跳转的页面');</script> 3、JS页面跳转参数的注解 <SCRIPT LANGUAGE...
    bootstrap网页设计代码作业(bootstrap中文网网页代码?)答：titleBootstrap实例-一个简单的网页/title linkrel="stylesheet"href=""scriptsrc=""/script scriptsrc=""/script style .fakeimg{ height:200px;background:#aaa;} /style /head body divclass="jumbotrontext-center"style="margin-bottom:0"h1我的第一个Bootstrap页面/h1 p重置浏览器窗口大小查看...
    用html加css做一个心脏跳动的页面的代码答：<title>HTML5爱心跳动动画DEMO演示</title> <style> import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);import url(http://fonts.googleapis.com/css?family=Hammersmith+One);body { background-color: #ccc;} .container { width: 512px;height: 380px;margin: auto;marg...
    大家正在搜
    简单的登录页面代码简单的网页代码html简单个人网页代码html简单网页代码html简单网页代码成品html简单登录界面代码登录页面的代码html简单网页代码模板简单网页制作代码
    相关问题
    帮写用html与css代码写出一个简单的页面框架？
    求用HTML于CSS代码写出的一个简单的页面框架，要现成的，...
    用html写出一个完整的网页结构
    怎么把css语言和html语言结合起来 举个简单的例子（就是...
    如何用css和HTML写一个页面，如下图
    一个html中简单的网页框架问题
    如何用html编写一个简单的网页
    怎么可以最简单的使用div+css制作网页框架