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. .NET Core快速入门教程 3、使用VS Code开发.NET Core控制台应用程序

    一.前言 本篇开发环境 1.操作系统: Windows 10 X642.SDK: .NET Core 2.0 Preview3.VS Code:1.14 二.安装&配置 1.VS Code下载 ...

  2. iOS开发之通过Framework建立项目依赖

    https://www.jianshu.com/p/d146db167bf3 项目开发时经常会遇到个别模块想打包成framework的情况,传统的打包方式太繁琐,反复测试时很麻烦,不如一个项目管理来得 ...

  3. Python：json 模块

    字符串转dict.list data = "[{....},{...},...]" list_data = json.loads(data) dict.list转字符串 list ...

  4. 《Web安全攻防 渗透测试实战指南 》 学习笔记 （五）

    Web安全攻防 渗透测试实战指南   学习笔记 (五)   第四章 Web安全原理解析  (一) (一)SQL注入的原理 1.web应用程序对用户输入数据的合法性没有判断. 2.参数用户可控:前端传给 ...

  5. HDU4280 Island Transport

    ISAP求最大流模板 #include<cstdio> #include<cstring> #include<algorithm> #include<iost ...

  6. 吴裕雄--天生自然TensorFlow2教程：反向传播算法

  7. IIS 7.5 URL重写参数

    URL 重写规则由以下部分组成: 模式 - 可以理解为规则,分通配符和正则匹配     条件 - 可以理解为字符串     操作 - 操作用于指定如果URL字符串与规则模式匹配并且满足所有规则条件时应 ...

  8. jqGird错误“decimalSeparator”的解决办法

    在使用jqGrid的过程中,突然出现以下错误: jquery.jqGrid.js:15016 Uncaught TypeError: Cannot read property 'decimalSepa ...

  9. 第七届蓝桥杯javaB组真题解析-方格填数（第六题）

    题目 /* 方格填数 如下的10个格子 +--+--+--+ | | | | +--+--+--+--+ | | | | | +--+--+--+--+ | | | | +--+--+--+ (如果显 ...

  10. Java 笔试题

    有一些还是存在问题,欢迎大家一起探讨. 在Java类中,使用以下( )声明语句来定义公有的int型常量MAX. A. public int MAX = 100; B. final int MAX = ...