一个简单的首页的设计：

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. javascript open window

    参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended ...

  2. openstack controller ha测试环境搭建记录（十）——配置neutron（控制节点）

    创建neutron用户:mysql -u root -p CREATE DATABASE neutron;GRANT ALL PRIVILEGES ON neutron.* TO 'neutron'@ ...

  3. windows 下nginx 虚拟主机搭建

    需要在 nginx.conf里面引入刚才配置的那个文件   第一步 加东西 http的节点里面加上 一定要注意的是:必须以  ;  结尾 include D:/phpen/nginx-1.3.6/co ...

  4. java类集: collection, list , set, map

    都在java.util包里.容器:装各种对象. Collections类 : 集合工具类, 提供了一些静态方法, 方法里的参数是List等. Colection接口,子接口主要有:   Set: 内容 ...

  5. Java设计模式遵循的七大原则

    最近几年来,人们踊跃的提倡和使用设计模式,其根本原因就是为了实现代码的复用性,增加代码的可维护性.设计模式的实现遵循了一些原则,从而达到代码的复用性及增加可维护性的目的,设计模式对理解面向对象的三大特 ...

  6. 170112、solr从服务器配置整合到项目实战

    整合网上资源后 100%可运行的配合步骤,部署在tomcat 为例. 一:下载solr,版本为5.2.1 地址:http://pan.baidu.com/s/1eRAdk3o 解压出来. 1.在解压的 ...

  7. UCOSII在STM32F1上的移植

    UCOSII在STM32F1上的移植 首先准备好一份STM32F1的工程.UCOSII源码. 在准备好的工程中新建一个"UCOSII"文件夹(或者取其它名字也行): UCOSII文 ...

  8. Vue.js实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })

  9. linux命令学习6-dpkg命令

    dpkg命令是Debian Linux系统用来安装.创建和管理软件包的实用工具. 1. 语法 dpkg (选项) (参数)2. 选项 -i:安装软件包: -r:删除软件包: -P:删除软件包的同时删除 ...

  10. C#调用bat 不显示DOS窗口,禁止DOS窗口一闪而过

    ProcessStartInfo startInfo = new ProcessStartInfo(); startInfo.CreateNoWindow = true;//不创建窗口