代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel = "stylesheet" type ="text/css" href = "css/1.css">
<title>Insert title here</title>
<style type="text/css">
/* 选择器 :标签选择器 属性值不区分大小写,选择器区分大小写,一般都是小写
如果属性值为多个单词中间由空格隔开,必须用双引号
float : 浮动 left 向左浮动 让div在一行
*/ </style>
</head>
<body>
<div class = "main"> <div class = "div1">
<input type = "text" placeholder = "search"/>
</div>
<div class = "div2" >2</div>
</div>
</body>
</html>
1.css
div {
color : red; /* 设置字体颜色*/
border : 1px solid #0f0; /* 边框宽度 实线 颜色 */
font-family : "The new Roman";/* 字体样式*/
}
.main{
width :400px; /* 宽度 */
height : 200px;/* 高度 */
margin : 0 auto;
}
.main .div1{
width : 60%;
height : 50%;
float :left; /* 向左浮动 */
line-height : 200px;
}
.main .div2 {
width : 20%;
float : left;
inline-height : 200px;
line-height : 200px;
border-radius : 5px;
margin : 0 auto;
display : block ;
}
.main .div1 input {
margin : 10px 20px;
border-radius : 10px;
}