HTML静态页面——SOLANA制作

介绍写作背景

SOLANA是我将要介绍的HTML静态页面的名字,可以称它为“蓝色海湾”,这个静态页面是我去年初学HTML,CSS时制作的,包括一些页面的布局,鼠标的滑动效果等元素,现在来看确实还有很多的不足之处,比如一些标签的命名规范和代码比较冗余,也希望能对初学者有点帮助。

静态页面效果展示

在介绍 SOLANA编写过程之前,先给大家看一下页面效果图:


HTML静态页面——SOLANA制作_第1张图片
solana1.png

HTML静态页面——SOLANA制作_第2张图片
solana2.PNG

HTML静态页面——SOLANA制作_第3张图片
solana3.PNG

静态页面制作过程

#引入CSS文件,由于这个页面的css较多,就不一一赘述了,建议使用外部引入方法

    
    SOLANA
    

#页面布局,分为上中下结构

![](images/img/slider-bg-1.jpg)

MULTIPURPOSE THEME

CRAS JUSTO ODIO, DAPIBUS AC FACILISIS

![](images/img/icon-buy.png)

Solana is a Responsive Multipurpose Theme

Easy Customizable, Retina Ready, Cross-Browser Compatible, Unlimited Colors

PURCHASE IT
THIS IS THE LIST OF
OUR RECENT
WORKS
![](images/img/port-2-1.jpg)

Lorem Ipsum

web design

![](images/img/port-2-2.jpg)

Lorem Ipsum

photography

![](images/img/port-2-3.jpg)

Lorem Ipsum

illustration

![](images/img/features-icon.png)
FULLY
RESPONSIVE
  • Fully Responsive
  • Retina Ready
  • SEO Optimized
  • Easy to Customize
STAY TUNED.
READ OUR
NEWS
![](images/img/post-2-1.jpg)

Craes Nustro

10 Okt 2013 | 7 Comments

Lorem ipsum dolor sit amet, consec at adipiscing elit. Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet. Aliquam...

![](images/img/arrow-rm.png)
![](images/img/post-2-2.jpg)

Sed Lectus

10 Okt 2013 | 7 Comments

Lorem ipsum dolor sit amet, consec at adipiscing elit. Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet. Aliquam...

![](images/img/arrow-rm.png)
![](images/img/post-2-3.jpg)

Lorem Ipsum

10 Okt 2013 | 7 Comments

Lorem ipsum dolor sit amet, consec at adipiscing elit. Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet. Aliquam...

![](images/img/arrow-rm.png)
![](images/img/icon-mail.png)

NEWS LETTER

Stay up-to date with the latest news and other stuffs, Sign Up today!

![](images/img/back-top.png)

结语

相信大家在看完这段HTML之后可能会觉得头大,其实现在看来应该有很大的提升空间,但是作为初学者来说,只要把效果做出来了,也是很大的提高,随着知识的不断积累,同一段代码可能还可以继续优化。下面我将介绍一下HTML中比较重要和常用的命名规范。
1.关于布局命名,可以使用以下html命名标签,也可以使用比较常用的左中右结构,left,center,right,上中下结构,top,middle,bottom或者
header,content,footer


HTML静态页面——SOLANA制作_第4张图片
html布局.PNG

2.关于命名注意事项

 (1) 一律小写;
 (2) 尽量用英文;
 (3) 不加中杠和下划线;
 (4) 尽量不缩写,除非一看就明白的单词

你可能感兴趣的:(HTML静态页面——SOLANA制作)