一个简单的首页的设计：

html文件：

 <!doctype html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title></title>
     <link rel="stylesheet" type="text/css" href="1.css">
 </head>
 <body>
     <div class="container">
         <div class="wrapper">
             <div class="heading">
                 <div class="heading_div">
                 <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>

对应的CSS文件：

 *{
     margin: 0px;
     padding: 0px;
 }
 body{
     background-color: snow;
 }
 .wrapper{
     background-color: antiquewhite;
     width: 80%;
     height: 1000px;
     margin: 0px auto;
 }
 .heading{
     margin:0px auto;
     width:100%;
     height:90px;
     background-color: snow;
 }
 .heading_nav{
     font-weight: bold;
     padding-bottom: 30px;
     padding-top:30px;
     width:100%;
     height: 30px;
     position: relative;
 }
 .heading_title{
     float: left;
     font-family: Arial, Helvetica,sans-serif;
     font-size:30px;
     color:burlywood;
 }
 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_spotlight form{
     float:right;
     width:100px;
     height:26px;
     position:relative;
     margin-right: 50px;
 }
 form input{
     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:20px;
     text-align: center;
     font-size:10px;
     color:gray;
 }

[CSS3] 学习笔记-HTML与CSS简单页面效果实例的更多相关文章

  1. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  2. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  4. CSS3学习笔记-1：CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

  5. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  6. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  7. [转载]SharePoint 2013搜索学习笔记之搜索构架简单概述

    Sharepoint搜索引擎主要由6种组件构成,他们分别是爬网组件,内容处理组件,分析处理组件,索引组件,查询处理组件,搜索管理组件.可以将这6种组件分别部署到Sharepoint场内的多个服务器上, ...

  8. OGG学习笔记03-单向复制简单故障处理

    OGG学习笔记03-单向复制简单故障处理 环境:参考:OGG学习笔记02-单向复制配置实例 实验目的:了解OGG简单故障的基本处理思路. 1. 故障现象 故障现象:启动OGG源端的extract进程, ...

  9. QML学习笔记（六）- 简单计时器和定时器

    做一个简单的qml计时器和定时器,左键触发计时,右键触发定时 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(六)- 简单计时器和定时器 左键点击按钮,触发计时器,中键可以暂停计时,同 ...

随机推荐

  1. Sublime 2 配置

    在队友的推荐下,爱上了这款神一样的文本编辑器,熟练之后编辑效率真心是大幅提升啊. 一.Package Control Sublime拥有很强大的插件功能,而自带的缺少个管理工具,这个包可以用来很方便地 ...

  2. ecos的app包管理

    install 安装 install app_name1 app_name2 有时候要用-o参数,把所有安装过程需要的参数带入进去(安装过程的参数放在app/$app_name/task.php里in ...

  3. 优化EF性能

    本文介绍一些改善EF代码.优化其性能的相关方法,如NoTracking,GetObjectByKey, Include等,还包括编译查询.存储模型视图以及冲突处理等内容.. l         Mer ...

  4. Java 内存回收机制 -说到点上了

    下面这个图,很清楚地说明对象在new的时候是怎样开辟内存空间的 其中对象new出来的,是栈内存,变量的开辟是堆内存 Java的一个重要优点就是通过垃圾收集器GC (Garbage Collection ...

  5. openstack controller ha测试环境搭建记录（三）——配置haproxy

    haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global    chroot /var/lib/haproxy    daemon    group ...

  6. 0115percona-toolkit安装教程

    一.percona-toolkit简介percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slav ...

  7. 一元线性回归分析及java实现

    http://blog.csdn.net/hwwn2009/article/details/38414911 一元线性回归分析及java实现 2014-08-07 11:02 1072人阅读 评论(0 ...

  8. 如何实现简单的位数组(bit array)（转）

    源:如何实现简单的位数组(bit array) 在 comp.lang.c 上面看到一则不错的 FAQ,<How can I implement sets or arrays of bits?& ...

  9. 128階數的Shunt音量控制器

    源:128階數的Shunt音量控制器 紅外線遙控 - 256階Shunt音量及控制及音源 選擇器

  10. Xcode遇到couldn’t be opened because you don’t have permission to view it.解决方法

    今天删除app里面第三方类库的之后,xcode在编译的时候出现了这个问题. (无法打开,因为您没有权限查看它) 问题刚出现的时候,可以尝试一下在xcode上方product选项clean一下. cle ...