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. SQLite使用报告

    SQLite简介 SQLite是遵守ACID的关联式数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目. 不像常见的客户-服务器范例,SQLite引擎不是个程 ...

  2. 如何使用dynamic

    DataTable dt = new DataTable("TableOne"); dt.Columns.Add("ID", typeof(int));     ...

  3. .NET,你忘记了么？（八）—— 从dynamic到特性误用 [转]

    1. 摘要 每个程序员都想写出漂亮的代码,但是什么是漂亮,这个我想每个人都有着自己的看法.那么我就说几种典型的想法: A. 写出别人看不懂的代码,让别人觉得很高深. B. 写出简短的代码 C. 用最新 ...

  4. C# 中4个访问符和8个修饰符详解

    4个访问修饰符(是添加到类.结构或成员声明的关键字) Public:公有的,是类型和类型成员的访问修饰符.对其访问没有限制. Internal:内部的,是类型和类型成员的访问修饰符.同一个程序集中的所 ...

  5. NTFS 文件系统解析

    1. windows 下磁盘文件读写 下面是读取D:\磁盘上的第0扇区 512 Bytes CreateFile()打开磁盘,获取文件句柄: SetFilePointer()设置读写的位置: Read ...

  6. 如何在MyEclipse中部署struts2的环境

    总记不住一些部署struts2框架的细节,下面就做一个总结:其实很简单,只要几步:1.下载的strutsXXX(版本号)-zip文件中解压app目录中有一个struts2-blank.war文件,解压 ...

  7. jquery 学习笔记二 隐藏与显示

    css找到元素后是添加样式,而jquery找到元素后是添加形为. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. 如何将js与HTML完全脱离

    先举出一个例子: var sound='Roar!'; function myOrneryBeast(){ alert(this); this.style.color='green';//this指代 ...

  9. 编写一个程序实现strcat函数的功能

    写自己的strcat函数------→mycat #include <stdio.h> #include <string.h> #define N 5 char *mycat( ...

  10. OpenCV学习 7：图像形态学：腐蚀、膨胀

    原创文章,欢迎转载,转载请注明出处 首先什么是图像形态学?额,这个抄下百度到的答案.基本思想:    用具有一定形态的结构元素去度量和提取图像中的对应形状已达到对图像分析和识别的目的,形态学图像处理表 ...