代码如下
<!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; }