本篇博客实现一个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. 简单竖向Tab选项卡

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 关于HttpServlet和Servlet以及doPost和doGet关系

    这两天在看Servlet和Jsp,spring太难了,还是先看看基础,只怪自己太弱了. Servlet是一个接口,本身定义的是一种网络服务,HttpServlet是已经实现了Servlet接口,也就是 ...

  3. HDU3757

    题意:一些团队因为任务要去避难所,并且每个避难所必须要有团队在,避难所的数量小于等于团队的数量, 团队去避难所的消耗油量与路程成正比,求解最小耗油量.题目来源:2010 Northeastern Eu ...

  4. spring aop原理分析

    持续更新... aop跟java代理模式有关. java.lang.reflect.Proxy java.lang.reflect.InvocationHandler 工厂模式用到java反射. ao ...

  5. asp.mvc获取checkbox、radio、select的值

    记录一下在asp.mvc中,提交表单时后台获取checkbox.radio.select值的方法. 1.获取select的值 <select name="type"> ...

  6. 关于ISAPI和CGI限制,这个要设为允许

    否则程序就报这个错误,注意,设置允许时不是在添加的网站上设置,而是在根iis,选择后右侧出现关于ISAPI和CGI限制,进去后选择相应版本,设置为允许就可以了

  7. 设计模式:模版模式(Template Pattern)

    android中的Activity框架,View框架中大量的on函数基本上都应用到了Template模式,掌握这一模式对于理解这些框架大有裨益. 模版模式 又叫模板方法模式,在一个方法中定义一个算法的 ...

  8. eclipse中的web-inf下没有web.xml

  9. Swift - 41 - swift1.2新特性(1)

    更简洁的if-let import UIKit func attack(name: String, enemyName: String, weapon: String) { print("\ ...

  10. [转]extern,static存储空间矛盾

    其实,这两个语句的位置不同,会出现不同的解释.这主要是由于 static 具有的两重意义所导致的: (1) 如果 static int foo; 这一句位于函数中,则 static 表示的是存储属性, ...