html和css 初學者學習之路的一些簡單基礎案例
one
附程式碼+個人總結（初學者的思維）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>黨的十九大</title><<body> <h1>中國共產黨第十九次全國代表大會</h1> <h2>2018-6-22 10:38</
<!--總結：主要屬性·1.text-indent:2em; 文字縮排2個字元2.line-height:36px; 行高3.text-decoration:underline; 文字修飾4.margin-right:100px; 右外邊距--></html>
two 區域連結
效果圖：
（2）程式碼+總結
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><style type="text/css">.one{ text-align:center; height:50px; }.two{ height:720px; width:1280px; margin:0 auto; border:none; background:url(admins.jpg); }.three{ width:1280px; margin:auto; } </style></head>
<body>
<div class="one" > <a href="http://www.baidu.com" style="font-size:42px; text-decoration:none;"> 學習導航</a></div><div class="two"> <table align="center" style="width:900px;border:none;padding-top:80px;"> <tr align="center" > <td style=""><a href="http://www.w3school.com.cn/" style="font-size:36px;text-decoration:none">w3school</a></td> <td><a href="http://www.runoob.com/" style="font-size:36px;text-decoration:none">菜鳥教程</a></td> <td><a href="http://www.lvyestudy.com/les_hj/html_list.aspx" style="font-size:36px;text-decoration:none">綠葉學習網</a></td> <td><a href="https://www.cnblogs.com/huaxingtianxia/p/5724093.html" style="font-size:36px;text-decoration:none">資深大牛的建議</a></td> </tr> <tr align="center"> <td><a href="Untitled-1.html" style="font-size:36px;text-decoration:none">二狗子網一</a></td> <td><a href="Untitled-2.html" style="font-size:36px;text-decoration:none">二狗子網二</a></td> <td> </td> <td> </td> </tr> </table></div> <div class="three"> <img src="yhq1.jpg" alt="雙十一海報" usemap="#123"/> <map name="123"> <area shape="rect" coords="347,65,600,186" target="_blank" href="http://www.taobao.com" /> <area shape="rect" coords="610,60,863,183" target="_blank" href="http://www.taobao.com" /> <area shape="circle" coords="145,112,55" href="https://www.jd.com/" target="_blank"> </map></div>
</body></html><!-- 總結： 1. <img src="yhq1.jpg" alt="雙十一海報" usemap="#123"/>//alt 屬性是一個必需的屬性，它規定在影象無法顯示時的替代文字。 客戶器端影象對映：usemap <map name="123">//編輯圖片 屬性：target="_blank" 開啟新的網頁 <area shape="rect" coords="610,60,863,183" target="_blank" href="http://www.taobao.com" /> <area shape="circle" coords="145,112,55" href="https://www.jd.com/" target="_blank"> </map>-->
three 下拉列表
（3）程式碼與總結
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><style type="text/css"> .one{ width:1200px; height:36px; background:#09F; margin:0 auto; } .two{ width:1200px; height:330px; background:url(bnr1029.jpg); margin:0 auto; } .one ul li{ float:left; list-style:none; text-align:center; } .one ul li .list{ display:none; } .one ul li .list li{ list-style:none; background:#CCC; } .one ul li a{ width:132px; height:36px; font-size:24px; display:block; text-decoration:none; } .one ul{ padding:0; margin:0; } .one ul li:hover .list{ display:block; } .one ul li .list li{ clear:left; } .one ul li:hover{ background:#03C; } .one ul li .list li:hover{ background:#03C; } .one .list-02 a{ width:144px; }</style></head>
<body> <div class="one"> <ul> <li><a href="#">首頁</a></li> <li> <a href="#">第一</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> <li> <a href="#">第一</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> <li> <a href="#">第一</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> <li> <a href="#">第一</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> <li> <a href="#">第一</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> <li> <a href="#">第一</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> <li> <a href="#">第一</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> <li class="list-02"> <a href="#" >最後</a> <ul class="list"> <li><a href="#">一</a></li> <li><a href="#">二</a></li> <li><a href="#">三</a></li> </ul> </li> </ul> </div> <div class="two"></div></body></html><!--1.修改屬性，仔細找到列表項2.巢狀關係在腦子裡要有
-->
four
（4）程式碼與總結
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文件</title><style type="text/css"> .content{ width:1000px; height:800px; margin-left:450px; background:#F9C; } .content h1{ font-size:100px; padding-top:200px; padding-left:300px; color:#FFF; } .content form{ padding-top:1px; padding-left:400px; } .content form input{ border:1px while solid; width:300px; height:36px; display:block; border-radius:30px; text-align:center; margin-top:50px; font-size:24px; } .content form button{ background:#FC3; width:100px; height:36px; margin-top:50px; margin-left:100px; border-radius:30px; } .content form input:hover{ background:#F99; }</style>
</head>
<body><div class="content"> <h1>Welcome</h1> <hr /> <form> <input type="text" placeholder="請輸入賬號" name="uesd01"/> <input type="text" placeholder="請輸入密碼" name="uesd02"/> <button type="submit">登入</button> </form> </div></body></html><!--1.border-radius:30px;/*H5設定圓角邊框*/
-->
five 網站佈置
（5）程式碼與總結：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0108)file:///C:/Users/a1829/Desktop/%E4%BA%8C%E7%8B%97%E5%AD%90%E7%9A%84%E6%96%87%E6%A1%A3/text06/Untitled-1.html --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>頁面模板</title><style type="text/css"> .header{ width:1300px; height:50px; background:#F03; margin:0 auto; font-weigth:bold; } .content{ width:800px; height:80px; background:#FF6; margin:0 auto; } .foot{ width:
相關推薦
html和css 初學者學習之路的一些簡單基礎案例
one附程式碼+個人總結（初學者的思維）：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
QT學習資料部落格：《Qt 實戰一二三》和《Qt 學習之路 2》等
參考原貼 https://blog.csdn.net/dpsying/article/details/80615320 目的：僅供自己學習，並無他用。 參考書目： 1《Qt5開發及例項》（Qt 5.8為平臺）
【java】java學習之路-01-Linux基礎（一）
x文件 字母 at命令 超過 用戶登錄 創建刪除 軟連接 nbsp tail linux學習方法： 你的程序要在服務器（linux）上執行，服務器沒有桌面系統，學習linux就是學習命令。 一、Linux介紹 1、芬蘭大學生，名字叫Linux，因為個人興趣，編寫了一個類Un
scrapy的學習之路1(簡單的例子)
strong os.path pro tle text arch try mobile pip scrapy的安裝 環境:python3.6 1 pip install -i https://pypi.douban.com/simple/ scrapy 2
Linux學習之路--http-2基礎設置及訪問限制【15】---20180108
first 配置 特定 http modules rmi 目錄訪問控制 可重復 als 一、HTTP軟件1、http服務器應用http服務器程序 httpd apache nginx lighttpd應用程序服務器 IIS .asp tomca
python學習之路 實現簡單的計算機功能。
內部 表達式 remove 符號 加減 per multipl 計算機 print 計算器的主要思維是： 1、對輸入的表達式去除其空格 2、判斷用戶輸入的表達式中的括號是否合法 3、每次找到這個表達式只有一對括號的表達式（就是這找到的表達式內部沒有括號） 4、對找到的只有一
機器學習之路的Python基礎篇2
@theme print格式化輸出 @author lz @time 2018/11/25 apple_price=float(input(“請輸入價格”))#因為input中輸入的是系統預設為字串 apple_number=float(input(“蘋果的數量”)
opengl學習之路九，基礎光照
QQ:609162385 連結：https://blog.csdn.net/cqltbe131421 現實世界的光照是極其複雜的，而且會受到諸多因素的影響，這是我們有限的計算能力所無法模擬的。因此OpenGL的光照使用的是簡化的模型，對現實的情況進行近似，這樣處
後臺學習之路(一):Java基礎回顧
集合: 單列集合: Collection:單列集合的根介面 List:實現了List介面的集合類,具備的特點:有序、
Linux學習之路—5.shell基礎
--------部分截圖來自老男孩Linux培訓視訊 Linux支援哪些shell，看/etc/shells 檔案裡面寫著呢 建立指令碼時，建議加上拓展名.sh，這樣用vi編寫的時候會有顏色提示。 Linux指令碼第一行都是以 "#!/bin/b
Qt學習之路4--簡單計算器介面開發
在之前的學習中我們學習了標籤元件和按鈕元件，標籤用來顯示一個字串，帶有提示性作用，在使用它時需要將標籤物件和父元件繫結在一起；按鈕元件也是一個功能性元件，需要父元件作為容器，它的的作用就是當你按下這個按鈕時會觸發某個操作，和標籤元件一樣，它們都能在父元件中定位。
我的web前端學習之路-CSS-列表和表格
表示 hang idt char rac 一個 ddr web前端 9.png list-style-image和list-style-type只能選擇一個使用 border-collapse和border-spacing不能同時使用 1 <head>
前端之路 day1 html和css
HTML標籤的分類： 1. 塊兒級標籤 預設獨佔一行（整個瀏覽器的寬度） 可以設定長和高 2. 行內標籤（內聯標籤） 長度由自己的內容來決定的。無法設定長和高 HTML巢狀的規則： 1. 塊兒級標籤可以巢狀行內標籤 （div標籤可以巢狀div標籤） 2. p標籤不能巢狀div標籤 form表單系列：
ddpush 學習之路 15 關於DDPUSH 的一些很多人會問到的問題和解答
在群裡，經常遇到有人問一些問題。關鍵是這個問題我在之前經常的出來回答。重複的問。來一個新人。問一次。我這裡小小的說一下大多數接觸ddpush的人關心的問題。 ddpush 可以用作IOS推送麼（這個
【前端】【html/css】前端學習之路（五）：標籤顯示模式（display）
標籤的型別(顯示模式) HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。1.塊級元素（block-level） 每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸
【前端】【html/css】前端學習之路（十四）（製作京東專案心得）（完）
1.事前準備 （1）工具使用的是 Webstrom的最新版 和 Fireworks 8 作為切圖的輔助工具。 （2）準備CSS Reset類庫（normalize.css），為跨瀏覽器相容做準備（也可以直接使用京東網站的初始化） normalize.css
Python學習之路8?叠代器協議和生成器
rep 好處 obj 必須 決定 內容 cnblogs 有用 pri 一 什麽是叠代器協議 1.叠代器協議是指：對象必須提供一個next方法，執行該方法要麽返回叠代中的下一項，要麽就引起一個StopIteration異常，以終止叠代 （只能往後走不能往前退） 2.可叠代對象
Java學習之路---計算圓形的面積和周長
java;scanner;基礎語法題目：計算圓形的面積，其中圓形的半徑是隨意指定。源代碼以及所有的分析思路都如下：import java.util.Scanner; //引入Scanner類 public class TestArea { /** * @param args */ publi
新手算法學習之路----二叉樹（二叉樹的路徑和）
== style oid 添加 roo span 一個 int 二叉 題目： 給定一個二叉樹，找出所有路徑中各節點相加總和等於給定 目標值 的路徑。 一個有效的路徑，指的是從根節點到葉節點的路徑。 代碼加思路： public List<List<Intege
Android開發學習之路--異步消息Handler，Message，Looper和AsyncTask之初體驗
被調用 project 輸入 gettext npos article app sso 音樂播放 在簡易音樂播放器中。用了Handler。也沒有過多地去研究學習，這裏再學習下android下的異步消息處理機制。這裏用了Handler主要是在線程中不能更新UI