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

index.html

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="heading">
<div class="heading_nav">
<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="img.jpg">
</div>
<div class="heading_soptlight">
<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{
width:%;
height:1000px;
background-color: antiquewhite;
margin:0px auto;
}
.heading{
width:%;
height:160px;
background-color: snow;
margin:0px auto;
}
ul{
margin-left:40px;
float:left;
list-style-type:none;
padding-top:40px;
padding-bottom:6px;
}
a:link,a:visited{
font-weight:bold;
color:darkgray;
text-align:center;
padding:6px;
text-decoration: none;
}
a:hover,a:active{
color:blue;
}
.heading_title{
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:30px;
color:burlywood;
}
.heading_nav{
padding-bottom:30px;
padding-top:30px;
width:%;
height:30px;
position:relative;
}
li{
padding-left:10px;
display:inline;
} .heading_img img{
border-radius:30px;
display:inline;
width:46px;
height:46px;
box-shadow: 1px 1px rgba(,,,0.2);
float:right;
} .heading_soptlight form{
float:right;
width:100px;
height:26px;
position:relative;
margin-right:82px;
margin-top:16px;
}
form input{
height:26px;
border-radius:30px;
}
.body{
width:auto;
height:auto;
padding:30px;
}
.body_title h3{
font-size:30px;
font-family:Arial,Helvetical,sans-serif;
color:#;
}
.body_title p{
margin-top:20px;
margin-bottom:20px;
}
.footing{
padding-top:20px;
text-align:center;
fon-size:10px;
color:darkgray;
}

效果:

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. mysql myisam 锁表问题<转>

    转自http://yafei001.iteye.com/blog/1841258 锁是计算机协调多个进程或线程并发访问某一资源的机制 .在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用 ...

  2. 软键盘 输入法管理器 InputMethodManager

     基本介绍 软键盘的显示原理 软键盘其实是一个Dialog.InputMethodService为我们的输入法创建了一个Dialog,并且对某些参数进行了设置,使之能够在底部或者全屏显示.当我们点击输 ...

  3. javascript基础之自执行函数

    1.匿名函数的定义方式 如下 var temp = function(){} 2.自执行函数 (function(){             内容    })        () 不带参数 (fun ...

  4. C++关联容器<map>简单总结

    C++关联容器<map>简单总结 map提供大小可变的关联容器,基于关联键值高效检索元素值.当你处理键值对的数据是,都可以考虑使用map关联容器. 特点: 大小可变的关联容器,基于关联键值 ...

  5. linux执行文件命令

    1.如果path中有你的程序所在的目录,那么直接执行filename即可 2.如果path中没有程序所在目录,那么进入目录./filename或者path/filename 比如 wj@ubuntu: ...

  6. android 检查网络是否可用,如果不可用弹出设置,让用户改变

    /** * 校验网络,如果没有网络,返回true * * @return boolean */ @Override public boolean hasInternetConnected() { Co ...

  7. 开发中遇到的java小知识

    今天在优化一个功能的时候遇到了instr与substr函数,之前没有接触过这两个函数,但是今天无意中用到,一查才发现,真是实用的一对兄弟啊. 先来说说substr函数,这个函数返回的是字符串的一部分. ...

  8. JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

  9. stax解析XML-----Demo

    Demo public void staxDemo() throws Exception { XMLStreamReader xml= XMLInputFactory.newInstance().cr ...

  10. mysql 整形的长度问题

    tinyint  有符号的范围是-128至127: 无符号的范围是0到255,2的8 次方-1: 存储大小为 1 字节. smallint  有符号的范围是-32768至32767: 无符号的范围是0 ...