<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>主页面</title>

        <style type="text/css">

            body{

                margin: 0px;

                padding: 0px;

            }

            #container{

                margin: 0 auto;

                width:1350px;

                height: 620px;

                background-color: #fff;

            }

            #header{

                width:100%;

                height: 100px;

                background-color: #0ff;

                /*font-size: 30px;

                font-family: 楷体;*/

                /*text-align: center;

                line-height: 100px;*/

            }

            #main{

                width:100%;

                height: 400px;

                background-color: black;

            }

            #footer{

                width:100%;

                height: 100px;

                background-color: #ff0;

            }

            .nav{

                width: 100%;

                height: 10px;

            }

            #left{

                width: 670px;

                height: 400px;

                background-color: red;

                float:left;

            }

            #right{

                width: 670px;

                height: 400px;

                background-color: #f0f;

                float: right;

            }

            #vertical_nav{

                width: 10px;

                height: 400px;

                background-color: #fff;

                float: left;

            }

            .right_article{

                width: 100%;

                height: 85px;

                background-color: #ccc;

                line-height: 85px;

                text-align: center;

                font-size: 30px;

                /*text-decoration: none;*/

            }

            .right_article a{

                text-decoration: none;

            }

            .article_nav{

                width: 100%;

                height: 20px;

                background-color: #fff;

            }

            #footer ul{

                margin: 0px;

                padding: 0px;

                list-style-type: none;

                font-family: 幼圆;

                line-height: 100px;

            }

            #footer ul li{

                float: left;

                margin-left: 200px;

                font-size: 20px

            }

            #header #title{

                float:left;

                width: 1200px;

                height: 100%;

                font-size: 30px;

                font-family: 楷体;

                line-height: 100px;         /* 不能用100%*/

                text-align: center;

            }

            #header #login_or_register{

                float: left;

                margin-top: 20px;

                /*background-color: red;*/

                width: 100px;

                height: 40px;

                font-size: 17px;

                font-family: 楷体;

                /*border: 3px  solid #f00;*/

            }

            #header #login_or_register a{

                text-decoration: none;

            }

        /*    #header login_or_register .op

            {

                float:left;

                margin-top: 10px;

            }*/

            /*#header ul li{

                float: left;

            }*/

            /*#header #login_or_register{

                float: left;

            }*/

        </style>

    </head>

    <body>

        <div id="container">

            <div id="header">

                <div id="title"><span>我的个人网站</sapn></div>

                <div id="login_or_register">

                        <a href="">登录</a> | <a href="">注册</a>

                </div>

            </div>

            <div class="nav"></div>

            <div id="main">

                <div id="left">

                </div>

                <div id="vertical_nav"></div>

                <div id="right">

                    <div id="article_one" class="right_article">

                        <span><a href="http://www.baidu.com" target="_blank">第一篇文章</a></span>

                    </div>

                    <div class="article_nav"></div>

                    <div id="article_two" class="right_article">

                        <span><a href="">第二篇文章</a></span>

                    </div>

                    <div class="article_nav"></div>

                    <div id="article_three" class="right_article">

                        <span><a href="">第三篇文章</a></span>

                    </div>

                    <div class="article_nav"></div>

                    <div id="article_four"class="right_article">

                        <span><a href="">第四篇文章</a></span>

                    </div>

                </div>

            </div>

            <div class="nav"></div>

            <div id="footer">

                <ul>

                    <li>网站首页</li>

                    <li>关于我们</li>

                    <li>联系方式</li>

                    <li>公司简介</li>

                </ul>

            </div>

        </div>

    </body>

</html>

    </body>

</html>

        <div></div>

    </body>

</html>

    </body>

</html>

一个简单的网页布局HTML+CSS的更多相关文章

  1. Html+css 一个简单的网页模板

    一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. jmeter压力测试的简单实例+badboy脚本录制（一个简单的网页用户登录测试的结果）

    JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter ...

  4. python实现的一个简单的网页爬虫

    学习了下python,看了一个简单的网页爬虫:http://www.cnblogs.com/fnng/p/3576154.html 自己实现了一个简单的网页爬虫,获取豆瓣的最新电影信息. 爬虫主要是获 ...

  5. CSS简单的网页布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  6. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  7. PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  8. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  9. HTML实例之简单的网页布局

    需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...

随机推荐

  1. 时光煮雨 Unity3D实现2D人物移动-总结篇

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  2. What makes an excellent front-end developer?(for my English speech)

    What makes an excellent front-end developer? Let me please start this talking by saying that what is ...

  3. Java Web之Filter

    Filter被称为过滤器或者拦截器,基本功能就是对调用servler过程的拦截,在servlet进行响应和处理前后实现一些特殊功能.其实,Filter过滤器就是一个实现了javax.servlet.F ...

  4. 2016中国大学生程序设计竞赛（长春） Ugly Problem 模拟+大数减法

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=5920 我们的思路是: 对于一个串s,先根据s串前一半复制到后一半构成一个回文串, 如果这个回文串比s小, ...

  5. 移植SDL运行库到Tiny6410 上

    在移植游戏之前, 我们首先需要将 SDL/SDL_mixer/SDL_ttf/SDL_image 这四个库移植到 Tiny6410 上, 另外还需要 iconv 库. libiconv-1.13.1. ...

  6. 安卓手机已保存WiFi密码查看助手（开源）

    一.需求分析 最近电脑需要连接WiFi,却发现WiFi密码给忘记了.而手机里有保存过的WiFi密码,但是在手机的设置界面看不到. 虽然已经有一些可以查看WiFi密码的app,但是主要还是担心密码被那些 ...

  7. samsung Galaxy s2(GT i9100g )刷机升级至4.4小记

    从昨天上午到现在,大部分时间都是在将i9100g更新到4.4.虽然中途也做了一些别的事情,但是更新过程还是走了一点弯路,比开始预想的稍微慢了一点,现在将完整的更新步骤分享给大家,以帮助后来的同学.升级 ...

  8. 千位分隔符(js 实现)

    最近被同事问到js如何实现给长数字添加千位分隔符,即 1344444 ---> 13,444,444 这是一个很常见的前端面试题.看起来简单,刚开始我都懒得写. 仔细一想,挺考逻辑的,实现方法有 ...

  9. BZOJ 1408: [Noi2002]Robot

    1408: [Noi2002]Robot Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 510  Solved: 344[Submit][Status][ ...

  10. 在VisualStudio2013，2015中如何安装自定义项目模板

    For example, I want to install EP prj template: AxWebProject.zip Copy AxWebProject.zip zip file into ...