html及css易忘知识点

最新推荐文章于 2024-06-19 23:16:23 发布

菜鸟猪猪侠yy

最新推荐文章于 2024-06-19 23:16:23 发布

阅读量131

点赞数

分类专栏： HTML+CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_41743601/article/details/119669171

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html及css易忘知识点

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
值越低，图像越透明

5.伪类（专门针对于链接属性设置）

伪类

/* 未访问的链接 */

注意：这些链接样式的设置，只在第一次设置起作用。如果你点击过后，继续刷新页面，是不会重新出现效果的。
如果想重新看到效果，必需重新打开浏览器才可以看到效果。

a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}


注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

6.阴影

shadow

1.text-shadow 属性为文本添加阴影。

例如：

h1 {
  text-shadow: 2px 2px 5px red;
}
参数依次代表：水平距离 垂直距离 模糊距离 阴影颜色

2.多个阴影

如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

7.box-shadow 属性

div {
  box-shadow: 10px 10px 5px grey;
}
参数依次代表：水平距离 垂直距离 模糊距离 阴影颜色

8.Flexbox

flexbox

CSS Flexbox 布局模块
在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

块（Block），用于网页中的部分（节）
行内（Inline），用于文本
表，用于二维表数据
定位，用于元素的明确位置
弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>弹性布局中必须有一个 <em>display</em> 属性设置为 <em>flex</em> 的父元素。</p>

<p>弹性容器的直接子元素会自动成为弹性项目。</p>

</body>
</html>

9.表单（input等）

表单form

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单元素的使用</title>
	</head>
	<body>
		单选按钮<input type="radio" />
		复选框<input type="checkbox" />
		
		<h1>下拉按钮的展示</h1>
		<select name="myselect">
			<option>1</option>
			<option selected="selected">2</option>
			<option>3</option>
			<option>4</option>
		</select>
		
		<h3>文本域的使用</h3>
		
		<!--rows:行数 cols：列数-->
		<textarea rows="10" cols="40"></textarea>
	</body>
</html>

fieldset的使用

<form action="">

<fieldset> // 表单域
<legend>Personal information:</legend> //域标题
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>

</form>

label标签

定义了 <input> 元素的标签，一般为输入标题

<label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male">
  
  相当于；Male:radio

input元素

input

菜鸟猪猪侠yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html及css易忘知识点

html及css易忘知识点文章目录html及css易忘知识点1.css溢出2.背景（背景图像，属性）3.Css组合器4.不透明度5.伪类（专门针对于链接属性设置）6.阴影7.box-shadow 属性8.Flexbox**8.表单（input等）**input元素1.css溢出溢出overflow2.背景（背景图像，属性）背景background3.Css组合器组合器4.不透明度不透明度img { opacity: 0.5;}img:hover { opacity: 1.0
复制链接

扫一扫