Web前端開發 學習筆記

標籤：容器   移動   over   back   body   目標   查看   order   範圍   

 

HTML開始:
HTML:超文字標記語言 (HTML);用來做頁面;通過瀏覽器來查看效果；
結構：
<html >--頁面
<head>--網頁頭部
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>雲商城</title>
</head>

<body>--身體
今天再次來到東華，大家非常高興！
</body>
</html>

<h1></h1>---標題標籤
...
<h6></h6>
<p></p>段落標籤

div:頁面配置一塊地區，容器，盒子;
<div>地區1</div>
<div>地區2</div>
地區1就會在地區2的上方;地區與地區預設是上下排列；

如果要讓地區並列排列，加上float:left;浮動：向左;
text-align:center;地區中文本的位置：對齊：置中

<div>
<div>小地區1</div>
<div>小地區2</div>
</div>
地區可以分很多小地區，但是地區的劃分不能比大地區大;

按照開發標準：
1 先做大地區；
2 如果有地區與地區並列加上float:left;浮動的地區用地區包含起來；
3 最後做小地區;

<div style=" width:800px; height:120px; background:#0F6;
text-align:center;">

標籤 div
屬性 寬，高，背景，對齊，。。。。。
屬性值 修飾屬性的值;800px;

CSS:階層式樣式表;用來設定頁面的樣式，讓頁面更美觀;
使用方式：
1 內聯樣式；寫在標籤後面，直接通過style來定義本標籤的樣式，不會影響帶其他元素的樣式;

2 內部樣式；
統一把樣式寫在
<head>
<style>
//樣式
</style>
</head>

需要樣式選取器來實現；
六種選取器：
1 元素選取器：通過元素名來定義地區的樣式;
div{屬性：屬性值} --定義的是頁面中所有div元素的樣式;
2 ID選取器；在元素後面加上id="d1";
取名規則：字母或者數字，底線的組合；數字不能排第一位;比如 d3 d_3 3_d(不可)
#d1{屬性：屬性值} --定義的是頁面中id名字為d1的元素的樣式;
3 類別選取器；在元素後面加上class="c1";
.c1{}--定義頁面中類名叫c1的元素的樣式;

id與class選取器的區別:
id選取器是定義單個的元素；
類別選取器是可以定義一類，也可以定義單個元素;

4 分組選取器：可以同時定義多個元素的樣式；
div,h1,h2,h3,h4{...} 定義的是頁面中所有的div,h1,h2,h3,h4元素的樣式;
color:#FF0;設定字型的顏色：顏色;
5 派生選取器：定義地區下的地區的樣式;
<div>
<p></p>
</div>
div p{}---定義到的是div地區下的p元素的樣式;

6 偽類別選取器：只針對效果去定義樣式；
hover:當滑鼠移動到目標上方的時候；發生效果;

無序列表
<ul>
<li>內容寫在這裡</li>
<li></li>
<li></li>
</ul>
ul無序列表，li是裡面的一列，內容寫在li裡面
<a href="F1.html" target="_blank">思誠的萬老師來東華理工帶同學們敲代碼！</a>
a 超級連結；target="_blank" 建立一個頁面跳轉；href="F1.html" 目標頁面地址;

3 外部樣式；
<link rel="stylesheet" type="text/css" href="./中國電信_1.css"/>

盒子模型：內邊距和外邊距;

內邊距：padding: 在本地區中，內容離本地區的上下左右的距離;

padding-left:10px;內容離左邊框的距離是10px;
padding-right:20px;離右;
padding-top:30px;離上邊框
padding-bottom:40px;離下邊框;

padding:10px; 內容離上下左右的距離都是10px;
padding:10px 20px;內容離上下10px 左右是20px;
padding:10px 20px 30px 40px;內容離上是10px 右20px 下30px 左40px；（順時針方向）

注意：使用內邊距的時候地區範圍會變大！

border:1px solid;邊框：1px粗細，solid 實線

外邊距:margin:本地區離其他地區的距離;

margin-top/-bottom/-left/-right:本地區離其他地區的上下左右的距離；
margin:10 20 30 40px;本地區離上 右 下 左的距離;
margin:0 auto;上下的距離是0，左右的距離自動相等；位置就置中了;

Iphone6頁面的布局：

大地區裡面分為 上 地區(無序列表，每一列都浮動)，下地區（圖片）;

list-style:none;清除無序列表前面的點;
*{ margin:0; padding:0;}設定所有元素的內邊距和外邊距都為0；
text-decoration:none;清除底線;
font-size:22px; 設定字型大小
font-weight:bold;設定字型的粗細;

Web前端開發 學習筆記