CSS样式框模式的应用——自己手写的，值得一看

最新推荐文章于 2024-02-20 15:15:14 发布
最新推荐文章于 2024-02-20 15:15:14 发布
阅读量608 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tony_pake/article/details/77580089
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
tr{
background-color:#FFFFFF;
height:30px;
}
span{
color:red;
}
.l5{
margin-left:5px;
}
.r5{
padding-right:5px;
text-align:right;
}
.xh{
border:1px solid black;
}
</style>
</head>


<body>
<center>
<h2>请认真填写一下内容</h2>
<table border=0 style="margin-top:1cm;" cellspacing="1"  bgcolor="#000000" width="500px">
<tr style="background-color:#0000FF; color:#FFFFFF; text-align:center;">
<td colspan="2">
用户注册(带<span>*</span>必填)
</td>
</tr>
<tr>
<td class="r5">用户名</td>
<td align="left">
<input  class="l5 xh" type="text" /><span>*</span>(不得大于20个中文字)
</td>
</tr>
<tr>
<td class="r5">密码</td>
<td align="left">
<input  class="l5 xh" type="password" /><span>*</span>
</td>
</tr>
<tr>
<td class="r5">重复密码</td>
<td align="left">
<input  class="l5 xh" type="password" /><span>*</span>
</td>
</tr>
<tr>
<td class="r5">性别</td>
<td align="left">
<input  class="l5" type="radio" name="sex" checked="checked" />男 <input  name="sex" type="radio" />女
</td>
</tr>
<tr>
<td class="r5">年龄</td>
<td align="left">
<select  class="l5">
<option>10</option>
<option>20</option>
<option>30</option>
</select>
</td>
</tr>
<tr>
<td  colspan="2" align="center">
<input type="reset" class="xh"  style="margin-right:50px" value="重置"/>
<input type="submit" class="xh"  value="注册"/>
</td>
</tr>


