亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

網站基本佈局

請多多指教!

製作一個網站大致佈局:
第一種:
https://img1.sycdn.imooc.com//5caac2b10001956b05860434.jpg


第二種:

https://img1.sycdn.imooc.com//5caac2de000106a205820440.jpg

在HTML中:

在<title>中加入標籤;并在加入標籤圖標:<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">//favicon.ico為圖片大小為16 * 16的ico;

<meta name=”keywords” content=””>//寫入關鍵字
<meta name=” description” content=””>//網站描述;這兩個是為了seo

而關於css:

首先先将所有的外边距及内边距设为0:*{margin:0;padding:0}

將body設為:

body{
    /*  字体  */
   
font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;

    /*  字号 */
   
font-size: 16px;

    /*  字体颜色  */
   
color: #333;

    /* 行距 */
   
line-height: 1.75;
}

ul li若是将图片该改为样式list-style-image:url(“”);

图片:alt:图片不能显示时出现的文字:title:鼠标移上去时提示的文字;

讓文字與圖片中間對齊;將圖片設置為vertical-align:middle;

 记住尖括号>>要用转义符:&gt;<<:&lt;


關於內容部分:記得模塊化,背景添加動態圖(氣泡)或漸變色;

文字樣式:描邊,陰影,倒影,斜體,粗體,顏色;

                文字具有立體效果:

text-shadow: 0px 1px 0px rgb(204, 204, 204), 
 0px 2px 0px rgb(201, 201, 201),
 0px 3px 0px rgb(187, 187, 187),
 0px 4px 0px rgb(185, 185, 185),
 0px 5px 0px rgb(170, 170, 170),
 0px 6px 1px rgba(0, 0, 0, 0.1),
 0px 0px 5px rgba(0, 0, 0, 0.1), 
 0px 1px 3px rgba(0, 0, 0, 0.3), 
 0px 3px 5px rgba(0, 0, 0, 0.2), 
 0px 5px 10px rgba(0, 0, 0, 0.25),
 0px 20px 20px white;

按鈕:主要是背景色,陰影,顏色 和hover效果;

主要:控制好留白和陰影;

        若是加載需要時間記得添加加載動態圖;

        網頁響應式網站(手機端和pc端兩種個);兼容性;css動圖;漸變色;等







點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
2
獲贊與收藏
20

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消