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. jmeter数据分析，压测实现

    1.开始之前,先介绍下压测的一些基本插件:线程组常用分为三类:user thread , step thread ,ultimate  thread : user thread :最通用的最原始的线程 ...

  2. PHP如何实现处理过期或者超时订单的，并还原库存

    订单是我们在日常开发中经常会遇到的一个功能,最近在做一个订单过期与超时的开发.订单过期与超时就不用我解释了吧,其实两者都是同一个问题来着,就是订单未支付的处理,我们要做的是对这些未支付的订单到了一定时 ...

  3. spring web 测试用例

    spring web 测试有三种方式 1. 自己初始化 MockMvc 2.依赖@springbootTest 它会帮你生产 webTestClient ,只需自己注入即可. 3.启动的时候,不加载整 ...

  4. django 中url与path小记

    1. 在django 2.0中增加了一些新的特性 更简单的URL路由语法 (Simplified URL routing syntax) admin应用的针对移动设备的优化改进(Mobile-frie ...

  5. 服务器(1)——IIS(1)——Windows7中IIS简单安装与配置(详细图解)

    最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功. 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二.点击左侧“打开或关闭Windows功能” ...

  6. Python3中reduce和lambda的用法

    reduce() 函数将一个数据集合(iterable[, initializer])可以看出是包含了初始化数据的,且初始化数据位列第1位,即集合中的第1个元素)中的所有数据进行下列操作:先对集合中的 ...

  7. C语言-排序和查找

    一 冒泡排序:算法特点:两层循环外层控制排序的趟数,内存控制相邻元素两两比较的次数.n个数共需n-1趟,(i=1;i<n;i++)趟数=n-1-1+1,其中第j趟需要相邻元素两两比较的次数为n- ...

  8. Mac 下 vim 常用命令

    vim 三种模式:命令模式.插入模式.底线命令模式. 切换模式: 命令模式: 启动 vim 进入命令模式: i 切换到插入模式,以输入字符. x   删除当前光标所在处的字符. :   切换到底线命令 ...

  9. css3 ：default应用场景

    引用自 张鑫旭文章.

  10. [理解] C++ 中的 源文件 和 头文件

    我是学 C井 的, 现在在工作中主要使用的编程语言是 Java, 还记得当初在第一次接触到 Cpp 的时候, 听到的第一个概念就是 Cpp 的头文件和源文件, 当初理解了好久, 死活都弄不明白, 现在 ...