HTML代码
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>极客学院</title>

    <link href="style.css" type="text/css" rel="stylesheet">

</head>

<body>

    <div class="container">

        <div class="wrapper">

            <div class="heading">

                <div class="heading_nav">

                    <div class="heading_title">

                        极客学院

                    </div>

                    <div class="heading_navbar">

                        <ul>

                            <li><a href="#">首页</a></li>

                            <li><a href="#">职业课程</a></li>

                            <li><a href="#">技术问答</a></li>

                            <li><a href="#">VIP会员</a></li>

                        </ul>

                    </div>

                    <div class="heading_img">

                        <img src="1.jpg">

                    </div>

                    <div class="heading_spotlight">

                        <form>

                            <input type="text">

                        </form>

                    </div>

                </div>

            </div>

            <div class="body">

                <div class="body_title">

                    <h3>熟悉极客学院</h3>

                    <p>加入极客学院，学习实战教程，全面提升你的学习能力</p>

                </div>

                <hr/>

                <hr/>

            </div>

        </div>

        <div class="footing">

            @极客学院

        </div>

    </div>

</body>

</html>

图片源1.jpg如下


效果如下


CSS代码
*{

    margin: 0px;

    padding: 0px;

}

body{

    background-color: snow;

}

.wrapper{

    width: 80%;

    height: 1000px;

    background-color: antiquewhite;

    margin:0px auto;

}

.heading{

    width: 100%;

    height: 90px;

    background-color: snow;

    margin: 0px auto;

}

.heading_title{

    float: left;

    font-family: Arial,Helvetica, sans-serif;

    font-size: 30px;

    color: burlywood;

}

.heading_nav{

    padding-bottom: 30px;

    padding-top: 30px;

    width: 100%;

    height: 30px;

    position: relative;

}

ul{

    margin-left: 40px;

    float:left;

    list-style-type: none;

    padding-top: 6px;

    padding-bottom: 6px;

}

li{

    padding-left: 10px;

    display: inline;

}

a:link,a:visited{

    font-weight: bold;

    color: darkgray;

    text-align: center;

    padding: 6px;

    text-decoration: none;

}

a:hover,a:active{

    color:dimgray;

}

.heading_img img{

    border-radius: 30px;

    display: inline;

    width: 26px;

    height: 26px;

    box-shadow: 0 1px 1px rgba(0,0,0,0.2);

    float: right;

}

.heading_soptlight form{

    float: right;

    width: 100px;

    height: 26px;

    position: relative;

    margin-right: 50px;

}

form input{

    float: right;

    height: 26px;

    border-radius: 30px;

}

.body{

    width: auto;

    height: auto;

    padding: 30px;

}

.body_title h3{

    font-size: 30px;

    font-family: Arial, Helvetica, sans-serif;

    color: #333333;

}

.body_title p{

    margin-top: 20px;

    margin-bottom: 20px;

}

.footing{

    padding-top: 20px;

    text-align: center;

    font-size: 10px;

    color: darkgray;

}

HTML与CSS绘制简单DIV布局的更多相关文章

  1. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  2. css基础-2 div布局

    div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8" ...

  3. css+html简单的布局demo

    于html介绍css作风.可以改变html块状布局,局更加美观.接下来看一个基础布局的小样例: <html> <head> <meta http-equiv=" ...

  4. (转)盒子概念和DiV布局

    CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...

  5. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  6. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  7. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  8. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  9. php学习之始于html——div布局与css控制

    关于您的问题:xampp是一个集成的php开发环境,里面包含Apache,mysql等环境,主要充当一个服务器的角色, 其中有文件,数据,路径等,一个网站程序安装之后,都会有一个根目录,根目录下,有其 ...

随机推荐

  1. 传纸条（一）（双线程dp）

    传纸条(一) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行 ...

  2. DB Query Analyzer 5.04 is released, 63 articles concerned have been published

    DB Query Analyzer 5.04 is released, 63 articles concerned have been published DB QueryAnalyzer is pr ...

  3. PHP+jQuery实现翻板抽奖

    翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息.看似简单的一个操作过程,却包含着WEB技术的很多知识面 ...

  4. data按钮

    1.加载状态 通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-l ...

  5. HTML界面JQuery ajax 返回200，但走Error方法

    原因是JSON拼装的有问题. 都需要放在双引号里面,或者修改dataType的类型为  "html". http://blog.csdn.net/imjcoder/article/ ...

  6. qrcode各版本/各类型容量支持表

    1.qrcode共有40个版本,支持各种类型数据.个人一般统一转换成8位字节进行算法存储.(汉字 --uff8占用3个字节)

  7. Windows Server 2008 Enterprise使用12G内存

    开启PAE选项,用以下命令解决这个问题: 1.开始运行cmd2.输入 BCDEdit /set PAE forceenable 后回车3.重起系统显示12GB内存,一切正常

  8. Android存储小结

    转自:http://www.liaohuqiu.net/cn/posts/storage-in-android/ android系统自身自带有存储,另外也可以通过sd卡来扩充存储空间.前者好比pc中的 ...

  9. struts2笔记01-环境搭建

    1.官网下载struts2 struts-2.3.28-all.zip,这个包可谓应有尽有,以后全靠它了! 2.jar包怎么选?       (1)struts-2.3.28-all\struts-2 ...

  10. 【Howie玩docker】-Centos 7 docker 启动容器iptables报No chain/target/match by that name

    重启了一下服务器,以前能运行的docker网络应用都不能正常开启了. 因为用的是centos7,所以猜测有可能是iptables的问题. docker start 或者run 后总是提示类似的错误: ...