div+css的常规使用 - superStar1213

代码如下

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

posted on 2017-12-15 10:15 superStar1213 阅读(333) 评论(0) 收藏举报

刷新页面返回顶部