一个简单的首页的设计：

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. MySQL 1054错误 Unknown column .... in 'on clause'

    ERROR 1054 (42S22): Unknown column ... in 'on clause' 原因: MySQL5.0 Bug, 要把联合的表用括号包含起来才行: 例: SELECT ( ...

  2. Linux 服务器 常规性能优化设置

    为能使linux服务器能最大化的工作,通常需要对linux的通常设置做适当的更改,而这又往往会依据服务器的类型不同,而有所变化. 对于通常的多连接的服务器其参数设置,可在 /etc/sysctl.co ...

  3. svn第一篇----入门指南

    摘要:trunk存放的是主代码,不修改,branch,tag,milestone均是从trunk中衍生的.branch复制trunk中代码用于开发,tag用于存放比较重要的发行版,存放release版 ...

  4. 一道关于 precision、recall 和 threshold关系的机器学习题

    Suppose you have trained a logistic regression classifier which is outputing hθ(x). Currently, you p ...

  5. list集合怎么转化成一个javaBean对象，及常见的使用方法（全）

    一.List集合的用法 1.list集合添加实体并输出 for (int i = 0; i < list.size(); i++) { javabean obj= (javabean)list. ...

  6. Xcode--Alcatraz来管理Xcode插件

    简介 Alcatraz是一个帮你管理Xcode插件.模版以及颜色配置的工具.它可以直接集成到Xcode的图形界面中,让你感觉就像在使用Xcode自带的功能一样. 安装和删除 使用如下的命令行来安装Al ...

  7. php部分--文件操作

    php中的文件指的是文件和文件夹,不是单指文件. 1.判断文件(判断是文件还是文件夹) 找文件,输出结果为file,代表的是文件. var_dump(filetype("./aa.txt&q ...

  8. linux命令学习-3-sysctl

    sysctl 内核变量配置 Usage: sysctl [options] [variable[=value] ...]   NAME sysctl - configure kernel parame ...

  9. SpringMVC强大的数据绑定（2）——第六章 注解式控制器详解

    SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解 博客分类: 跟开涛学SpringMVC   6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于 ...

  10. C语言－指针、数组、结构体、分支、循环混合使用

    1.写一个程序,输出如下内容: //############################################################# //### name number ma ...