用div+css临摹一张网页

先看一下页面效果,倒持一晚上弄出来的,中间有好多不熟悉的点,来罗列一下
在这里插入图片描述

1. 网页标题的小图标制作

在这里插入图片描述
如图,设置方法为:

<link rel="icon" type="text/css" href="img/yellow.ico" />

需要先选取一张icon类型的图片(在网上有在线生成icon的网站,如:在线生成icon
前面的部分是固定写法:link rel = “icon” type = “text/css”(其中type = "text/css"可以省略)
href后面跟的是图片的相对位置
yellow.ico是我的图片名称

2.超链接去除下划线

在这里插入图片描述
一般我们在定义超链接时,字段都会带有下划线,很多网页的超链接都没有下划线,去除方法为:
在css中设计样式

a{
text-decoration : none;
}

即可去除下划线

3.鼠标浮动时会出现变化

如鼠标放上时会有颜色改变
在这里插入图片描述

在这里插入图片描述
实现方法为
可以把按钮定义为一个div,并定义成超链接的形式(点击实现页面跳转)
鼠标悬浮在按钮上时,有颜色改变

a:hover{
	background-color:blue;
}
发布了20 篇原创文章 · 获赞 4 · 访问量 837

猜你喜欢

转载自blog.csdn.net/weixin_43986850/article/details/102596617
今日推荐