HTML与CSS简单页面效果实例
本篇博客实现一个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简单页面效果实例的更多相关文章
- 3.8.1 HTML与CSS简单页面效果实例
HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- [CSS3] 学习笔记-HTML与CSS简单页面效果实例
一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...
- web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...
- 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. ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- 最简单的css实现页面宽度自适应
<div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...
- 有趣的css—简单的下雨效果2.0版
简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
随机推荐
- mysql myisam 锁表问题<转>
转自http://yafei001.iteye.com/blog/1841258 锁是计算机协调多个进程或线程并发访问某一资源的机制 .在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用 ...
- 软键盘 输入法管理器 InputMethodManager
基本介绍 软键盘的显示原理 软键盘其实是一个Dialog.InputMethodService为我们的输入法创建了一个Dialog,并且对某些参数进行了设置,使之能够在底部或者全屏显示.当我们点击输 ...
- javascript基础之自执行函数
1.匿名函数的定义方式 如下 var temp = function(){} 2.自执行函数 (function(){ 内容 }) () 不带参数 (fun ...
- C++关联容器<map>简单总结
C++关联容器<map>简单总结 map提供大小可变的关联容器,基于关联键值高效检索元素值.当你处理键值对的数据是,都可以考虑使用map关联容器. 特点: 大小可变的关联容器,基于关联键值 ...
- linux执行文件命令
1.如果path中有你的程序所在的目录,那么直接执行filename即可 2.如果path中没有程序所在目录,那么进入目录./filename或者path/filename 比如 wj@ubuntu: ...
- android 检查网络是否可用,如果不可用弹出设置,让用户改变
/** * 校验网络,如果没有网络,返回true * * @return boolean */ @Override public boolean hasInternetConnected() { Co ...
- 开发中遇到的java小知识
今天在优化一个功能的时候遇到了instr与substr函数,之前没有接触过这两个函数,但是今天无意中用到,一查才发现,真是实用的一对兄弟啊. 先来说说substr函数,这个函数返回的是字符串的一部分. ...
- JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)
具有交互性的JavaScript程序使用的是事件驱动的程序设计模型. 目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...
- stax解析XML-----Demo
Demo public void staxDemo() throws Exception { XMLStreamReader xml= XMLInputFactory.newInstance().cr ...
- mysql 整形的长度问题
tinyint 有符号的范围是-128至127: 无符号的范围是0到255,2的8 次方-1: 存储大小为 1 字节. smallint 有符号的范围是-32768至32767: 无符号的范围是0 ...