一个简单的首页的设计：

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. ios开发环境配置及cordova安装与常用命令

    一.ios开发环境配置 1.首先要有台Mac Book,如果有Mac Book,跳过步骤2.3.4,如果没有,执行步骤2.3.4: 2.下载并安装VMware Workstation,最好是下最新版本 ...

  2. ADXL345加速度传感器驱动

    ADXL345 是 ADI 公司的一款 3 轴.数字输出的加速度传感器.ADXL345 是 ADI 公司推 出的基于 iMEMS 技术的 3 轴.数字输出加速度传感器.该加速度传感器的特点有:    ...

  3. c++中vector使用

    不多说,先看代码: #include <IOSTREAM> #include <VECTOR> using namespace std; int main() { cout&l ...

  4. 微信小程序之----video视频播放

    vidao 我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效.控制视频的状态可以根据video标签的唯一id得到一个对象实例.video组件并不具备actio ...

  5. 复习php的一些函数

    2014.07.04 查看ecshop的一些源码,学习了一些函数.

  6. 【滚动数组】【状压dp】Gym - 100956F - Colored Path

    f(i,j,S)表示到(i,j),且经由的路径上的颜色集合为S的价值的最小值,从上方和左方转移过来即可. 要注意,内存不足,需要滚动数组优化,即使用了map,还是需要. 路径输出的时候,可以再跑一遍d ...

  7. Django中扩展Paginator实现分页

    Reference:https://my.oschina.net/kelvinfang/blog/134342 Django中已经实现了很多功能,基本上只要我们需要的功能,都能够找到相应的包.要在Dj ...

  8. java系列--并发

    1.Executor 原博:http://blog.csdn.net/linghu_java/article/details/17123057 2.CountDownLatch()方法 浅析Java中 ...

  9. 高尔夫 之 TEE

    黑色:男子职业选手蓝色:男子业余高手.女子职业选手白色:男子初学球手.老年球手.女子业余高手红色:女子选手金色:有的球场做为介于 黑Tee (职业球员)与 蓝Tee (业余高手)之间的Tee 台:有的 ...

  10. ubuntu16.04 安装搜狗输入法

    刚刚升级ubuntu16.04LTS,安装搜狗输入法又出问题. 和以前一样,在官网下了deb包,直接双击安装,打开了Software Center(如下:改版过了,但是看起来是没有安装上的),点Ins ...