</table>
</center>
</body>
</html>
Tony_pake
关注
CSS常见布局——两栏、三栏布局
zhaohb2016的博客
07-12 1145
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：左盒子，float：left ，宽度固定设为200px; 右盒子：margin-left:200px;宽度默认（块级元素不设置宽度或auto时为100%） 2、float+BFC 左盒子，float：left ，宽度固定设为200px; 右盒子，设置overflow:hidden,触发了BFC，其中BFC特性为不与浮动元素重叠 3、float+flex 父盒子：display：flex; 左盒子，float：left ，宽度固定设为
JS实例——手写网页轮播图
Thaley的博客
02-11 2116
JS手写网页轮播图，拆分模块进行手写。含有自动播放，但没有添加节流操作。 需要准备四个模块： 一个大的盒子进行包裹（main）、（focus f1） 左右元素按钮（arrow-l、arrow-r） 小圆点滚动显示（circle） 核心滚动模块图片
使用React手写一个对话框或模态框的方法示例
12-08
打算用React写对话框已经很长一段时间，现在是时候兑现承诺了。实际上，写起来相当简单。 核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后的DOM节点嵌入domContainer(通常是document.body)，并保证只嵌入一次。 所以，我们可以这样写一个对话框或模态框： function Dialog() { return React.createPortal( <div>Dialog contents</div>, document.body ) } 一个新的div会出现在body内部：
vue 手写模态框
来了波，兄嘚
05-26 424
<div class="modal-mask" @click="hidepopup" v-if="showModal"></div> <div class="modal-dialog" v-if="showModal"> <img @click="hidepopup" class="guanbi" src="../../assets/img/x.png" /> ...
自己手写的一个图片预览模态框
weixin_34236869的博客
02-09 326
　　　　思路:点击图片的时候获取所点击图片的url，最后将模态框中的图片的url换为获取到的url，即可实现单个图片的预览。 　　　　　　上一张，下一张的实现思路是:点击上一张，获取当前模态框中图片的名字，再到对应的div中找到此照片的原来的位置，获取到之后在其原来位置获取其父div的上一个和下一个div进行实现获取对应的url。 　　注意:一个图片占用一个div，且class名字相同，且图片...
纯手写 模态框、消息弹框、呼吸灯
qq_38567182的博客
11-12 2734
在有些做某些网页中，应用不想引用一些前端框架，对于一些比较常用的插件 模态框、消息弹框、呼吸灯 可以纯手写实现。
手写模态框，弹框或遮罩层
m0_57078631的博客
06-07 325
原理：通过display:block;与display:none控制元素的显示与隐藏，实现模态框功能。功能：点击打开模态框按钮时显示模态框；点击关闭按钮时隐藏模态框；点击模态框外部时隐藏模态框；
CSS——Emmet语法
笙
03-31 295
**Emmet 语法 Emmet语法的前身是Zen coding,它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。 一、快速生成HTML结构语法 <1>、 1、生成标签:直接输入标签名按tab键即可。比如:div然后tab键，就可以生成。 例如： <!-- div + Tab/Enter键可生成： --> <div></div...
《Head First HTML and CSS 》学习笔记——8、字体和颜色样式
Wzw的博客
03-01 219
目录文本属性字体引入Web字体字体大小字体粗细字体风格Web颜色Web颜色如何工作指定颜色的方法文本装饰相关链接 文本属性 首先宏观看一下哪些属性可以指定和改变字体的外观，再逐个学习各个属性需要注意的细节问题。 font-family：字体 body { font-family: Verdana, Geneva, Arial, sans-serif; } font-size：字体大小 body { font-size: 14px; } color：文本颜色 body { color
案例｜原生手写一个轮播图——渐隐渐显版
weixin_48119069的博客
07-01 450
今天我们自己手写一个渐隐渐显版的轮播图，先上效果图???? 由于文件太大，只能压缩成这样给大家看了???? 既然不能传大文件，那大家就委屈一下先听听小编我描述一下具体的需求吧???? 一、需求 ❝ 1、实现渐隐渐显自动轮播效果； ❞ 就如上面效果图一样； ❝ 2、鼠标划上： 显示左右切换箭头 停止自动轮播； ❞ 如图：此时小芝麻鼠标在图上，所以显示左右箭头，并且不再自动轮播 ❝ 3、鼠标离开: 隐藏左右切换箭头 继续自动轮播； ❞ 与??
手写Vue弹窗Modal的实现代码
12-11
Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在开发和设计一个组件的时候有可能就会绕一个大圈子，所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解。这篇文章我会从实践出发，遇到一些知识点会顺带总结一下。文章很长，一次看不完可以先收藏，如果你刚入门vue，那么相信这篇文章对你以后的提升绝对有帮助 进入正题,我相信不论什么项目几乎都会有一个必不可少的功能，就是用户操作反馈、或者
弹出框、模态框插件
11-28
弹出框、模态框插件 artDialog-5.0.4 告别alert 弹出框、模态框插件 artDialog-5.0.4 告别alert
Vue手写封装模态弹出框(若水封装,亲测可用)
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
05-31 1202
组件代码 <template> <!-- 遮罩层 --> <div v-show="isMask" class="mask" @touchmove.stop @mousewheel.stop> <!-- 内容 --> <slot></slot> </div> </template> <script> export default { props: {.
手动实现模态框
Dimple_z的博客
02-08 321
手动实现模态框 设置一个用于遮罩整个页面的div，其css样式为： .mask{ width:100%; height:100%; display: none; position:fixed; background:rgba(0,0,0,0.3); z-index: 998; } js部分代码： //模态框frame $('.frame')...
20分钟 看图手写的table
weixin_33929309的博客
06-29 248
<html><body><table width="100%" border="1" cellspacing="0" style="text-align:center"> <tr> <td colspan='9' >灾情统计</td> </tr> <tr&...
手写table表格（一表头对应一数据）
最新发布
Aa12364567的博客
02-20 269
手写table表格（一表头对应一数据）
小程序 手写 规格 弹框
qq_40095911的博客
06-15 413
&lt;!--规格--&gt; &lt;view wx:if="{{spec_modal}}" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.65);z-index:999998"&gt; &lt;/view&gt; &lt;view wx:if="{{spe...
手写table表格
qq_43787947的博客
11-09 2943
<template> <div class="table" style="overflow-y: auto; height:15em; width:100%"> //overflow-y控制y轴滚动 <table border="0" width="100%" height="16em" cellpadding="4.8" align="center"> <tr> <th>排名</th> <th>道路名称.
WebFramework：一种新型MVC模式的WEB应用开发框架
MVC设计模式是现代Web应用程序开发中的核心架构之一，尤其在J2EE平台上，它已成为首选的开发模式。该模式通过将应用程序分为三个主要组件——模型（Model）、视图（View）和控制器（Controller），实现了业务逻辑与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值