HTML5、CSS3功能和媒体查询

最新推荐文章于 2023-04-23 00:15:00 发布

小媛同学.，

最新推荐文章于 2023-04-23 00:15:00 发布

阅读量212

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/m0_61843988/article/details/125777892

版权

1.1 表格

1.1.1 边框

使用border属性，border规定围绕表格的边框的宽度

th标题标签会自动加粗居中

<style type="text/css">
	/* outline 去除标签轮廓 */
	table{
	    /* border: 1px solid gainsboro; */
		border-collapse: collapse;/*合并单元格的边框*/
		width: 800px;
		text-align: center;
		margin: 0 auto;
	}
	td,th{
		border: 1px solid gainsboro;
	}
	th{
	    border: none;
	}
	thead tr{
		background-color: black;
		color: white;
		height: 30px;
	}
	/* odd 奇数  even 偶数 */
	tbody tr:nth-child(odd){
		background-color: blanchedalmond;
	}
	tbody tr:nth-child(even):hover{
		background-color: cadetblue;
    }
</style>
<table>
	<thead>
		<tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单元/元</th>
			<th>数量</th>
			<th>商品名称</th>
			<th>单元/元</th>
			<th>数量</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
        <tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
        <tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
        <tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
	</tbody>
</table>

1.1.2 水平分割线 bordor-bottom

<style type="text/css">
	table{
		border-collapse: collapse;/*合并单元格的边框*/
		width: 800px;
		text-align: center;
		margin: 0 auto;
	}
	thead tr{
		background-color: black;
		color: white;
		height: 30px;
	}
	td{
		border-bottom: 1px solid red;
    }
	/* odd 奇数  even 偶数 */
	tbody tr:nth-child(odd){
		background-color: blanchedalmond;
	}
	tbody tr:nth-child(even):hover{
		background-color: cadetblue;
    }
</style>
<table>
	<thead>
		<tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单元/元</th>
			<th>数量</th>
			<th>商品名称</th>
			<th>单元/元</th>
			<th>数量</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
        <tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
        <tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
        <tr>
			<td>1</td>
			<td>电脑显示屏</td>
			<td>1000</td>
			<td>8</td>
			<td>键盘</td>
			<td>356</td>
			<td>10</td>
		</tr>
	</tbody>
</table>

1.2 表单

resize: none;/*禁止文本域大小随意拖到*/

outline: none;/*去除标签轮廓*/

<style type="text/css">
    .ipt{
		width: 400px;
		height: 30px;
		border: 1px solid gainsboro;
		border-radius: 5px;
		outline: none;/*去除标签轮廓*/
		padding-left: 20px;
	}
	.jianjie{
		height: 80px;
		resize: none;/*禁止文本域大小随意拖到*/
	}
	#name{
		background: url(./search.png) no-repeat 5px center;
		background-size: 3%;
	}
	/* :focus伪类	当元素获取焦点时，可以设置其样式 */
	#name:focus{
		background-color: antiquewhite;
	}
	.btn{
		width: 100px;
		width: 40px;
		border: none;
	}
	/* 属性选择器 */
	input[type=submit]{
		background-color: red;
		color: white;
		border-radius: 5px;
		letter-spacing: 5px;/*字间距*/
	}
</style>
<table>
	<tr>
		<td>姓名</td>
		<td><input type="text" class="ipt" id="name" placeholder="请输入姓名"></td>
	</tr>
	<tr>
		<td>密码</td>
		<td><input type="password" name="" id="" class="ipt" placeholder="请输入密码"></td>
	</tr>
	<tr>
		<td>性别</td>
		<td>
			<input type="radio" name="sex" id="" checked>男
			<input type="radio" name="sex" id="">女
		</td>
	</tr>
	<tr>
		<td>省份</td>
		<td>
			<select name="" id="" class="ipt">
				<option value="0">请选择</option>
				<option value="1">河北省</option>
				<option value="2">河南省</option>
				<option value="3">湖北省</option>
			</select>
		</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" name="hobby" id="">唱歌
				<input type="checkbox" name="hobby" id="">跳舞
				<input type="checkbox" name="hobby" id="">打游戏
				<input type="checkbox" name="hobby" id="">篮球
				<input type="checkbox" name="hobby" id="">排球
				<input type="checkbox" name="hobby" id="">乒乓球
			</td>
		</tr>
		<tr>
			<td>个人简介：</td>
			<td>
			    <textarea name="" id="" cols="50" rows="5" class="ipt jianjie"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2">
			    <input type="submit" value="提交" class="btn">
				<input type="reset" value="重置" class="btn">
			</td>
		</tr>
</table>

1.3 轮廓

1.3.1 轮廓样式

outline-style属性指定轮廓的样式，并可设置如下值:

dotted-定义点状的轮廓
dashed-定义虚线的轮廓
solid-定义实线的轮廓
double-定义双线的轮廓
none-定义无轮廓
hidden-定义隐藏的轮廓

1.3.2 轮廓宽度

outline-width属性指定轮廓的宽度，并可设置如下值之一:

thin(通常为1px)
medium(通常为3px)
thick(通常为5px)
特定尺寸(以px、pt、cm、em计)

1.3.3 轮廓颜色 outline-color

1.3.4 轮廓偏移

outline-offset属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

1.4 尺寸

1.4.1 设置高度和宽度

height和width属性用于设置元素的高度和宽度。

height和width属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

1.4.2 高度和宽度值

height和width属性可设置如下值:

auto -默认。浏览器计算高度和宽度
length -以px、cm 等定义高度/宽度
·%-以包含块的百分比定义高度/宽度
initial将高度/宽度设置为默认值。

1.4.3 设置max-width

max-width属性用于设置元素的最大宽度。

可以用长度值（例如px、cm等）或包含块的百分比(%）来指定max-width(最大宽度)，也可以将其设置为none(默认值。意味着没有最大宽度)。

1.4.4 设置min-width

max-width属性用于设置元素的最小宽度

1.5 媒体查询

查询类型：

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智桃手机等等。
speech	用于大声"读出"页面的屏幕阅读器。

1.5.1 媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

例如：
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

小媛同学.，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5、CSS3功能和媒体查询

可以用长度值（例如px、cm等）或包含块的百分比(%）来指定max-width(最大宽度)，也可以将其设置为none(默认值。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。outline-offset属性在元素的轮廓与边框之间添加空间。媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为true或false。height和width属性用于设置元素的高度和宽度。max-width属性用于设置元素的最大宽度。max-width属性用于设置元素的最小宽度。...
复制链接

扫一扫