HTML前端--各种小案例

掬一捧清水,放逐在江河,融入流逝的岁月,将心洗净;

捻一缕心香,遥寄在云端,在最深的红尘里重逢,将心揉碎;

望一程山水,徘徊在月下,在相思渡口苦守寒冬,将心落寞。

案例一:

隐藏扩展域,并去掉after,并去掉高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{   /*善用after和defore*/
            content: "111";  /*注意加引号*/
            clear: both;
            display: block;
            visibility: hidden;  /*隐藏并有高度*/
            height: 0;   /*去掉高度*/

        }
        .c{
            width: 100px;
            /*height: 100px;*/
            background-color:red;
        }
        .c .item{
            float:left;
            width:30px;
            background-color: green ;
        }

    </style>
</head>
<body>
    <div class=‘c clearfix‘>
        <div class=‘item‘>123</div>
        <div class=‘item‘>456</div>

    </div>

    <div class="test">内容</div>
</body>
</html>

更新后的代码

案例二:

当鼠标放在一个图片上显示这个商品的信息,或者一些别的东西,比如

.touch:hover .content{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .touch{
                width: 200px;
                height: 200px;
                overflow: hidden;
                position: relative;
            }
            .touch .content{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0,.6);
                color: white;
                text-align: center;
                visibility: hidden;
            }
            .touch:hover .content{
                visibility: inherit;
            }

        </style>
    </head>
    <body>
        <div class="touch">
            <div><img src="2.jpg"></div>
            <div class="content">
                <div class="c1">ALEX</div>
                <div class="c1">500-1000(日)</div>
            </div>
        </div>
    </body>
</html>

案例及代码

案例三:

要求在当前页面不超出多余内容,超出了变成滚动条显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .pg_top{
                height: 48px;
                background-color: #dddddd;
            }
            .pg_body_menu{
                position: absolute;
                width: 180px;
                background-color: blueviolet;
                left: 0;
            }
            .pg_body_content{
                position: absolute;
                top: 48px;
                left: 190px;
                right: 0;
                bottom: 0;
                background-color: blueviolet;
                overflow: auto;  /*可以利用overflow变导航条*/
            }
        </style>
    </head>
    <body>
        <div class="pg_top">

        </div>
        <div class="pg_body">
            <div class="pg_body_menu">
                <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            </div>
            <div class="pg_body_content">
                <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            </div>
        </div>

    </body>
</html>

代码

案例四:

尖角图标,尖角符号是向上,当鼠标点的时候尖角符号向下

.c1{ /*这个是麻烦写法*/
                border-top: 30px solid yellow ;
                border-left: 30px solid green;
                border-bottom: 30px solid blue;
                border-right: 30px solid black;
                display: inline-block;
            }
            .c1{ /*半个*/
                border-top: 30px solid yellow ;
                border-left: 30px solid green;
                border-bottom: 0px solid blue;
                border-right: 30px solid black;
                display: inline-block;
            }

部分代码-学习的第一阶段

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*.c1{ 这个是麻烦写法
                border-top: 30px solid yellow ;
                border-left: 30px solid green;
                border-bottom: 0px solid blue;
                border-right: 30px solid black;
                display: inline-block;
            }*/
            .c1{
                border: 30px solid transparent ;
                border-top: 30px solid yellow ;
                display: inline-block;
                margin-top: 40px;
            }
            .c1:hover{
                border:  30px solid transparent;
                border-bottom: 30px solid yellow ;
                margin-top:10px ;
            }
        </style>
    </head>
    <body>
        <div style="height: 150px; background-color: red;">
            <div class="c1"></div>

        </div>
    </body>
</html>

代码

案例五:

模态对话框

