search

博客列表 >2019年12月23日作业

2019年12月23日作业

涡流
涡流原创
2019年12月25日 18:28:13752浏览

用flex做了一个仿火狐的首页，费了老大的劲。
flex现在学到的知识不多，还好理解。
标签选择器尝试了很多次才成功
header > .search > .formstyle input[type=”text”] 比如这种，还理解得不够。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿火狐首页</title>
  6.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             font-size: 16px;
  12.             font-family: '微软雅黑', Verdana, sans-serif;
  13.             /* outline: 2px dashed red; */
  14.         }
  16.         a:link, a:visited, a:hover, a:active {
  17.             text-decoration:none; 
  18.             color: steelblue;
  19.         }
  21.         a:hover {
  22.             color: red;
  23.             font-weight: bold;
  24.         }
  26.         header {
  27.             margin: 20px auto;
  28.             box-sizing: border-box;
  29.             box-sizing: content-box;
  30.             display: flex;
  31.         }
  33.         main {
  34.             width: 1020px;
  35.             margin: auto;
  36.             box-sizing: border-box;
  37.             box-sizing: content-box;
  38.             display: flex;
  39.             flex-wrap: wrap;
  40.         }
  42.         header > .search {
  43.             height: 40px;
  44.             margin: 20px auto;
  45.             box-sizing: border-box;
  46.             box-sizing: content-box;
  47.         }
  49.         header > .search > .formstyle input[type="text"] {
  50.             width: 380px;
  51.             height: 34px;
  52.             border-radius: 8px;
  53.         }
  55.         header > .search > .formstyle .button {
  56.             width: 120px; 
  57.             height: 40px;
  58.             border-radius: 8px;
  59.             text-align: center; 
  60.         }
  62.         header > .search > .formstyle .button:hover {
  63.             font-weight: bolder;
  64.             cursor: pointer;
  65.         }
  67.         main > .box {
  68.             width: 235px;
  69.             height: 160px;
  70.             margin: 10px;
  71.             box-sizing: border-box;
  72.             box-sizing: content-box;
  73.             display: flex;
  74.             justify-content: space-around;
  75.             border-radius: 10px;
  76.         }
  78.         main > .box > .txt {
  79.             width: 240px;
  80.             height: inherit;
  81.             border: 2px solid darkcyan;
  82.             line-height: 160px;
  83.             text-align: center;
  84.             font-size: 48px;
  85.             border-radius: 10px;
  86.         }
  88.     </style>
  90. </head>
  91. <body>
  93. <header>
  94.     <div class="search">
  95.         <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>
  96.     </div>
  97. </header>
  99. <main>
  100.     <div class="box"><a href="https://www.baidu.com" class="txt">百度</a></div>
  101.     <div class="box"><a href="https://www.sina.com.cn" class="txt">新浪网</a></div>
  102.     <div class="box"><a href="https://www.php.cn" class="txt">php中文</a></div>
  103.     <div class="box"><a href="https://www.iqiyi.com" class="txt">爱奇艺</a></div>
  104.     <div class="box"><a href="https://www.taobao.com" class="txt">淘宝网</a></div>
  105.     <div class="box"><a href="https://www.jd.com" class="txt">京东商城</a></div>
  106.     <div class="box"><a href="https://www.vip.com" class="txt">唯品会</a></div>
  107.     <div class="box"><a href="https://www.ctrip.com" class="txt">携程旅行</a></div>
  108. </main>
  110. </body>
  112. </html>
上一条：CSS基础定位-PHP培训十期线上班 学号：510251 12月20日作业下一条：HTTP 长连接、短链接之间转换的方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多