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简单页面效果实例的更多相关文章

  1. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  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. 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. ...

  5. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...

  6. 《Two Days DIV + CSS》读书笔记——CSS控制页面方式

    1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...

  7. 利用CSS简单布局的不同组合类型

    关于CSS布局页面的简单组合方式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

  9. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

随机推荐

  1. 健壮的I/O(RIO)

    在上篇Unix系统级I/O中,我们介绍了有关在Unix环境下读取和写入文件的函数read和write,也提到了标准I/O在进行网络I/O时的局限性.但是在某些地方,直接使用read和write往往会出 ...

  2. python基础（三）---Python基础语法

    1. 注释 1.1 单行注释 语法格式: #[空格]说明性文字信息 添加快捷键: Ctrl+/ 取消快捷键: Ctrl+/ 1.2 多行注释 语法格式: """说明性文字 ...

  3. html和css的重难点知识

    目录 html总难点总结: 1. 块级标签与内联标签的区别 1.1 块级标签: 1.2 内联标签: 2. 选择器 2.1 定义 2.2 选择器的分类 2.1 选择器的分类 3. css中margin, ...

  4. ISR4K-IOS XE EPC

    1.该操作在ISR4K的平台操作,简单的执行了一个控制层面的抓包 配置命令: R01#monitor capture A control-plane both R01#monitor capture ...

  5. java怎么调用子类中父类被覆盖的方法

    public class b { { void show() { System.out.println("b"); } } public class c extends b { v ...

  6. 【转载】Eclipse 最常用快捷键 (动画讲解)，最简单的一些快捷键

    Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的快捷键操作,并且精心录制了动画, 让你一看就会. ...

  7. 杭电 2136 Largest prime factor（最大素数因子的位置）

    Largest prime factor Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  8. Linux终端的一些快捷键命令

    一.初识linux的终端种类:本地.远程 查看本终端命令: #tty 命令,看到当前所处的终端 #(w)who 命令,看到系统中所有登录的用户 其中,tty 终端为表示在本地命令行模式下打开的终端:p ...

  9. ES-9200端口与9300端口

    (1)Elasticsearch是基于lucene的全文检索服务器 (1)9300:ES节点之间的通讯使用 (2)9200:ES节点和外部通讯使用

  10. Dart语言学习(十三) Dart Mixins 实现多继承

    Mixins Mixins(混入功能)相当于多继承,也就是说可以继承多个类,使用with关键字来实现Mixins的功能. 那么多个类中有相同的方法时候,会被覆盖吗?覆盖的先后是什么? class A{ ...