<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS测试界面</title>

        <style>

            body {                                            /* 重写body的属性 */

                background: url(../img/backgroud.jpg);

                background-attachment: fixed;

            }

            h1 {

                font-size: 30px; color:  blue; position: absolute;

                left: 500px;

                top: 200px;

                background: #D0E4FE;                        /* color：字体颜色， background：文本背景色 */

            }

            h2 {

                text-align: center;                            /* 文本位置 */

                text-indent: 2px;                            　　/* 开头缩进 */

                letter-spacing: 2px;                        　　/* 字符距离 */

            }

            a:link, a:visited {                                /* 未访问链接、已访问链接 */

                text-decoration: none;                        /* 取消链接下划线 */

                text-align: center;                            /* 字体居中 */

                font-weight: bold;                            /* 字体的厚度 */

                color:#FFFFFF;

                background-color:#98bf21;

                padding: 4px;                                /* 边框的厚度 */

            }

            a:hover, a:active {                                /* 鼠标移到链接上、鼠标点击链接时 */

                background: #7A991A;

            }

            p.abb {                                            /* 自定义类，防止所有 p 标签全部改变 */

                font-size: 30px;

            }

            p.houdu {

                font-weight:;

                font-size: 20px;

            }

            ul.fruit{

                list-style:decimal

            }

            table {

                width: 10%;                                    /* 10%，与屏幕的比；   100px，固定宽度 */

            }

            table,td,th {

                border: 1px solid black;                    /* 统统重写边框形式  */

                text-align: center;

                border-collapse: collapse;

            }

        </style>

        <style>

            div.divr {

                width:140px;                                /* 自定义div的屏幕显示范围 */

                border:1px solid black;                        /* 设置边框形式 */

                text-align: center;                            /* 字体居中 */

            }

            .hidden {

                visibility: hidden;                            /* 将元素隐藏起来 */

            }

            img.abb {

                float:left;                                    /* 浮动 */

                width: 150px;

                margin: 10px;                                /* 周围10px也属于元素的范畴 */

            }

            .text_line {

                clear:both;                                    /* 清除float的影响（个人感觉） */

                margin-bottom:2px;

            }

            ul.abb {

                float: left;

                padding:;

                margin: 5px;

                list-style: none;

            }

            li.abb {

                display:inline;

                text-align: center;

                margin: 10px;

            }

            input:focus {

                background: skyblue;                                /* 给输入框增加背景 */

            }

        </style>

    </head>

    <body>

        <h1>CSS测试正式开始！</h1>                                        <!-- 重写的属性会在所有使用中生效 -->

        <h2>H2测试</h2>

        <a href="http://www.baidu.com" target="_blank">百度一下</a>    <!-- 新窗口打开链接 -->

        <p class="abb">测试样例</p>

        <p>测试样例2</p>                                                <!-- 并不是所有 p 标签都被重写 -->

        <p class="houdu">字体厚度如何</p>

        <h1>覆盖</h1>                                                <!-- 如果h1重写设定了位置，则所有都会设定 -->

        <ul class="fruit">

            <li>苹果</li>

            <li>橘子</li>

            <li>西瓜</li>

            <li>菠萝</li>

        </ul>

        <table>

            <tr>

                <th>季节</th>

                <th>时间</th>

            </tr>

            <tr>

                <td>春天</td>

                <td>三月</td>

            </tr>

        </table><br>

        <div>凤兮凤兮归故乡，遨游四海求其凰。</div><br>

        <div class="divr">凤兮凤兮归故乡，遨游四海求其凰。</div>

        <h3>显示标题， 注：下面含有隐藏标题，占位置</h3>

        <h3 class="hidden">隐藏标题</h3>

        <div>使用div（div占用一行）</div>

        <div>使用div</div>

        <span>使用span（span只占内容宽度）</span>

        <span>使用span</span><br>

        <h3 style="cursor: pointer;">请把鼠标移向这里</h3>                        <!-- 鼠标停留在上面的效果，这里是手指指向 -->

        <img class="abb" src="../img/price.jpg">

        <h4>凤兮凤兮归故乡</h4>

        <h4>遨游四海求其凰</h4>

        <h4>时未遇兮无所将</h4>

        <h4>何悟今兮升斯堂</h4>

        <ul class="abb">

            <li class="abb"><a href="http://www.baidu.com" target="_blank">百度网</a></li>

            <li class="abb"><a href="http://www.qq.com"  target="_blank">腾讯网</a></li>

            <li class="abb"><a href="http://www.taobao.com"  target="_blank">淘宝网</a></li>

            <li class="abb"><a href="http://www.sina.com.cn"  target="_blank">新浪网</a></li>

        </ul><br>

        <h3 class="text_line"></h3>

        <form>

            账号:<input type="text"><br>

            密码:<input type="password"><br>

                <input type="submit" value="登陆">

        </form>

    </body>

</html>

