代码编织梦想

声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正!

实现效果

点击前:
在这里插入图片描述
点击后:
在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*清除页面上的默认样式*/
		* {
			margin: 0;
			padding: 0;
        }

        /*清除页面上li元素的默认样式:即去掉小黑点*/
        li { 
        	list-style: none;

        }
        a {
            text-decoration: none;
        }

        .one {
        	width: 1202px;
        	height: 142px;
        	/*tips:当一个div里放图片时,最好一定要设置高度,不要指望图片的自然高度撑开div,因为会差4px*/
        	margin: 0 auto;
        	/*先设置盒子宽度,然后margin设置左右auto,使盒子居中显示在页面*/
        }
        .two {
        	margin: 0 auto;
        	width: 1202px;
        	background-color: #fe8a63;
        	height: 40px;
        }
        .two li {
            float: left;
            margin-right: 1px;
        }
        .two li a{
        	display: inline-block;
        	width: 150px;
        	height: 40px;
        	line-height: 40px;
        	text-align: center;
        	background-color: #ffaa71;
        	color: black;
        }
        .two li a:hover {
        	color: white;
        	background-color: #543243;
        }
	</style>
	
</head>
<body>
	
		<div class="one">
		   <img src="imgs/view.jpg" alt="">
	    </div>
		<div class="two">
			<li><a href="#">首页</a></li>
			<li><a href="#">前端</a></li>
			<li><a href="#">后端</a></li>
			<li><a href="#">工具使用</a></li>
			<li><a href="#">关于我</a></li>
		</div>
</body>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/pilgrim_121/article/details/111088730

css实现炫彩字体-爱代码爱编程

css实现炫彩字体 #logo { font-weight: 600; font-size: 28px; font-family: "黑体"; color: #8c888b;

html4-爱代码爱编程

html4 经过这段时间的学习,对于html的一些基础知识有了一定的了解。所谓好记性不如烂笔头,唯有一点点累积,才能汇聚成知识的海洋。现在,我对这段时间的学习做一个总结。 一、HTML的定义 HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言。HTML也在不断的更新,最新版本已经出现了HTML5。在HTML5中出现了许多新特性,也

2020-12-13-爱代码爱编程

2020.12.13我与HTML的初遇 在未来小组这一阶段的考核任务是仿照未来小组的一个介绍网站做出来一个相似的复制版。这一阶段的学习使我和HTML初遇,一个网站,HTML是网站的骨架,css是皮囊,javascript使之赋予精神生气。我目前仅仅学完HTML,HTML现在主流浏览器支持HTML5,所以目前的制作的doctype都是以html5为准。HT

HTML的精简概述-爱代码爱编程

对于HTML的精简概述 HTML全称Hypertext Markup Language,用于搭建网页的结构; 浏览器能够查看、解析的网页都是.html或者.htm文件。(html和htm其实是同类文件,只是因为系统环境问题,限制了后缀长度,才会有.htm,目前流行系统中基本都使用.html) 更新5.0的原因 5.0的出现是为了解决浏览器之间的

2020-12-13【web前端HTML5(emmet插件)篇】-爱代码爱编程

Emmet—写HTML/CSS快到飞起 在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,下面会介绍如何使用。 Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开

在vue中使用better-scroll,完成平滑滚动效果-爱代码爱编程

在vue中使用Better-Scroll,完成平滑滚动效果 BScroll官方文档 此博客参考于以上的官方文档,并加以vue的小Demo建立。 引言、BetterScroll 是什么 BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscro

css实现炫彩字体-爱代码爱编程

css实现炫彩字体 #logo { font-weight: 600; font-size: 28px; font-family: "黑体"; color: #8c888b;

VUE中使用百度地图BaiduMap-爱代码爱编程

VUE中使用百度地图BaiduMap 以前在html页中使用了echart,做了很多图表,也集成了百度地图,效果很好。最近,开始研究vue加 .net core的框架,所以也想把echart和百度地图用在vue上,把整个过程记录下来,以备自己和别人使用借鉴 第一种,使用VUE BAIDU MAP 网址是:https://dafrok.github.i

css基础篇 01 语法规范 基本选择器 字体属性 文本属性 样式表-爱代码爱编程

语法规范 样式都写在<style>里,<style>一般写到<head>上方 样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外 属性值前面,冒号后面,保留一个空格 选择器(标签)和大括号中间保留空格 基本选择器 标签选择器 用法 标签名 {样式属性} 例子 h3 { color:

元素的显示和隐藏(display、visibility、overflow)-爱代码爱编程

类似网页广告,当点击关闭就不见了,但重新刷新页面,就会重新出现。 本质:让元素在页面中显示或者隐藏。 一、display 显示 display属性用于设置一个元素如何显示。 display: none; 隐藏对象display: block; 转换为块级元素;显示元素display隐藏元素后,不再占有原来的位置。 二、visibility 可见性

IntelliJ IDEA使用教程(动图详解):Emmet 的使用-爱代码爱编程

Emmet 的使用 Emmet 的介绍 Emmet 的前身叫做:Zen Coding,也许熟知旧名的人不在少数。Emmet 一般前端工程师用得比较多,具体它是做什么的,我们通过下面两张 Gif 演示图来说明: IntelliJ IDEA 自带 Emmet 功能,使用的快捷键是 Tab。 Emmet 资料介绍: Emmet 官网

从零到入职-番外篇-Python-网络爬虫-爱代码爱编程

工具准备 Python环境 -> 建议用Anaconda浏览器 -> Chrome (它提供了强大的开发者工具)PycharmWeb应用(需要了解一下网络访问的全过程)HTML(超文本标记协议,组织网页结构内容)CSS(层叠样式表,页面的展示方式)JavaScript(弥补HTML,CSS的不足,为用户提供更丰富的交互模式)爬虫 网络爬虫(