第二次作業

1.什么是css語法?

  • CSS 語法由選擇器、屬性和值組成。選擇器通常是你希望定義的 HTML 元素或標簽,屬性是你希望改變的屬性,并且每個屬性都有一個值。屬性和值被冒號分開,并由花括號包圍,這樣就組成了一個完整的樣式聲明。

2.列舉常見的css選擇器?

  • Id選擇器;
  • 類選擇器 ;
  • HTML元素選擇器;
  • 通配符選擇器;

3.background屬性如何簡寫?

  • background-color repead position attachment 、、、

4.文本的屬性有哪些?請寫出font的復合式寫法?

  • 加粗 傾斜 大小 行高 字體
  • font:bold italic size/line-height family

5.text-indent有什么作用?

  • 首行縮進

6.超鏈接a標簽的作用有哪些?

  • 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
  • 通過使用 name 屬性 - 創建文檔內的書簽

7.a標簽默然樣式是什么?

  • <a href="#"></a>

8.什么是盒模型?盒模型包括什么?\

  • 在網頁中:內容、填充、邊框、邊界
  • 這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也就是能裝東西的一種箱子,也具有這些屬性,所以叫它盒子模式。

9.padding和margin的區別?

  • padding表示內填充,顯示元素的背景,而margin表示外填充,其邊框之外不顯示元素的背景。

10.什么是margin疊加?什么是margin傳遞?

  • 相鄰2個元素的margin是疊加在一起,誰的margin值大就用誰的。
  • 子元素的上下margin會傳遞父級margin。

11.列舉幾種常見的語義化標簽?

  • <table></table> < p >< /p > <td></td>

12.常見的塊元素和內嵌元素有哪些?簡要說一下它們的區別?

  • 塊元素:<div></div> <table></table>
  • 內嵌元素:<span> </span> <input>
    區別:塊元素需要占據整個一行的位置,但是內斂元素只需要占據自己本身內容的大小而占據相應的空間,不一定占據整行,則其他內容不需要重新換一行顯示。

編程作業

<!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>
#box {
    width:513px;
    height:350px;
    border:1px solid black;
    padding:0 22px;
    }
#title {
    width:108px;
    height:43px;
    margin:0px 404px 0px 2px;
    font:bold 23px/43px "宋體"; color:#3f5062;
    }
#body1 {
    width:228px;
    height:55px;
    margin:1px 284px 0px 2px;
    font:bold 20px/54px "宋體"; color:#3f5062;
    }
#body2 {
    width:461px;
    height:80px;
    margin:0px 51px 28px 2px;
    font:14px/26px "宋體";
    color:#9b9b9b;
    text-indent:2em;
    border-bottom:1px dashed black;
    }
#body3 {
    width:270px;
    
    background-image:url(img/zhexiaotu.jpg);
    background-repeat:repeat-y;
    background-position:left center;
    
    font:bold 17px/37px "宋體";
    text-indent:18px
    }
#body4 {
    width:270px;
    
    background-image:url(img/zhexiaotu.jpg);
    background-repeat:repeat-y;
    background-position:left center;
    
    font:bold 17px/37px "宋體";
    text-indent:18px
    }
#body5 {
    width:270px;
    
    background-image:url(img/zhexiaotu.jpg);
    background-repeat:repeat-y;
    background-position:left center;
    
    font:bold 17px/37px "宋體";
    text-indent:18px
    }
#body6 {
    width:270px;
    
    background-image:url(img/zhexiaotu.jpg);
    background-repeat:repeat-y;
    background-position:left center;
    
    font:bold 17px/37px "宋體";
    text-indent:18px
    }
</style>
</head>
<body>
<div id="box">
<div id="title">動態新聞</div>
<div id="body1">掌握一門技術的重要性</div>
<div id="body2">掌握一門技術是未來生存的一塊敲門磚,掌握一門技術是未來生存的一塊敲門磚,掌握一門技術是未來生存的一塊敲門磚</div>
<div id="body3">走進民企觀摩學習與民企面對面</div>
<div id="body4">走進民企觀摩學習與民企面對面</div>
<div id="body5">走進民企觀摩學習與民企面對面</div>
<div id="body6">走進民企觀摩學習與民企面對面</div>
</div> 
</body>
</html>

效果圖截圖

Paste_Image.png
<!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>
#div1 {
    width:0px;
    height:0px;
    border:100px solid red;
    border-bottom:100px solid white;
    margin:400px auto;
    }
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

效果圖截圖

Paste_Image.png

學習心得體會

這次作業真是花費了我九牛二虎之力,編程題也是我自己不熟練,花了好幾個小時終于做了出來,效果自己看來還算湊合,從做出來的那一刻起,我發現我漸漸的喜歡上了這門技術,它里面包含了許多可變性,有許多可以想象的空間,有許多可以自己發揮想象力創造出來的東西,我感覺真的挺有趣的,但是寫代碼時頻繁出錯內種滋味也是非常難受的,但我相信只要一直練習下去,錯誤也會逐漸被修改,網頁也會越來越完善╮(‵′)╭。

百度云鏈接: http://pan.baidu.com/s/1skWU7Op
密碼: w63c

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容