为了账号安全,请及时绑定邮箱和手机立即绑定

網站基本佈局

請多多指教!

製作一個網站大致佈局:
第一種:
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下载
官方微信

举报

0/150
提交
取消