HTML+CSS的练习之网上书城主页面的实现

博主终于把CSS学完了,废话不说,先上代码~

 





bookStore



	
首页 > 旅游 > 图书列表

商品目录


计算机类

共100种商品
书名:xxx
售价:xxx
书名:xxx
售价:xxx
书名:xxx
售价:xxx
书名:xxx
售价:xxx
书名:xxx
售价:xxx
书名:xxx
售价:xxx
书名:xxx
售价:xxx
书名:xxx
售价:xxx
CONTACT US
copyright 2017 © striner All Rights RESERVED

 

 

接下来,我对CSS做一个小小的总结.不全面之处大家勿怪~

 

CSS官方的定义为"层叠样式表".引入方式一共分为四种:

常用的分为内嵌样式,内部样式,外部样式三总,外加@import不常用方式一种.这四种是针对CSS与HTML文件的关系而划分.

这里我采用外部样式在标签中使用标签将CSS进行引入.

 

CSS选择器分为基本选择器(元素选择器,id选择器,class选择器),属性选择器,伪元素选择器三种.

其中,元素选择器书写语法为: html标签名 {CSS属性}

id选择器书写语法为: #(id) {CSS属性}

class选择器书写语法为: .class的值 {CSS属性}

属性选择器语法为: 基本选择器[属性='属性值'] {CSS属性}

 

伪元素选择器最为有趣,可以使一个对象根据鼠标悬浮点击事件分为四个状态: 静止,悬浮,触发,完成

当鼠标不触及该元素时,可使用 a:link {CSS属性} 对其进行设置    -----静止状态

当鼠标触及该控件时,可使用 a:hover {CSS属性} 对其进行设置    -----悬浮状态

当鼠标点击事件发生时,可使用 a:active {CSS属性} 对其进行设置    -----触发状态

当点击事件完成时,可使用 a:visited {CSs属性} 对其进行设置    -----完成状态

 

至于CSS的七大属性以及它的盒子模型(border,padding,margin)我暂且略去不谈.

接下来,就上效果图吧~

HTML+CSS的练习之网上书城主页面的实现_第1张图片

HTML+CSS的练习之网上书城主页面的实现_第2张图片

emmm,这里放上我用纯HTML写的页面博客链接地址:http://blog.csdn.net/striner/article/details/78605405

用木有发现加上CSS之后页面比之前更好看了,我将"全部目录商品"修改为了黄色,top部分还使用了盒子模型对其位置进行了修饰,部分元素我还对其设置了不同颜色的悬浮状态,效果图如下:

HTML+CSS的练习之网上书城主页面的实现_第3张图片       HTML+CSS的练习之网上书城主页面的实现_第4张图片

 

了解相关git代码请移步:https://github.com/striner/striner.github.io/tree/master/bookStore

想查看具体效果请移步:https://striner.github.io/bookStore/index.html#

 

喜欢就请关注我,你们的关注是我最大的动力~

你可能感兴趣的:(##,前端,HTML,CSS,HTML,css,前端)