本篇博客实现一个HTML与CSS简单页面效果实例

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.  <link href="style.css" rel="stylesheet" type="text/css">
  7.  </head>
  8.  <body>
  9.      <div class="container">
  10.          <div class="wrapper">
  11.              <div class="heading">
  12.                 <div class="heading_nav">
  13.                     <div class="heading_title">
  14.                                                     极客学院
  15.                         </div>
  16.                         <div class="heading_navbar">
  17.                             <ul>
  18.                                 <li><a href="#">首页</a></li>
  19.                                 <li><a href="#">职业课程</a></li>
  20.                                 <li><a href="#">技术问答</a></li>
  21.                                 <li><a href="#">VIP会员</a></li>
  22.                             </ul>
  23.                         </div>
  24.                         <div class="heading_img">
  25.                             <img src="img.jpg">
  26.                         </div>
  27.                         <div class="heading_soptlight">
  28.                            <form>
  29.                               <input type="text">
  30.                            </form>
  31.                         </div>
  32.                 </div>
  33.              </div>
  34.              <div class="body">
  35.                  <div class="body_title">
  36.                    <h3>熟悉极客学院</h3>
  37.                    <p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p>
  38.                  </div>
  39.                   <hr/>
  40.              <hr/>
  41.              </div>
  42.  
  43.          </div>
  44.  
  45.          <div class="footing">
  46.             @极客学院
  47.          </div>
  48.  
  49.      </div>
  50.  </body>
  51.  </html>

css代码：

  1.  *{
  2.      margin:0px;
  3.      padding:0px;
  4.  }
  5.  
  6.  body{
  7.      background-color: snow;
  8.  }
  9.  .wrapper{
  10.      width:%;
  11.      height:1000px;
  12.      background-color: antiquewhite;
  13.      margin:0px auto;
  14.  }
  15.  .heading{
  16.      width:%;
  17.      height:160px;
  18.      background-color: snow;
  19.      margin:0px auto;
  20.  }
  21.  ul{
  22.      margin-left:40px;
  23.      float:left;
  24.      list-style-type:none;
  25.      padding-top:40px;
  26.      padding-bottom:6px;
  27.  }
  28.  a:link,a:visited{
  29.      font-weight:bold;
  30.      color:darkgray;
  31.      text-align:center;
  32.      padding:6px;
  33.      text-decoration: none;
  34.  }
  35.  a:hover,a:active{
  36.      color:blue;
  37.  }
  38.  .heading_title{
  39.      float:left;
  40.      font-family:Arial,Helvetica,sans-serif;
  41.      font-size:30px;
  42.      color:burlywood;
  43.  }
  44.  .heading_nav{
  45.      padding-bottom:30px;
  46.      padding-top:30px;
  47.      width:%;
  48.      height:30px;
  49.      position:relative;
  50.  }
  51.  li{
  52.      padding-left:10px;
  53.      display:inline;
  54.  }
  55.  
  56.  .heading_img img{
  57.      border-radius:30px;
  58.      display:inline;
  59.      width:46px;
  60.      height:46px;
  61.      box-shadow: 1px 1px rgba(,,,0.2);
  62.      float:right;
  63.  }
  64.  
  65.  .heading_soptlight form{
  66.      float:right;
  67.      width:100px;
  68.      height:26px;
  69.      position:relative;
  70.      margin-right:82px;
  71.      margin-top:16px;
  72.  }
  73.  form input{
  74.      height:26px;
  75.      border-radius:30px;
  76.  }
  77.  .body{
  78.      width:auto;
  79.      height:auto;
  80.      padding:30px;
  81.  }
  82.  .body_title h3{
  83.      font-size:30px;
  84.      font-family:Arial,Helvetical,sans-serif;
  85.      color:#;
  86.  }
  87.  .body_title p{
  88.      margin-top:20px;
  89.      margin-bottom:20px;
  90.  }
  91.  .footing{
  92.      padding-top:20px;
  93.      text-align:center;
  94.      fon-size:10px;
  95.      color:darkgray;
  96.  }

效果：

HTML与CSS简单页面效果实例的更多相关文章

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

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

  2. [CSS3] 学习笔记-HTML与CSS简单页面效果实例

    一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

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

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

  4. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

  5. js+html+css简单的互动功能页面（2015知道几乎尖笔试题）http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2

    js+html+css实现简单页面交互功能(2015知乎前端笔试题) http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html? from=y1.7-1. ...

  6. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  7. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...

  8. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  9. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

随机推荐

  1. php parse_url 函数使用方法解析

    此函数返回一个关联数组,包含现有 URL 的各种组成部分.如果缺少了其中的某一个,则不会为这个组成部分创建数组项.组成部分为: scheme – 如 http host port pass path ...

  2. .NET注册页面代码

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  3. Android（java）学习笔记255：JNI之JNI概念

    1. JNI是什么? java native interface (java本机接口) 比如方法声明: public final native Class<?>  getClass(): ...

  4. pen: Local Testing

    [踩点] * OLEViewer:查看 ActiveX 组件信息 [Fuzz] * Tools in This Article * COMRaider:ActiveX/ocx [utils] * Fi ...

  5. 关于slideup和slidedown 鼠标多次滑过累积的动画效果

    stop() 方法停止当前正在运行的动画 包括animation动画和slideup/slidedown动画 例如:鼠标经过一个元素时,执行一个slide动画,多次快速经过,不处理的话这个元素会保留累 ...

  6. maven第三章 maven使用入门

    3.1编写pom groupId 一个项目名称 artifactId 子项目(模块)名称 version 开发中的版本,稳定的版本 name 项目名称,方便信息交流 http://news.cnblo ...

  7. Jenkins学习之——(4)Email Extension Plugin插件的配置与使用

    1.先安装插件 2.配置 点击高级后 内容配置: 3.项目配置 点击Advanced Settings后 到此所有的配置都设置完成. 附录: 以下内容来自其他网友的博客,内容也没有自己去试,朋友们可以 ...

  8. MyEclipse汉化后问题

    今天为了教学生如何汉化MyEclipse10.7,所以讲IDE汉化了一下. 个人还是喜欢用英文版,所以就将D:\MyEclipse\MyEclipse 10目录下的配置文件myeclipse.ini里 ...

  9. WPF Mahapps.Metro 设置主题样式

    /// <summary> /// 设置App样式 /// </summary> /// <param name="accentName">窗口 ...

  10. PULL生成XML文件

    package xmlpulldemo; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...