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. python的组合数据

    python的组合数据包括:1.列表list[   ] 2.元组tuple(),3.字典dict{"x":"y"},4.集合set{} 1.创造组合数据:均可直 ...

  2. Golang redis 学习指南

    安装 我使用的是 https://github.com/go-redis/r... 这个 golang 客户端, 因此安装方式如下: go get gopkg.in/redis.v4 接着在代码中导入 ...

  3. 吴裕雄 Bootstrap 前端框架开发——简例

    <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta cha ...

  4. 吴裕雄 python 神经网络——TensorFlow 花瓣分类与迁移学习（3）

    import glob import os.path import numpy as np import tensorflow as tf from tensorflow.python.platfor ...

  5. 蓝桥杯-铺瓷砖（dfs)

    问题描述 有一长度为N(1< =N< =10)的地板,给定两种不同瓷砖:一种长度为1,另一种长度为2,数目不限.要将这个长度为N的地板铺满,一共有多少种不同的铺法? 例如,长度为4的地面一 ...

  6. 时隔两天，三星再称GalaxyFold已准备就绪，王自如的脸还好吗？

    编辑 | 禾斗 出品 | 于见(mpyujian) 据消息人士透露,三星已经完成对其有缺陷的折叠智能手机进行了重新设计,Galaxy Fold准备适时再度推出,但问题是,作为消费者,我们准备好了吗? ...

  7. 关于编译QT官方的MQTT库.

    先放一位博主的资料,参阅了其中资料,表示感谢: https://www.cnblogs.com/yexiaopeng/p/8542894.html ########################## ...

  8. scrapy中使用 IP 代理

    在 scrapy 中使用 ip 代理需要借助中间件的功能 首先在settings 中设置好中间件,中间件优先级数字越小越先被执行 , } 然后编写中间件,拦截请求设置代理 class ProxyMid ...

  9. java_3:JVM、JRE、JDK区别和联系

    首先 三者之间存在包含关系JVM + 核心类库 = JREJRE + java开发工具(javac.exe/jar.exe) = JDK 什么是JVM? 我们知道Java语言有一个独特的优点就是可以跨 ...

  10. 利用java反射调用类的的私有方法--转

    原文:http://blog.csdn.net/woshinia/article/details/11766567 1,今天和一位朋友谈到父类私有方法的调用问题,本来以为利用反射很轻松就可以实现,因为 ...