就是弹出一个框,然后显示一些内容(其实是分为三层)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .model{
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0,0,0,0.5);
                z-index: 2;
            }
            .content{
                height: 300px;
                width: 400px;
                background-color: white;
                color: #000000;
                position: fixed;
                top: 50%;
                left: 50%;
                z-index: 3;
                margin-left: -200px;
                margin-top: -200px;
                font-size:32px ;
                line-height: 300px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div style="height: 2000px; background-color: red;">
            <h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1>
            <h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1>
        </div>
        <div class="model"></div>
        <div class="content">悲伤那么大!!!</div>
    </body>
</html>

案例六:

输入框里面有图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .user{
                position: relative;
                width: 250px;
            }
            .user input{
                height: 30px;
                width: 150px;
                padding-right: 20px;

            }
            .user .ren{
                position: absolute;
                top: 8px;
                left: 160px;
            }
        </style>
    </head>
    <body>
        <div class="user">
            <input type="text" />
            <span class="ren">R<!--这里可以放图片--></span>

        </div>
    </body>
</html>

代码

案例七:

商品加减框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .wrap{
                width: 150px;
                height: 22px;
                border: 1px solid #ddd;
                /*background-color: red;*/
                position: relative;
                left: 100px;
                top: 100px;
            }
            .wrap .minus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
            }
            .wrap .plus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
            }
            .wrap .count input{
                padding: 0;  /*input是有padding的*/
                border: 0;
                width: 104px;
                height: 22px;
                border-left: 1px solid #dddddd;
                border-right: 1px solid #dddddd;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="minus left">-</div>
            <div class="count left">
                <input type="text"  />
            </div>
            <div class="plus left">+</div>
        </div>
    </body>
</html>

代码

案例八:

商品加减框加减,鼠标并变化样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .wrap{
                width: 150px;
                height: 22px;
                border: 1px solid #ddd;
                /*background-color: red;*/
                position: relative;
                left: 100px;
                top: 100px;
            }
            .wrap .minus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
                cursor: pointer;
            }
            .wrap .plus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
                cursor: pointer; /*当鼠标指的时候变样式*/
            }
            .wrap .count input{
                padding: 0;  /*input是有padding的*/
                border: 0;
                width: 104px;
                height: 22px;
                border-left: 1px solid #dddddd;
                border-right: 1px solid #dddddd;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="minus left" onclick=‘Minus();‘>-</div>
            <div class="count left">
                <input id=‘count‘ type="text"  />
            </div>
            <div class="plus left" 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>

代码

案例九:

当鼠标指到图片,会变成字体和边框颜色会变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .ele{
                width: 300px;
                height: 300px;
                background-color: yellow;
            }
            .ccc{
                width: 300px;
                height: 200px;
                background-color: green;
            }
            .ddd{
                width: 300px;
                height: 100px;
                background-color: red;
            }
            .ele:hover .ddd{
                background-color: blueviolet;
                font-size: 38px;
            }
        </style>
    </head>
    <body>
        <div class="ele">
            <div class="ccc">图片1</div>
            <div class="ddd">
                ddd
            </div>
        </div>
    </body>
</html>

代码

时间: 2024-10-15 14:44:35

HTML前端--各种小案例的相关文章

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

网易新闻小案例

抓取网易新闻的接口,用代理服务器解决跨域,在前端页面上展示. 需要的文件有: index.html,app.js, headLine.html,headlineController.js, detail.html,detailController.js, 引入js文件:angular.js和angular-route.js, 服务器:nodePost.js. index.html内容,主界面显示,引入需要的文件 <!DOCTYPE html> <html ng-app="myA

8天入门docker系列 —— 第五天 使用aspnetcore小案例熟悉容器互联和docker-compose一键部署

原文:8天入门docker系列 -- 第五天 使用aspnetcore小案例熟悉容器互联和docker-compose一键部署 这一篇继续完善webnotebook,如果你读过上一篇的内容,你应该知道怎么去挂载webnotebook日志和容器的远程访问,但是这些还远不够,webnotebook 总要和一些数据库打交道吧,比如说mysql,mongodb,redis,通常情况下这些存储设备要么是以容器的方式承载,要么是由DBA在非容器环境下统一管理. 一:webnotebook连接容器redis

Windows Server之浅谈SMB以及SMB小案例分享

SMB由来 服务器消息区块(英语:Server Message Block,缩写为SMB,服务器消息区块),又称网络文件共享系统(英语:Common Internet File System,缩写为CIFS),一种应用层网络传输协议,由微软开发,主要功能是使网络上的机器能够计算机文件.打印机.串行端口和通讯等资源.它也提供经认证的进程间通信机能.它主要用在装有Microsoft Windows的机器上,在这样的机器上被称为Microsoft Windows Network. SMB版本 OS W

Thinkphp 生成订单号小案例

Thinkphp 生成订单号小案例小伙伴们在日常的商城项目开发中,都会遇到订单号生成的问题,今天呢思梦PHP就带领大家去解读一下生成订单号的问题!首先,订单号我们要明确它有有3个性质:1.唯一性 2.不可推测性 3.效率性,唯一性和不可推测性不用说了,效率性是指不能频繁的去数据库查询以避免重复.况且满足这些条件的同时订单号还要足够的短.不知道小伙伴们在日常的项目中是否也和我一样去思考过生成订单的一些小问题,可能你也会说,这些东西不用想的那么复杂,其实呢,小编也是同意大家的看法,但是殊不知我们做程

几个数据库的小案例(一):将文本文件中的信息导入数据库的表中

从文本文件添加到数据库用户表的记录(有两个文件:frmMain.cs  SqlHelper.cs  ) //FrmMain.cs//作者:Meusing System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Fo

Java小案例(行星移动)

Java小案例 行星移动:参考:三百集 使用软件:idea2017,java 1,图片集:这里  (idea图片源放在target目录下,才能访问到),建议从小往上看... 2,定义MyFrame package my.university; import java.awt.*; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; public class MyFrame extends Frame {

图书借阅的小案例

这个小案例,主要练习类和方法的创建与调用 void Main() { while (true) { Console.WriteLine ("请输入标题或作者"); var key = Console.ReadLine().Trim(); Library.Search(key).Dump(); Console.WriteLine ("请输入要借阅/归还的图书编号"); var id = Convert.ToInt32(Console.ReadLine()); var

Cookie小案例-----记住浏览过的商品记录

Cookie小案例------记住浏览过的商品记录 我们知道,这个功能在电商项目中很常见.这里处理请求和页面显示都是由servlet实现,主要是为了体现cookie的作用, 实现功能如下: 1,点击购买的商品后,显示到另一页面 2,记住用户浏览过的商品,并在页面时中显示 3,当浏览过的数量超过最大值限度时,最下面一个商品被挤下去 4,当浏览过的商品本身就在浏览记录中,显示列表将其从中间移到最上面 显示一打开网站的样子和显示用户的浏览记录: package cn.itcast.cookie; im