商苑电商：我的首页

来自CloudWiki
跳转至： 导航， 搜索

确定主题色

  • 首先确定你要模仿的竞品网站
  • 然后根据它的颜色确定你自己的主题色。
所谓主题色，就是你网页以灰色基调的前提下，你最好只选择一种鲜艳的颜色来作为你想要突出的事物，比如标题、菜单、按钮等等。

创建首页

  • 新建一个文件夹“shanyuan”，在其中建立三个子文件夹：img、html和css

Web2-1.png

  • 在html目录下创建index.html文件，代码如下:
<html> 
  <head> 
     <title>商苑电商</title>
     <meta charset="utf-8" />
  </head>
  <body> 
     <h2> 商苑电商</h2>
     <hr />        
     <p>商苑电商 - 专业的校园网上购物商城，100%正品、低价、货到付款、7天无理由退货。</p>

     <p>商苑电商网上超市，精选全网好货，提供休闲零食、校园玩具、休闲食品、服饰内衣，手机数码、生活用品等各个品类的优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验!" </p>
  </body>
</html>

这时在浏览器中打开，应该能看到网页，但是没有样式。

添加首页的样式

  • 在css文件夹中创建对应的CSS样式文件index.css，将设置背景颜色，设置字体颜色（也就是你的主题色），编写后注意保存。

行内样式

用行内样式设置首页样式

内嵌样式

用内嵌样式设置首页样式

外部样式表

用外部样式表设置首页样式


  • 在浏览器上打开，效果如下：
Web2-2.png
取自“http://www.openbrains.net/mediawiki/index.php?title=商苑电商：我的首页&oldid=23181”