html的小例子

常用的前端实例：

1略

2、在网页商城中的图片当我们把鼠标放上去之后，图片会显示一个有颜色的外边框，图片某一部分的字体的颜色并发生改变

鼠标放上去之前

鼠标放上去之后：

实现的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>Title</title>

    <style>

        .ele{

            /*先给图片的变框设置一个有宽度的变框这个鼠标放上去看到的效果就是静态的*/

            border: 1px solid transparent;

            /*加变框是为了不希望看到图片的位置发生改变*/

        }

        .ele:hover{

            /*伪类 ：鼠标放上去会出现一个外边框*/

            border: 1px solid gray;

        }

        /*鼠标放上去 一部分的字体颜色发生改变*/

        .ele:hover .ele-item{

            color: red;

        }

    </style>

</head>

<body>

    <div class="ele">

        <div>123</div>

        <div class="ele-item">123</div>

    </div>

</body>

</html>

边框加颜色-并改变某一部分的字体颜色

3、鼠标放到图片上，图片上会显示一些相关的信息：
之前的效果：

设置代码之后的效果：

上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>隐藏</title>

    <style>

        .touch{

            /*父亲div的position采用relative

            那么在其内部的div只需要使用absolute就可以定位在父div的任意位置*/

            overflow: hidden;

            position: relative;

            width: 600px;

            height: 400px;

        }

        .touch img{

            /*设置图片的宽和高让它在框架的div中铺满*/

            width: 600px;

            height: 400px;

        }

        .touch .content{

            position: absolute;

            top:0;

            left:0;

            right:0;

            bottom:0;

            background-color: black;

            opacity: 0.6;   /*透明度*/

            color: red;

            text-align: center;

            visibility: hidden;

        }

        .touch:hover .content{

            /*内容设置一个伪类 鼠标放上去让其可见*/

            visibility: visible;

        }

        .touch .content .c1{

            font-size: 32px;

            padding: 50px 0;

        }

     </style>

</head>

<body>

    <div class="touch">

        <div><img src="nice.png"></div>

        <div class="content">

            <div class="c1">Hello</div>

            <div class="c2">nice girl</div>

        </div>

    </div>

</body>

</html>

图片上边加一层效果

4、画三角形：

4.1、border的特性：拐角处是特殊的样式：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

<title>画图</title>

<style>

.picture{

border-top: 30px solid black;

border-bottom: 30px solid red;

border-right: 30px solid purple;

border-left: 30px solid pink;

}

</style>

</head>

<body>

<div class="picture"></div>

</body>

</html>

拉长的效果是由于div是块级标签

4.2、将图形变成一个正方形：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>画图</title>

    <style>

        .picture{

            border-top: 30px solid black;

            border-bottom: 30px solid red;

            border-right: 30px solid purple;

            border-left: 30px solid pink;

            /*将块级变成内联的且可以设置宽度高度*/

            display: inline-block;

        }

    </style>

</head>

<body>

<div class="picture"></div>

</body>

</html>

画一个正方形

4.3画一个上三角形

就是把上边的正方的其他边设置成透明色就可以达到设置三角的目的：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>画三角</title>

    <style>

        .up{

            border-top: 30px solid transparent;

            border-bottom: 30px solid red;

            border-right: 30px solid transparent;

            border-left: 30px solid transparent;

            /*将块级变成内联的且可以设置宽度高度*/

            display: inline-block;

        }

    </style>

</head>

<body>

<div class="up"></div>

</body>

</html>

上三角

4.4画一个下三角，鼠标放上去变成下三角且颜色不一样：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>尖角</title>

    <style>

                .c1{

            border: 30px solid transparent;

            border-top: 30px solid purple;

           margin-top: 40px;

            display: inline-block;

        }

        .c1:hover{

            border: 30px solid transparent;

            border-bottom: 30px solid green;

            margin-top: 10px;

        }

           </style>

</head>

<body>

<div style="height: 100px;background-color: pink;">

    <div class="c1"></div>

</div>

</body>

</html>

下三角变上三角

5、引用特殊的图标：（awesome）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>图标</title>

    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">

    <style>

    </style>

</head>

<body>

    <i class="icon-cny"></i>

    <i class="icon-collapse"></i>

    <i class="icon-twitter-sign"></i>

</body>

</html>

