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. OC运行时和方法机制笔记

    在OC当中,属性是对字段的一种特殊封装手段. 在编译期,编译器会将对字段的访问替换为内存偏移量,实质是一种硬编码. 如果增加一个字段,那么对象的内存排布就会改变,需要重新编译才行. OC的做法是,把实 ...

  2. 消除“Permission is only granted to system apps”错误

    遇见这个问题我百度搜了一大堆说是须要clean项目,可是我每次clean项目的时候我的R文件总是丢失. 如今我给大家介绍一下避免授予系统权限报错更改方法 在AndroidManifest.xml中使用 ...

  3. [ACM] hdu 2191 珍惜如今，感恩生活 （多重背包）

    Problem Description 急!灾区的食物依旧短缺! 为了拯救灾区同胞的生命,心系灾区同胞的你准备自己採购一些粮食支援灾区,如今如果你一共同拥有资金n元,而市场有m种大米,每种大米都是袋装 ...

  4. bootstarp基本模板

    <!DOCTYPE html><!--html5文档格式--> <html lang="zh-CN"><!--申明语言是中文简体--> ...

  5. JSON、XML 解析

    iOS开发--XML/JSON数据解析 不错的文章http://www.jianshu.com/p/a54d367adb2a

  6. 通过xib创建控制器

    什么时候才需要使用storyboard,xib,当控制器的view界面是固定死的时候,就考虑用storyboard,xib解决.      目的:让xib描述控制器view          通过xi ...

  7. Linux简介（好！）

    Linux操作系统介绍 来源:233网校论文中心[ 2009-12-02 14:23:00 ]阅读:1作者:王长青编辑:studa20 [摘 要]文章从Unix.Minix系统的产生引出了Linux操 ...

  8. linux杂记（一）各硬件装置在linux中的代号

    装置 装置在linux内的代号 IDE硬盘机 /dev/hd[a-d] SCSI硬盘机 /dev/sd[a-p] U盘 /dev/sd[a-p](与SCSI硬盘一样) CDROM /dev/cdrom ...

  9. 第6章 堆排序，d叉堆，优先队列

    #include<stdio.h> #include<stdlib.h> #include<string.h> #define leftChild(i) (2*(i ...

  10. Oracle EBS-SQL (SYS-17):查询一张报表在哪个职责下面.sql

    1.查询该报表的 concurrent_program_id SQL如下: SELECT t.application_id, t.concurrent_program_id, t.* FROM FND ...