继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

網站基本佈局

高慕程
关注TA
已关注
手记 23
粉丝 2
获赞 20

請多多指教!

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


第二種:

https://img.mukewang.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動圖;漸變色;等







打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP