首页 > 其他分享 >前端随手记第三天

前端随手记第三天

时间：2024-07-07 14:55:06浏览次数：15  
标签：hover 随手 color 前端 第三天 background 按钮 border 属性

1.HTML <fieldset> name 属性

定义和用法：name 属性规定 fieldset 的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。

语法：<fieldset name="text"> 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
<fieldset name="personalia">
  Name: <input type="text" name="username"><br>
  Email: <input type="text" name="usermail"><br>
</fieldset>
<button type="button" onclick="form.personalia.style.backgroundColor='yellow'">改变控件的背景颜色</button>
<input type="submit">
</form>

<p><b>注意：</b>除了 Internet Explorer，其他主流浏览器都支持 name 属性。</p>

</body>
</html>

 

1.2HTML <legend> 标签
The <legend> 元素为 <fieldset>元素定义标题。 HTML5不支持该属性。不建议使用。 请使用 CSS 来设置 <legend> 元素的对齐方式。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

</body>
</html>

 

属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
legend {
  text-align: right; /* 标题居中 */
}
</style>
</head>
<body>

<fieldset>
  <legend>标题对齐方式示例</legend>
  <!-- 表单元素 -->
</fieldset>
</body>
</html>

 

2.CSS align-content 属性 

定义和用法：align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

CSS 语法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

 

 

 

3.CSS 按钮

3.1按钮颜色:使用 background-color 属性来设置按钮颜色:

.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */

3.2按钮大小：font-size 属性来设置按钮大小:

.button1 {font-size: 10px;}

3.3圆角按钮 border-radius 属性来设置圆角按钮: 

.button1 {border-radius: 2px;} 
.button2 {border-radius: 4px;}
 .button3 {border-radius: 8px;}
 .button4 {border-radius: 12px;} 
.button5 {border-radius: 50%;}

3.4按钮边框颜色 ：border 属性设置按钮边框颜色: 

border: 2px solid #4CAF50; /* Green */

3.5鼠标悬停按钮:hover 选择器来修改鼠标悬停在按钮上的样式。可以使用 transition-duration 属性来设置 "hover" 效果的速度: 

transition-duration: 0.4s;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}
</style>
</head>
<body>

<h2>鼠标悬停按钮</h2>
<p>我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。</p>
<p><strong>提示:</strong> 我们可以使用 <code>transition-duration</code> 属性来设置 "hover" 效果的速度:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

 

3.6按钮阴影：box-shadow 属性来为按钮添加阴影:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>

<h2>按钮阴影</h2>
<p>我们可以使用 box-shadow 属性来为按钮添加阴影:</p>

<button class="button button1">阴影按钮</button>
<button class="button button2">鼠标悬停后出现阴影</button>

</body>
</html>

3.7禁用按钮：opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)
提示: 我们可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

3.8按钮宽度

默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

3.9按钮组

移除外边距并添加 float:left 来设置按钮组:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    float: left;
}

.button:hover {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>按钮组</h2>
<p>移除外边距并添加 float:left 来设置按钮组:</p>

<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>

<p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p>

</body>
</html>

3.10带边框按钮组：我们可以使用 border 属性来设置带边框的按钮组:

和上面的区别是边框有变化

 border: 1px solid green;

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.btn-group button {
  background-color: #04AA6D; /* 绿色背景 */
  border: 1px solid green; /* 绿色边框 */
  color: white; /* 白色文本 */
  padding: 10px 24px; /* 内边距离、 */
  cursor: pointer; /* 指针/手形图标 */
  float: left; /* 并排浮动按钮 */
}

/* 清除浮动 */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* 防止边框重叠 */
}

/* 鼠标移动到按钮上的效果 */
.btn-group button:hover {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h1>按钮组</h1>

<div class="btn-group">
  <button>Google</button>
  <button>Runoob</button>
  <button>Apple</button>
</div>

</body>
</html>

3.11按钮动画：鼠标移动到按钮上后添加箭头标记:

效果图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>

<h2>按钮动画</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

 

标签：hover,随手,color,前端,第三天,background,按钮,border,属性
From： https://blog.csdn.net/2301_76923794/article/details/140244398

相关文章

  • 使用zdppy_api+onlyoffice word文档在线共同编辑，附完整的vue3前端代码和python后端代
    参考文档：https://api.onlyoffice.com/zh/editors/basichttps://api.onlyoffice.com/zh/editors/coedit基本的架构思考：文档表：记录的是文档信息key：这个key可以标识唯一的一个文档，可以是文档的hash值fileType：文档的类型，docx，txt，pdf，其他title：文档的标题，也就是文档的实际......
  • 前端HTML+CSS
    一、HTML1.什么是html概念：超文本标记性语言（HyperTextMarkupLanguage）--不只是有文本的标签超：超级文本===》不仅仅是普通文本还可以是：文字、图形、动画、声音、表格等。标记性：标记，元素，标签来源：w3c万维网联盟：组织java开源jspython2.作用：制作网页①网页应该......
  • 前端学习-flutter学习-003-Widget 简介
    学习链接什么是widget描述UI元素的配置信息Widget类本身是一个抽象类，其中最核心的就是定义了createElement()接口，在Flutter开发中，我们一般都不用直接继承Widget类来实现一个新组件，相反，我们通常会通过继承StatelessWidget或StatefulWidget来间接继承widget类来实现。Stateless......
  • 代码随想录算法训练营第三天 | 203.移除链表元素 、 707.设计链表 、206.反转链表
    203.移除链表元素题目：.-力扣（LeetCode）思路：主要是通过运用虚拟头节点来统一移除元素的写法。代码：/***Definitionforsingly-linkedlist.*structListNode{*intval;*ListNode*next;*ListNode():val(0),next(nullptr){}*ListNode......
  • 前端JS特效第15集：HTML5电脑端微信聊天窗口界面
    HTML5电脑端微信聊天窗口界面，先来看看效果：部分核心的代码如下(全部代码在文章末尾)：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><......
  • 前端位置布局汇总
    1、位置：绝对位置和相对位置绝对位置style="position:absolute;left:218px;top:0%;"style="position:absolute;bottom:5px;right:5px;"相对位置:margin外边距 padding内边距style="border:1pxsolidblack;width:200px;text-align:left;margin-left:1200px;pa......
  • 前端生成二维码（N种方法选择2024最新）
    文来分享5个用于生成二维码的JavaScript工具库，助你快速生成二维码！node-qrcodenode-qrcode是一个用于生成二维码的Node.js库，它支持多种数据格式，并且可以将生成的二维码导出为各种图像格式，如PNG、JPEG、SVG和DataURI，其适用于服务端和客户端。node-qrcode的特点如下：......
  • 暑假第三天
    7月5日今天完成了数据结构第三题;寻找大富翁,下面是我的源代码#include<iostream>#include<vector>usingnamespacestd;constintmax_size=1000010;intnum[max_size];voidsift(int*num,intlow,inthigh){inti=low;intj=2*i;inttemp=num[i]......
  • html+css随手记录第二天
    1.CSS简介    需要对下面的知识有基本的了解：HTML/XHTML1.1什么是CSS?    CSS指层叠样式表(CascadingStyleSheets)    css样式定义如何显示HTML元素,样式通常存储在样式表中,把样式添加到HTML4.0中，是为了解决内容与表现分离的问题,外部样......
  • web前端概述
    文章目录Web前端概述HTML简史HTML5新特性使用标签承载内容结构文本列表（list）链接（anchor）图像（image）表格（table）表单（form）音视频（audio/video）窗口（frame）其他使用CSS渲染页面简介颜色（color）文本（text/font）盒子（boxmodel）列表、表格和表单图像布局使用JavaScript控制行为JavaScr......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99