最近更新

CSS3教程:利用border的transparent特性完成面包屑导航

border属性在CSS3新增了很多样式,比如border-radius圆角样式,其中可以为border-color设置transparent值则实现了利用该样式绘制三角形等的能力。transparent表示透明,透明不代表不存在。在CSS2里面,只能为background-color设置该值,在C...

CSS第一课:CSS简介及选择器介绍

CSS,全名为“层叠样式表”,Cascading Style Sheets,样式表比较好理解,就是为网页添加了样式,而层叠比较难理解,它的核心是“继承”与“冲突”。CSS的目的:重定义HTML的默认样式。也许你觉得HTML标签的默认样式很丑,但是却没有在意过这些标签为什么丑,它有什么默认的样式?我如...

HTML第八课:表单

表单的目的是获取用户的信息,然后处理信息并返回给用户结果,比如百度搜索,登录表单,或者保存用户的信息到数据库中,比如注册表单,发表日志,评论别人的文章等。一、表单的结构1、必须有表单的标签<form></form>,把所有可以输入信息的控件包含在表单的标签里面。2、要有用户能...

CSS3教程:box-shadow完成盒阴影效果

与text-shadow的原理一样,只不过text-shadow是为文字做阴影,而box-shadow是为盒对象做阴影。这里的盒包括块状(block)、内联(inline)、内联块状对象(inline-block)。如果对盒对象不清楚的童鞋,可以先看这篇文章:CSS教程:display常用的四个值(...

CSS教程:display常用的四个值(block,inline,none,inline-block)

网页的元素总体可以概括为两大类:1、块状对象(block)2、内联对象(inline)一、什么是块状(block)对象?无论宽度多少,都独占一个通栏的,不能和别的对象并排在一起的就是。比如h1~h6,div,ul,li,p等元素。可以通过浮动(float)实现块状元素的并排,但是会产生高度不自适应和...

CSS3教程:text-shadow制作文字阴影效果

在css2时代,如果文字制作了特殊的样式,比如图层样式之阴影发光等效果,必须把该文字保存为图片才能展示在网站上。而css3新增的text-shadow属性,可以轻松实现文字投影、发光、内阴影等很棒的立体效果,具体效果如图:查看案例1、text-shadow语法结构text-shadow:length...

HTML第七课:图像

图像传达信息的能力与文字一样,甚至更具感染力,所以网页中一定少不了图片的应用。图像主要有三种用法:1、普通图片,用<img/>标签显示在网页中的素材。2、背景图片,用来美化网页或者显示特殊字体效果。3、图片地图热区,实现一张图片有多个超链接。一、普通图片<img/><i...

HTML第六课:列表

列表是组织网页内容非常有用的一种方法。列表主要分为:1、无序列表2、有序列表3、定义列表一、无序列表用在网站的导航(网站主导航,侧边栏导航,文章列表)上,用来组织内容,是一种结构性标签。在li里面可以包含div等布局性的标签。1、基本结构<ul>    &...

HTML第五课:超链接和锚点

了解了URL路径的概念后,超级链接就很容易掌握了。一、超链接超级链接的目的就是实现页面和页面,站点和站点之间的跳转,没有超链接就没有互联网,所以认真学习和工作的时候不要随便点开一个新闻的推送链接,否则你就可能引发多诺米牌效应,最后迷失在互联网里。1、基本结构<a href="...

CSS小技巧汇总(不断更新)

这篇文章主要记录学习CSS过程中遇到的很好的小技巧,不断更新……1、平时设置字体的时候总喜欢分开写,比如这样:font-family: Arial, Helvetica;  font-weight: bold;  font-style: ...

利用FontAwesome字体实现小图标的插入

网站上面不是所有的图片都是图片,有些小图标可能是一种特殊字体呈现的,比如这种纵向导航前面的小图标。具体的使用方法如下:1、先下载FontAwesome字体和对应的CSS文件,放在自己的站点css文件夹中。2、在html页面中调用该css文件,代码如下:<link rel="...

HTML第四课:物理路径、绝对路径、相对路径

学习超级链接之前,先认识URL(统一资源定位器),如果不考虑百度百科这样专业的解释,我们大致可以把路径分为“物理路径”、“绝对路径”、“相对路径”。一、物理路径,以盘符开头的本地路径,比如:f:\文件夹\1.jpg<ul>     <li&...

HTML第三课:认识标题、段落、区块、强调等文本标签

一个网页中文字是传达信息的主要元素,文本主要由重要的标题、文章段落、被强调的文本、普通的文本组成。一、标题标题标签有六个,依次是h1,h2,h3,h4,h5,h6。<h1>网页最重要的文字标签,一般用在logo、三级页面文章标题上。</h1> <h2>重要性次于...

HTML第二课:认识HTML4和HTML5的文档结构

这两节课的目标是认识HTML4和HTML5的文档结构,了解它们的区别。一、HTML4文档结构<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...

HTML第一课:认识HTML语言并在DW中建立站点

这两节课的目标是认识HTML是什么以及学会在DW中建立站点,并发布自己的第一个html页面。一、认识HTMLHTML概念:超本文标记语言(HyperText Markup Language)超文本:浏览器就可以解释的,比如http(超文本传输协议)。官方解释:“超文本”就是指页面内可以包含图片、链接...

4.25 西华师范大学项目实训第十一天

周末休息了一天,周一上课发现同学们的导航菜单完成效果有问题,于是查漏补缺,解决同学们的问题。今天问题很多,整个上午忙着卫生间都没去T_T下午是是华信智远的廖老师做宣讲,主要是职业选择,特别是UI、安卓、java这些方向。...

4.23 西华师范大学项目实训第九天

今天的任务是完成平板和手机端的响应式布局。1、利用media query媒体特性实现不同设备的响应式布局。@media screen and (max-width: 1000px){} @media screen and (ma...

4.22 西华师范大学项目实训第八天

今天的任务是完成昨天没有完成的三级页面侧边栏样式设置和新增模板,新建页面等功能。1、修改三个tab的选项栏默认颜色和鼠标经过颜色以及选中颜色。#Tblogpublished span{        cursor:po...

4.21 西华师范大学项目实训第七天

今天主要任务是优化三级页面的侧边栏。1、 在文章的正文下面添加“上一篇”、“下一篇”<nav class="prevnext">     {if $article.Prev}   &n...

4.20 西华师范大学项目实训第六天

今天主要是优化三级页面。1、为三级页面的文章添加作者、发布时间、分类、阅读评论次数。找到zblog的官方wiki文档,通过查找文档找到这些变量的代码。<div class="entry-meta">     &nbs...
Top