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. hdu 5591 ZYB's Game

    Problem Description ZYB played a game named NumberBomb with his classmates ,N] in mind,then players ...

  2. Python实现CGI环境

    要想安装Python的CGI环境,就继续往下看吧. 首先,要确定apache服务可以使用CGI服务. 打开apache的配置文件,设置如图. 在启动的apache服务的系统目录下,创建目录如/User ...

  3. HTML5实现坦克大战（一）

      Tank 字段 x:坦克的中心点的横坐标 y:坦克的中心点的纵坐标 dir:坦克的前进的方向 spped:坦克的速度 color:坦克的颜色,用于区分种类不同的坦克 bullet:坦克的子弹 为a ...

  4. Dell 2950服务器CPU-E1422错误解决方法

    .造成原因:CPU松动或者是硅胶损耗 .解决方法: .断掉电源,将其后盖打开(在手没有静电的情况下操作) .拔掉周围的排热扇 .按住关卡,将其CPU卸下:并使用清洁剂清理,再次给CPU上涂上硅胶(均匀 ...

  5. static和extern关键字 对函数的作用

    本文目录 • 一.extern与函数 • 二.static与函数 • 三.static.extern与函数的总结说明:这个C语言专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序员,能 ...

  6. 20151211--EL表达式语言

  7. 如何用SQL操作数据------告别标题党

    额,首先跟大家道一个歉,由于本人上次利用标题来骗访问,对各位大哥大姐,叔叔阿姨,弟弟妹妹,and舅子老表的时间及流量造成了严重的浪费,本人深表歉意(好吧,其实本人内心还是有那么一丢丢的自豪的,毕竟是一 ...

  8. linux查看与设置主机名

    1.设置主机名    通过编辑/etc/sysconfig/network文件中的HOSTNAME字段就可以修改主机名.如下所示:     [root@zijuan /]# vim /etc/sysc ...

  9. 转：Server.MapPath相关

    如果你从Page类继承的类中执行这条语句,才可以简单地使用 DataBase = Server.MapPath("data.mdb");否则写全命名空间:System.Web.Ht ...

  10. 几家SIEM

    HP Arcsight Imperva is a HP Business Partner. HP is the world's largest IT company, providing infras ...