6、输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>form-input</title>

    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

    <style>

        .user{

            position: relative;

            /*background-color: purple;*/

            width: 250px;

        }

        .user input{

            height: 30px;

            width: 170px;

            background-color: gainsboro;

            padding-right: 30px;

        }

        .user .ren{

            position: absolute;

            top: 10px;

            left: 180px;

        }

        .icon-collapse{

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div class="user">

        <input type="text">

        <span class="ren icon-collapse"></span>

    </div>

</body>

</html>

form-input

7、页面布局：

导航栏固定
菜单栏如果超出屏幕范围则有下拉框
内容部分超出页面也会有下拉框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>布局页-1</title>

    <style>

        body{

            margin: 0;

        }

        .pg-body{

            height: 48px;

            background-color: gray;

        }

        .pg-body .body-menu{

            top: 48px;

            position: absolute;

            width: 180px;

            background-color: pink;

            left: 0px;

        }

        .pg-body .body-content{

            position:absolute;

            top: 48px;

            left: 188px;

            right:0;

            bottom:0;

            background-color: blue;

            overflow: auto;

        }

    </style>

</head>

<body>

<div class="pg-header">

</div>

<div class="pg-body">

    <div class="body-menu">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

    <div class="body-content">

        <h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1>

        <h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1>

        <h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1>

    </div>

</div>

<div></div>

</body>

</html>

页面布局

8、有些页面打开之后我们点击登录，会弹出一个小的文本框，在屏幕的中间让用户登录或者注册，且页面的内容是可见的；

效果如下：

这个画面共有三个层次，最底部是网页，第二层是一个遮罩层（透明的灰色），第三层就是我们看到的登录注册的页面且在页面偏上的位置：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>模态对话框</title>

    <style>

        body{

            margin: 0;

            padding: 0;

        }

        .model{

            position: fixed;

            top:0;

            left:0;

            bottom:0;

            right:0;

            background: rgba(0,0,0,.6);

            z-index: 2;

        }

        .content{

            height: 300px;

            width: 400px;

            background-color: white;

            position: fixed;

            top:50%;

            left: 50%;

            z-index: 3;

            margin-top: -200px;

            margin-left: -200px;

        }

    </style>

</head>

<body>

<div style="height: 2000px;background-color: gainsboro">

    <h1>132</h1><h1>132</h1><h1>132</h1><h1>132</h1><h1>132</h1>

    <h1>132</h1><h1>132</h1><h1>132</h1>

</div>

    <div class="model"></div>

    <div class="content"></div>

</body>

</html>

模拟对话框

9、购物的时候可以选择一个或者多个

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">

    <title>商品数量的加减</title>

    <style>

        body{

            margin: 0;

        }

        .left{

            float: left;

        }

        .center{

            line-height: 26px;

            text-align: center;

        }

        .wrap{

            width: 160px;

            height: 26px;

            border: 1px solid #dddddd;

            /*background-color: gainsboro;*/

        }

        .wrap .minus{

            height: 26px;

            width: 30px;

            cursor: pointer;

        }

        .wrap .plus{

            height: 26px;

            width: 30px;

            cursor: pointer;

        }

        .wrap .count input{

            height: 24px;

            border: 0;

            width: 98px;

            padding: 0;

            border-right: 1px solid #dddddd;

            border-left: 1px solid #dddddd;

            text-align: center;

        }

    </style>

</head>

<body>

<div class="wrap">

    <div class="minus left center" onclick="Minus();">-</div>

    <div class="count left">

        <input id="count" type="text" value="">

    </div>

    <div class="plus left center" onclick="Plus();">+</div>

</div>

<script type="text/javascript">

    function Plus(){

        var old_str = document.getElementById("count").value;

        var old_int = parseInt(old_str);

        var new_int = old_int + 1;

        document.getElementById('count').value = new_int;

    }

    function Minus(){

        var old_str = document.getElementById("count").value;

        var old_int = parseInt(old_str);

        var new_int = old_int - 1;

        document.getElementById('count').value = new_int;

    }

</script>

</body>

</html>

商品数量的加减

html的小例子的更多相关文章

springmvc入门的第一个小例子
今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...
java即时通信小例子
学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...
Runtime的几个小例子（含Demo）
一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.) 1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数); [runti ...
bootstrap 模态 modal 小例子
bootstrap 模态 modal 小例子 <html> <head> <meta charset="utf-8" /> <title ...
INI配置文件分析小例子
随手写个解析INI配置字符串的小例子带测试 #include <iostream> #include <map> #include <string> #inclu ...
JavaScript小例子：复选框全选
JavaScript小例子:复选框全选这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
【zTree】 zTree使用的小例子
使用zTree树不是第一次了但是还是翻阅着之前做的对照着使用起来比较方便这里就把小例子列出来总结一下使用步骤这样方便下次使用起来方便一点使用zTree树的步骤: 1.首先在 ...
js小例子（标签页）
运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...
sbrk与brk的使用小例子
sbrk() 和 brk() - Unix的系统函数 sbrk()和brk() 系统的底层会维护一个位置,通过位置的移动完成内存的分配和回收.映射内存时以一个内存页作为基本单位. void* ...
c# BackGroundWorker 多线程操作的小例子
在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

随机推荐

python中的迭代器详解
#原创,转载请先联系理论性的东西有点枯燥,耐心点看- 1.迭代是什么? 我们知道可以对list,tuple,dict,str等数据类型使用for...in的循环语法,从其中依次取出数据,这个过程叫做 ...
ssm框架整合配置文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
使用 mybatis和oracle 数据库出现的问题
mybatis 官网教程 http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html 出现 Could not set parameters for ma ...
使用 gulp 压缩 JS
使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成 ...
Redis 源码走读（二）对象系统
Redis设计了多种数据结构,并以此为基础构建了多种对象,每种对象(除了新出的 stream 以外)都有超过一种的实现. redisObject 这个结构体反应了 Redis 对象的内存布局 type ...
tomcat虚拟主机
直接看配置文件吧,有点基础的都懂 <Host name="localhost" appBase="webapps" unpackWARs="fa ...
sqlmap的小试牛刀
这次算是一次用sqlmap的例子,写的很水. 目的:通过工具扫描到了后台的数据库的地址(如下图),想通过sqlmap找到数据库的用户和密码进入到数据库(首先可以尝试一下root:root一般都是这个情 ...
POJ 1321 棋盘问题【DFS/回溯/放与不放/类似n皇后】
棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 62164 Accepted: 29754 Description 在一 ...
【数位dp】hdu3555 Bomb
题意就是找0到n有多少个数中含有49.数据范围接近10^20 DP的状态是2维的dp[len][3]dp[len][0] 代表长度为len不含49的方案数dp[len][1] 代表长度为len不含49 ...
【枚举】bzoj1800 [Ahoi2009]fly 飞行棋
暴力枚举. #include<cstdio> #include<algorithm> using namespace std; ],sum[],half,ans; int qu ...

html的小例子

html的小例子的更多相关文章

随机推荐

热门专题