3.8.1 HTML与CSS简单页面效果实例
HTML与CSS简单页面效果实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML与CSS简单页面效果实例</title>
<style>
* {
margin: 0px;
padding: 0px;
} body {
background-color: snow;
} .wrapper {
width: 80%;
height: 1000px;
background-color: antiquewhite;
margin: 0px auto;
} .heading {
width: 100%;
height: 90px;
background-color: snow;
margin: 0px auto;
} .heading_title {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: burlywood;
} .heading_nav {
padding-top: 30px;
padding-bottom: 30px;
width: 100%;
height: 30px;
position: relative;
} 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_soptlight form {
float: right;
width: 100px;
height: 26px;
position: relative;
margin-right: 80px;
} form input {
height: 26px;
border-radius: 30px;
} .body {
padding: 30px;
height: auto;
width: auto;
} .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-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 10px;
color: darkgray;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="heading">
<div class="heading_nav">
<div class="heading_title">
HTML与CSS简单页面效果实例
</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="Scripts/img/bg.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">
@kikyo
</div>
</div>
</body>
</html>
3.8.1 HTML与CSS简单页面效果实例的更多相关文章
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- [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转换,我们能够对元素进行 ...
- 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. ...
- 最简单的css实现页面宽度自适应
<div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
- 利用CSS简单布局的不同组合类型
关于CSS布局页面的简单组合方式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- CSS简单使用
CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...
- 前端学习日记之HTML、CSS 简单总结
前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
随机推荐
- Fluent_Python_Part4面向对象，10-seq-hacking，序列的修改、散列和切片
第四部分第10章,序列的修改.散列和切片 中文电子书P423 这一章接第1章.第9章,以第9章定义的Vector2d类为基础,定义表示多为向量的Vector类.这个类的行为与Python中标准的不可变 ...
- cmd创建用户开启3389命令
1.创建用户chen Net user chen 1234566 /add 2.将用户chen添加到管理员组 net localgroup Administrators chen /add 3.开启3 ...
- Java 多线程学习笔记（一）
一.进程和线程 (1)进程概念的引入 为了能使程序并发执行,并且可以对并发执行的程序加以描述和控制,人们引入了“进程”的概念.---摘之计算机操作系统(第四版)汤小丹编著 (2)进程概念 进程(Pro ...
- Python中Numpy.nonzero()函数
Numpy.nonzero()返回的是数组中,非零元素的位置.如果是二维数组就是描述非零元素在几行几列,三维数组则是描述非零元素在第几组中的第几行第几列. 举例如下: 二维数组: a = np.arr ...
- 拼接 字典序min
给定一个字符串类型的数组strs,找到一种拼接方式,使得把所有字符串拼起来之后形成的字符串具有最低的字典序. 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个 ...
- 【Android多线程】异步任务AsyncTask类
https://www.bilibili.com/video/av65170691?p=9 (本文为此视频观看笔记) 一.为什么需要此类 Handler繁琐 二.理解AsyncTask 2.1 参数( ...
- PB开启源码文件
下载的源码没有pbw文件,新建workspace,然后new Target选existing application
- “数据接口请求异常：error”，Layui-table使用遇到的最大一个坑
后台返回的json格式必须和官方给的一模一样 code必须为0, code必须为0, code必须为0, code必须为0
- SQL SERVER 2005还原差异备份、日志备份 2012-03-29 11:43
其实要备份,还原最安全最有保障的是完全备份.但是完全备份肯定是需要更多的磁盘空间的开销.尤其是数据量比较大的.比如基数是500M,每天的增长量为10M,那么第一次完全备份是500M,第二次是510M, ...
- java.sql.SQLException: No suitable driver found for jdbc:mysql://localhost:3306/
出现这个异常原因可能很多: 1.编码问题 2.没有加载类驱动:换一种数据库的连接方式,就忘了这个:Class.forName(driverclass); import java.io.IOExcept ...