HTML css架構

日期：
<<結構>>

<!DOCTYPE html>
<html>
<head>
<the website title>
<the website css>
</head>
<body>
<section 1>
<section 2>
...
<section n>
<footer>
</body>
</html>

<<語法註解>>

   Background:可調整背景顏色


   color:字體顏色

   font:字
  1. font-family:Helvetica Neue , Hevetica 黑體, Arial 宋體, sans-serif.
  2. <em> 斜體
  3. <strong>粗體((舊的語言會用<b>
  4. <h1>  很大
  5. <h6>  最小


Margin:邊界
  1. 字體框架周圍
  2. 法1 margin:上下   左右
  3. 法2 margin 上 右 下 左(順時針)
  4. 法3 margin-right :大小

Padding:填充

Size大小調整: 
  1. weight : 200px
  2. height : 200px

button:按鈕用法
  1. border:none(無邊線
  2. border-radius(邊角弧度
  3.   ...
nav:導航(超連結用


div:用來做小框格，通常包在ul裡面

網頁連結用<a>
目的位於同一資料夾
<a href="index.html">Home</a>
返回跟目錄(目的位處於上個資料夾
<a href="../index.html">Home</a>
目的位於下一資料夾(名為page資料夾內)
<a href="page/index.html">Home</a>

#Style.css
統一網頁中的style外觀(貫穿)
於<head>內插入
<head>
<link rel="stylesheet" href="style.css">
</head>

<code>
index
<!DOCTYPE html>

<html>
<head>
<title>My page!!!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="location.html">Location</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>Home</h1>
</header>
<section>
<div>a</div>
<div>b</div>
<div>c</div>

</section>
<section>lower-section</section>
<footer>footer</footer>


</body>
</html>


style.css

body{
background:rgb(0, 0, 0);
color:white;
font-family: Helvetica Neue,Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
header{
background:black;
margin: 20px;
}
section{
background: white;
color: gray;
padding:20px;
display:flex;
flex-direction:row;
}
div{
background :rgb(255, 160, 160);
display:inline-block;
margin:auto;
width:100px;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
display:inline-block;
margin-right:20px;
}
footer{
background: black;
padding:10px 20px;
}

soure:3-6





留言

張貼留言