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. Sudo临时提权配置

    目录 Sudo临时提权配置 参考 Sudo简介 Sudo配置文件 Sudo配置语法 Sudo配置实例 Sudo日志记录 Sudo临时提权配置

  2. 《JavaScript高级程序设计》读书笔记（三）基本概念第二小节 Number类型

    内容---语法 上一小节---数据类型 本小节 number类型---流程控制语句---理解函数 number类型--使用IEEE754格式来表示整数和浮点数值(双精度数值)--规定了数值字面量格式, ...

  3. 【Go语言系列】1.1、GO语言简介：什么是GO语言

    一.Go的起源 Go语言的所有设计者都说,设计Go语言是因为 C++ 给他们带来了挫败感.在 Google I/O 2012 的 Go 设计小组见面会上,Rob Pike 是这样说的: 我们做了大量的 ...

  4. php编译安装扩展redis及swoole

    一.安装redis扩展 下载redis扩展包以及解压 wget https://github.com/edtechd/phpredis/archive/php7.zip unzip php7.zip ...

  5. ubuntu 命令记录

    1.su root  进入root模式 2.ifconfig 查看ip地址 3.ls 查看文件 4./etc/init.d/matrix-gui-2.0 stop 关闭matrix界面 5.cd /文 ...

  6. spark报错 java.lang.NoClassDefFoundError: scala/xml/MetaData

    代码: 报错信息: java.lang.NoClassDefFoundError: scala/xml/MetaData 原因:确失jar包 <dependency> <groupI ...

  7. VUE 鼠标右键自定义

    需要在区域内右击自定义菜单的DIV绑定contextmenu右击事件 <div   style="width:100% ; z-index: inherit;position: rel ...

  8. AttributeError: 'Word2Vec' object has no attribute 'vocab'

    在 Gensim 1.0.0 版本后移除了 vocab,需使用 model.wv.vocab

  9. sqlmap命令手册

    http://127.0.0.1/sqli-labs-master/Less-1/?id=1 当给sqlmap上面这么一个url的时候,它会自动: 1.判断可注入的参数 2.判断可以用那种SQL注入技 ...

  10. 深入理解 ajax系列第一篇（XHR 对象）

    1999年,微软公司发布了IE5, 第一次引入新功能:允许javascript 脚本向服务器发起 hffp 请求.这个功能方式并没有被引起注意,知道2004年 Gmail 发布和 Google Map ...