使用Css建几个简单的网页跳转按钮：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS 导航栏界面</title>

        <style>

            body {

                background: url(../img/backgroud.jpg);

                background-attachment: fixed;

            }

            a {

                text-decoration: none;

            }

            ul{

                float: left;

                list-style: none;

                margin: 5px;

            }

            li.shui{

                float: left;

            }

            a:link, a:visited {

                display: block;

                width: 120px;

                font-weight:;

                text-align:center;

                color: #FFFFFF;

                height: 25px;

                background-color:#98bf21;

                padding: 1px;

            }

            a:active, a:hover {

                background:#7A991A;

            }

        </style>

    </head>

    <body>

        <ul>

            <li><a href="http://www.baidu.com" target="_blank">百度</a></li>

            <li><a href="http://www.qq.com"  target="_blank">腾讯</a></li>

            <li><a href="http://www.taobao.com"  target="_blank">淘宝</a></li>

            <li><a href="http://www.sina.com.cn"  target="_blank">新浪</a></li>

        </ul>

        <ul>

            <li class="shui"><a href="http://www.baidu.com" target="_blank">百度</a></li>

            <li class="shui"><a href="http://www.qq.com"  target="_blank">腾讯</a></li>

            <li class="shui"><a href="http://www.taobao.com"  target="_blank">淘宝</a></li>

            <li class="shui"><a href="http://www.sina.com.cn"  target="_blank">新浪</a></li>

        </ul>

    </body>

</html>

其实就是把鼠标的不同操作做自定义，例如下述就是当鼠标 hover 上面时改变模块的背景色；

Css基础笔记（部分）的更多相关文章

  1. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  2. CSS基础笔记

    之前没有开通好博客,笔记都记录在有道云,今天全部转过来!!! 1.当同一个html元素不止一个样式定义时,内联样式(在html元素内部)拥有最高的优先权:其他如内部样式表(位于<head> ...

  3. html&css基础笔记

    有道笔记:http://note.youdao.com/noteshare?id=a6d7eab195085655bbfce86665524e35 一 HTML结构标签 HTML基本标签 标题标签 & ...

  4. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  5. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  6. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  7. 学习笔记（一） HTML+CSS基础课程

    这个周把慕课网的<HTML+CSS基础课程>课程学完,内容都是非常非常基础的,不过还是学到了几个小知识点,记下来先. <a>超链接发送邮件 直接上把他的图片给挪过来了,我就不打 ...

  8. 总结了一下css的部分基础知识点。---css学习笔记01

    一. css基础 1. 什么是css 层叠样式表:层叠 2. css的三种使用方式 style 属性 --> <div style="css属性值"></d ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. CentOS6.5 QT5.3 找不到GLIBCXX3.4.15解决方法

    下载安装后 启动的时候提示 GLIBCXX_3.4.15,发现libstdc++.so.6的版本过, 在安装qt-creator的时候运行这个IDE就出现了这个问题,是由于libstdc++.so.6 ...

  2. Centos7下使用yum安装lnmp zabbix3.2

    1:配置epel-release mysql zabbix 源 配置epel源 wget http://mirrors.aliyun.com/epel/epel-release-latest-7.no ...

  3. postcss

    一.简介 PostCSS 本身是一个功能比较单一的工具.它提供了一种方式用 JavaScript 代码来处理 CSS.它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tre ...

  4. C语言指针的高级操作

    C语言指针的高级操作 指针  指针 在上篇博客中我介绍了C语言指针的最基本操作,那么我在这篇博客中会介绍一下C语言指针的一些骚操作. 指向指针的指针 这名字乍一听有点拗口,再次一听就更加拗口了.先看定 ...

  5. 并发编程——ConcurrentHashMap#helpTransfer() 分析

    前言 ConcurrentHashMap 鬼斧神工,并发添加元素时,如果 map 正在扩容,其他线程甚至于还会帮助扩容,也就是多线程扩容.就这一点,就可以写一篇文章好好讲讲.今天一起来看看. 源码分析 ...

  6. Nullable<T>、Nullable、null、?修饰符的区别

    这章我们讨论一下Nullable<T>.Nullable.null.?修饰符的区别 原创文章 Nullable<T>的前世今生 讨论它们之前,我们有必要讨论一下Nullable ...

  7. VS2017 IIS 部署.net core web项目

    1.点击IIS,查看模块 查看是否安装了 AspNetCoreModule 模块,如果没有安装可下载:https://dotnet.microsoft.com/download 下载安装后,即可部署项 ...

  8. oracle中数据类型number(m,n)

    oracle中数据类型number(m,n)中m表示的是所有有效数字的位数,n表示的是小数位的位数.m的范围是1-38,即最大38位. 1> .NUMBER类型细讲:Oracle   numbe ...

  9. Mybatis插件开发

    前面几篇文章介绍了Mybtis中四个重要的对象,其中提到它们都是在Configuration中被创建的,我们一起看一下创建四大对象的方法,代码如下所示: public ParameterHandler ...

  10. 【 js 基础 】【 源码学习 】源码设计 （更新了backbone分析）

    学习源码,除了学习对一些方法的更加聪明的代码实现,同时也要学习源码的设计,把握整体的架构.(推荐对源码有一定熟悉了之后,再看这篇文章) 目录结构:第一部分:zepto 设计分析 第二部分:unders ...