前端问题,关于HTML5,CSS3,制作一个空心圆

html-css011

前端问题,关于HTML5,CSS3,制作一个空心圆,第1张

你可以试试2个div都设一下背景,一个模糊的放底层,清晰的放上层,通过控制清晰的那个div的位置和背景位移来达到你要的效果,或者你网上搜一下模糊滤镜的js脚本来实现,当然,如果你那个清晰的圆形的位置是固定不变的,那么你还是把这个效果用ps做成一张图是最好的,这也是最方便的,做网页设计不要纠结于技巧,能用最简单的方式达到效果是最好的方式,如果是我,我肯定就是做2个图片来实现效果最简单快捷

1.文本类属性

① 字体类型

语法:font-family:字体1,字体2,字体3...

设置多个字体时,浏览器会优先识别字体1,找不到则识别字体2,都无法识别时,显示浏览器默认字体。

② 字体大小

语法:font-size:数值+单位

字体大小单位有px、em、rem、pt;浏览器默认大小为16px;字体大小一般设置为偶数值;谷歌浏览器识别最小字体为12px。

③ 字体加粗

属性值:normal常规、bold加粗、bolder更粗、100-900数值

数值100-900字体加粗程度不同,其中100-500为常规字体,600-900为加粗字体。

④字体颜色

颜色值写法有三种:直接写颜色单词,如red;十六进制写法,如color:#000;rgb写法 ,color:rgb(0,0,0)

⑤字体倾斜

⑥复合写法

font:字体大小/行高 字体类型

⑦行高

语法: line-height:数值+单位

数值不能为负值

⑧水平对齐方式

语法:text-align:left左对齐

text-align:center 居中

text-align:right 右对齐

text-align:justify 两端对齐,只对英文起作用

⑨文本修饰

text-decoration:none去掉文本修饰,可去掉超链接(对a标签使用)的下划线

text-decoration:underline下划线

text-decoration:overline上划线

text-decoration:line-through删除线

文本缩进

text-indent:数值+单位

数值为正向后缩进,负值向前缩进

强制在一行显示

white-space:nowrap

长单词换行

word-warp:break-word

2.背景类属性

语法:background-color:颜色值

属性值同字体颜色属性值相同用法

语法:background-image:url(图片路径)

语法:background-position:left;

水平方向:left、center、right

垂直方向:top、center、bottom

属性值为数值时,水平方向向右为正,向左为负,垂直方向向下为正,向上为负。水平和垂直方向都居中时可写background-position:center

background-attachment:scroll

属性值:scroll 默认值;fixed 固定

当容器出现滚动条时,背景图固定不滚动,可设置为fixed。

语法:background-repeat:repeat

属性值:repeat平铺;no-repeat;repeat-x横向平铺;repeat-y纵向平铺。

background:背景图 背景平铺 背景位置

background:url(13211.jpg) no-repeat right bottom

3.列表属性

语法:list-style-type:disc

属性值:disc实心圆;circle空心圆;square实心方块;decimal数字;none去除列表符号。

4.伪类选择器

语法: 选择符:hover{属性:属性值}

超链接a标签的四个状态:

a) a:link 超链接的初始状态,链接没有被访问过时的状态

b) a:visited 链接访问过后的状态

c) a:hover 鼠标悬停在超链接上的状态(鼠标滑过)

d) a:active 超链接被激活时的状态(鼠标按下)

这个叫列表项标志,有三种标识方法:

1、list-style-type 值对应的描述:

none    无标记。    

disc    默认。标记是实心圆。    

circle    标记是空心圆。    

square    标记是实心方块。    

decimal    标记是数字。    

decimal-leading-zero    0开头的数字标记。(01, 02, 03, 等。)    

lower-roman    小写罗马数字(i, ii, iii, iv, v, 等。)    

upper-roman    大写罗马数字(I, II, III, IV, V, 等。)    

lower-alpha    小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)    

upper-alpha    大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)    

lower-greek    小写希腊字母(alpha, beta, gamma, 等。)    

lower-latin    小写拉丁字母(a, b, c, d, e, 等。)    

upper-latin    大写拉丁字母(A, B, C, D, E, 等。)    

hebrew    传统的希伯来编号方式    

armenian    传统的亚美尼亚编号方式    

georgian    传统的乔治亚编号方式(an, ban, gan, 等。)    

cjk-ideographic    简单的表意数字    

hiragana    标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)    

katakana    标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)    

hiragana-iroha    标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)    

katakana-iroha    标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

2、list-style-image语法格式:

 li {list-style-image : url(xxx.gif)}

3、list-style 简写列表样式:

//语法规则:

li {list-style : url(example.gif) square inside}

//值-》参数

list-style-type    设置列表项标记的类型。    

list-style-position    设置在何处放置列表项标记。

list-style-image    使用图像来替换列表项的标记。

inherit    规定应该从父元素继承 list-style 属性的值。