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

[TOC]

1、发布美食页效果

设置前

设置后

2、CSS设置

为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;
}