CSS实践08：表单和表格（属性选择器、id选择器）

最新推荐文章于 2022-07-11 20:43:47 发布

远近2021

最新推荐文章于 2022-07-11 20:43:47 发布

阅读量364

点赞数

分类专栏： # CSS学习 htmlcss学习园地文章标签： css

本文链接：https://blog.csdn.net/weixin_47197906/article/details/119390290

版权

91 篇文章 6 订阅

订阅专栏

34 篇文章 4 订阅

订阅专栏

[TOC]

设置前
在这里插入图片描述
设置后

为textarea添加css属性，设置成通用样式，禁用页面中所有的textarea拖动。

textarea{
	resize: none;
}

给表格加上suggest的类名

<table class="suggest">

定义表格样式

.suggest{
	width: 100%;
}
.suggest td{
	padding: 5px;
}

为左侧的td定义宽度（给每一行的第一个td添加类名td-label，设置td-label的样式）
为按钮添加类名td-btn，并设置样式。

class="td-label"

在这里插入图片描述

.suggest .td-label{
	width: 100px;
	text-align: right;
}
.suggest .td-btn{
	text-align: center;
}

定义单行文本框样式

.suggest input[type=text]{
	width:500px;
	padding: 7px;
	border:2px solid #79B1A3;
}

定义多行文本框的样式

.suggest textarea{
	width:500px;
	padding: 7px;
	border:2px solid #79B1A3;
}

为材料和制作过程设置不同的高度（材料和制作过程都有自己的id值ingredients、directions）

#ingredients{
	height: 100px; /* 材料样式 */
}
#directions{
	height: 300px; /* 制作过程样式 */
}

为按钮设置样式

/* .suggest input[type=submit],.suggest input[type=reset]{
	
} */
.suggest .td-btn input{
	width: 120px;
	font-size: 20px;
}

关注