2019年12月23日作业

用flex做了一个仿火狐的首页，费了老大的劲。
flex现在学到的知识不多，还好理解。
标签选择器尝试了很多次才成功
header > .search > .formstyle input[type=”text”] 比如这种，还理解得不够。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿火狐首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
            font-family: '微软雅黑', Verdana, sans-serif;
            /* outline: 2px dashed red; */
        }
        a:link, a:visited, a:hover, a:active {
            text-decoration:none; 
            color: steelblue;
        }
        a:hover {
            color: red;
            font-weight: bold;
        }
        header {
            margin: 20px auto;
            box-sizing: border-box;
            box-sizing: content-box;
            display: flex;
        }
        main {
            width: 1020px;
            margin: auto;
            box-sizing: border-box;
            box-sizing: content-box;
            display: flex;
            flex-wrap: wrap;
        }
        header > .search {
            height: 40px;
            margin: 20px auto;
            box-sizing: border-box;
            box-sizing: content-box;
        }
        header > .search > .formstyle input[type="text"] {
            width: 380px;
            height: 34px;
            border-radius: 8px;
        }
        header > .search > .formstyle .button {
            width: 120px; 
            height: 40px;
            border-radius: 8px;
            text-align: center; 
        }
        header > .search > .formstyle .button:hover {
            font-weight: bolder;
            cursor: pointer;
        }
        main > .box {
            width: 235px;
            height: 160px;
            margin: 10px;
            box-sizing: border-box;
            box-sizing: content-box;
            display: flex;
            justify-content: space-around;
            border-radius: 10px;
        }
        main > .box > .txt {
            width: 240px;
            height: inherit;
            border: 2px solid darkcyan;
            line-height: 160px;
            text-align: center;
            font-size: 48px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<header>
    <div class="search">
        <form action="https://www.baidu.com/s" target="_blank" class="formstyle"><input class="form" type="text" name="wd"><input type="submit" class="button" value="百度搜索"></form>
    </div>
</header>
<main>
    <div class="box"><a href="https://www.baidu.com" class="txt">百度</a></div>
    <div class="box"><a href="https://www.sina.com.cn" class="txt">新浪网</a></div>
    <div class="box"><a href="https://www.php.cn" class="txt">php中文</a></div>
    <div class="box"><a href="https://www.iqiyi.com" class="txt">爱奇艺</a></div>
    <div class="box"><a href="https://www.taobao.com" class="txt">淘宝网</a></div>
    <div class="box"><a href="https://www.jd.com" class="txt">京东商城</a></div>
    <div class="box"><a href="https://www.vip.com" class="txt">唯品会</a></div>
    <div class="box"><a href="https://www.ctrip.com" class="txt">携程旅行</a></div>
</main>
</body>
</html>
相关文章
