亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索

首頁(yè) 文章專(zhuān)題 AI工具學(xué)習(xí) 編程手冊(cè) 下載最近更新

文章 web3.0 后端開(kāi)發(fā) web前端數(shù)據(jù)庫(kù) 開(kāi)發(fā)工具 php框架常見(jiàn)問(wèn)題科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程自媒體新聞

專(zhuān)題后端開(kāi)發(fā) web前端數(shù)據(jù)庫(kù) 開(kāi)發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程新聞

AI工具 AI 聊天問(wèn)答 Agent智能體 AI 文本寫(xiě)作 AI 繪畫(huà)作圖 AI 設(shè)計(jì)工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學(xué)習(xí) AI 編程開(kāi)發(fā) Prompt指令

學(xué)習(xí) 大前端后端開(kāi)發(fā) 數(shù)據(jù)庫(kù) 移動(dòng)端運(yùn)維開(kāi)發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ)

編程手冊(cè) 大前端 JavaScript 后端開(kāi)發(fā) 數(shù)據(jù)庫(kù) 移動(dòng)端運(yùn)維開(kāi)發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ) XML Web Services

下載 js特效網(wǎng)站源碼工具下載類(lèi)庫(kù)下載網(wǎng)站素材學(xué)習(xí)資源插件擴(kuò)展手機(jī)/移動(dòng)開(kāi)發(fā) 手機(jī)游戲

下面案列的服務(wù)器地址為：http://211.149.255.191:90/day05/index.html

效果圖：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style/css3.css" />
  </head>
  <body>
    <div class="nav">
      <div class="logo">
        <img src="1.jpg" alt="" id="logoimg" />
        <label for="img" id="logotext">LOGO</label>
      </div>
      <ul>
        <li>
          <a href="" id="home">home</a>
          <a href="" id="chat">chat</a>
          <a href="" id="shop">shop</a>
          <a href="" id="my">my</a>
        </li>
      </ul>
    </div>
    <div class="list">
      <ul>
        <li>前端基礎(chǔ): html5/css3/flex/grid</li>
        <li>php開(kāi)發(fā): php+pdo+mvc+composer</li>
        <li>前端進(jìn)階: javascript + jquery + layui</li>
        <li>Laravel: 實(shí)戰(zhàn)</li>
      </ul>
    </div>
  </body>
</html>

CSS1.css:

.nav {
  height: 50px;
  background-color: #eee;
  display: flex;
  align-items: center;
}
.nav ul {
  display: flex;
  list-style: none;
}
.nav ul a {
  color: #666;
  text-decoration: none;
  padding: 0 15px;
}
#logotext {
  color: green;
  margin-left: 10px;
}
#logoimg {
  width: 50px;
  height: 50px;
}
```css
### css2.css:
```css
.list {
  border: 1px solid #ccc;
  background-color: #efefef;
  padding: 15px 30px 15px;
  margin-top: 20px;
}
.list ul > li {
  margin: 10px;
}

css3.css

@import "css1.css";
@import "css2.css";
@media screen and (max-width: 320px) {
  #home,
  #shop,
  #my {
    display: none;
  }
  #chat {
    font-size: 30pt;
    color: green;
  }
}
* {
  outline: 1px solid red;
}