一个简单的首页的设计：

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. Ubuntu Server 重启 Apache Mysql

    a. 重启 apache sudo service apache2 restart b. 重启 MySQL sudo service mysql restart

  2. 公司搬家，拿了个费机器，没root密码，又忘了怎么搞了，

    grub中找到ro->rw single init=/bin/bash passwd root

  3. Sping--集合注入

    UserDAOImpl.java: package com.bjsxt.dao.impl; import java.util.List; import java.util.Map; import ja ...

  4. CodeForces 622C Not Equal on a Segment

    预处理p[i],p[i]表示:[p[i],i]这段闭区间上所有数字都是a[i] 询问的时候,如果xi==a[ri]并且p[ri]<=li,一定无解 剩下的情况都是有解的,如果xi!=a[ri], ...

  5. CodeForces 625D Finals in arithmetic

    神奇的构造题,我的思路比较奇葩.搞了好久,看到WA on 91我绝望了,然后自己造数据,找到了错误,总算是AC了,现在是凌晨0:24分,看到AC之后,感动China! 我写的代码无比的长.....应该 ...

  6. S3C2440的SPI解析

    位串行数据的频率.如果只希望发送,则接收数据可以保持伪位(dummy).此外如果只希望接收,则需要发送伪位'1'数据 使用SPI主要需要以下寄存器 选择SPI模式,中断模式,查询模式等SCK选择,主从 ...

  7. Hibernate 中对象关系映射（ObjectRelationMapping）

    1.什么是对象关系映射? 解析:对象-关系映射(Object Relational Mapping,简称ORM,对象关系映射)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说, ...

  8. listen函数里面backlog的意义以及各种情况

    先看了这篇: http://www.cppblog.com/thisisbin/archive/2010/02/07/107444.html 里面说了会维护两个队列,established 和 syn ...

  9. 完美分割字符串，实现字符串的splict功能

    class Str:Client_C { string val; string[] str = new string[100]; public void StrT1() { //1.正常情况 //2. ...

  10. Spring自定义标签

    一.原理: 1.Spring通过XML解析程序将其解析为DOM树, 2.通过NamespaceHandler指定对应的Namespace的BeanDefinitionParser将其转换成BeanDe ...