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. iOS中UITextView键盘回收

    iOS开发中,发现UITextView没有像UITextField中textFieldShouldReturn:这样的方法,那么要实现UITextView关闭键盘,就必须使用其他的方法,下面是可以使用 ...

  2. mybatisnet轻量级ORM框架

    https://code.google.com/p/mybatisnet/source/checkout http://blog.csdn.net/arvinstudy/article/details ...

  3. 新手求大神,有其他swit-case的思路写这个程序么?

    两个程序: switch-case与if-else if的区别相同点:可以实现多分支结构;不同点:switch:一般只能用于等值比较.(可以进行范围运算???---学会用switch计算范围出炉的思路 ...

  4. 解析word中的表格

    由于word表格的特殊性,其本身中的数据本来就不够完善,不能够很好的知道其具体的合并.跨行的相关属性,表格的单位可能是PT或者是百分比,并且是共存的,为处理带来了一定的负担,本代码实现了一个将Word ...

  5. mantis 中文统计报表乱码问题解决办法

    mantis 中文报表乱码问题 1.安装mantisTB 1.2.17:a.安装插件:管理-->插件管理-->安装MantisGraph(Mantis图表 1.0) 插件b.修改配置文件: ...

  6. win7 64位安装 oracle 11G 和 使用 PLSQL Developer 连接服务器

    其实基本过程和网上大多数人的完全一样,只是后面的plsql上加了几张图片而已,以此给自己做个记录,万一网上的没了,这里自己还有,会了的大森(大神),就请路过吧 1.双击开始安装

  7. php的cURL库介绍

    cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.很多小偷程序都是使用这个函数.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的 ...

  8. WGS84、GCJ-02(火星坐标)、百度坐标，Web墨卡托坐标

    GCJ-02坐标系统(火星坐标)简介:http://blog.csdn.net/giswens/article/details/8775121(存档:http://mapbd.com/cms/2012 ...

  9. java面向对象之 继承 Inheritance

    对象的一个新类可以从现有的类中派生,这个过程称为类继承.新类继承了原始类的特性,新类称为原始类的派生类(子类),而原始类称为新类的基类(父类).派生类可以从它的基类那里继承方法和实例变量,并且类可以修 ...

  10. javascript编辑器预览模式解密

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...