10.19
阿新 • • 發佈:2017-10-19
嬰兒 .net 忘記 文檔 wid 外部 https radi contain
1、制作自己的導航條
<nav style="background-color: blanchedalmond"> <img src="https://haitao.nos.netease.com/e740ea878fa94730b3d86579a8e68a26.jpg"> <input type="text" placeholder="輸入你想找的寶貝"> <input type="button" value="搜索"> <a>購物車</a> <a href="https://www.kaola.com/?navindex=1&zn=top">首頁</a> <a href="https://www.kaola.com/activity/flashSaleIndex/show.html?navindex=2&zn=top">今日限時購</a> <a href="https://www.kaola.com/activity/newArrival.html?navindex=3&zn=top">每日上新</a> </nav>
2、HTML頭部元素:
- <base> 定義了頁面鏈接標簽的默認鏈接地址
- <style> 定義了HTML文檔的樣式
- <link> 定義了一個文檔和外部資源之間的關系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜鳥</title> <base href="http://www.gzcc.cn/2016/images" target="_blank"> <style> p{ color:red; } </style>
3、練習樣式表: - 內嵌樣式表
<head> <meta charset="UTF-8"> <title>菜鳥</title> <style> p{ color:red; } .textblue{ color:blueviolet; } .daili{ background-color: aqua; } </style> </head> <body> <p>菜鳥學HTML</p> <p>菜鳥學HTML</p> <p class="daili">菜鳥學HTML</p> <p class="textblue">菜鳥學HTML</p> </body> </html>
- 行內樣式表
<h1 align="center"><a href="https://www.kaola.com/?zn=top"target="_blank">網易考拉</a></h1> <div id="container" style="width:400px"> <div id="header" style="background-color:#FFA500"><h2>登錄</h2></div>
3、分別練習定義三類選擇器: - HTML 選擇器
- CLASS 類選擇器
- ID 選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網易考拉</title> <style> .li{ background-color: blanchedalmond ; } .ziti{ font-family: "Adobe 仿宋 Std R";font-size: small; } .zix{ font-family: "Adobe 黑體 Std R";font-size: medium; } </style> </head> <nav style="background-color: blanchedalmond"> <img src="https://haitao.nos.netease.com/e740ea878fa94730b3d86579a8e68a26.jpg"> <input type="text" placeholder="輸入你想找的寶貝"> <input type="button" value="搜索"> <a>購物車</a> <a href="https://www.kaola.com/?navindex=1&zn=top">首頁</a> <a href="https://www.kaola.com/activity/flashSaleIndex/show.html?navindex=2&zn=top">今日限時購</a> <a href="https://www.kaola.com/activity/newArrival.html?navindex=3&zn=top">每日上新</a> </nav> <body class="li"> <h1 align="center"><a href="https://www.kaola.com/?zn=top"target="_blank">網易考拉</a></h1> <hr> <div id="container" style="width:400px"> <div id="header" style="background-color:#FFA500" align="center"><h2>登錄</h2></div> <div id="content"> <form> 用戶名:<input type="text" name="username" placeholder="請輸入用戶名"><br> 密碼:<input type="password"><br> <input type="radio" name="role" value="qq">qq <input type="radio" name="role" value="weixin">微信 <input type="radio" name="role" value="weibo">微博 <br> <input type="checkbox">記住我<br> <input type="button" value="logn"><a href="">忘記密碼?</a> </form> </div> <div id="end" style="background-color:#FFA500" align="center"><i>版權@abc</i></div> </div> <div> <select class="ziti"> <option>收藏</option> <option>點贊</option> <option>評論</option> </select> <ul class="zix"> <li>母嬰兒童</li> <li>每日彩妝</li> <li>服飾鞋包</li> <li>家居個護</li> <li>數碼家電</li> <li>運動戶外</li> </ul> </div> </body> </html>
10.19