HTML/CSS/学习(一)

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML/CSS 实现 Educoder 顶部导航栏的代码如下: HTML 代码: ``` <nav class="navbar"> <div class="navbar-logo"> <img src="https://www.educoder.net/static/img/logo.8b4d7e4.png" alt="Educoder" /> </div> <div class="navbar-menu"> <ul> <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> <li><a href="#">关于我们</a></li> </ul> </div> </nav> ``` CSS 代码: ``` .navbar { display: flex; align-items: center; justify-content: space-between; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .navbar-logo img { height: 40px; } .navbar-menu ul { list-style: none; margin: 0; padding: 0; display: flex; } .navbar-menu li { margin: 0 10px; } .navbar-menu a { display: block; padding: 10px; color: #333; text-decoration: none; } .navbar-menu a:hover { color: #f00; } ``` 解释: - `.navbar`:定义导航栏的样式,包括背景颜色、阴影、内边距等; - `.navbar-logo`:定义导航栏的 LOGO 样式,包括图片高度等; - `.navbar-menu`:定义导航栏菜单的样式,包括列表样式、内边距、左右对齐等; - `.navbar-menu ul`:定义菜单列表的样式,包括去掉列表标记、内边距、外边距等; - `.navbar-menu li`:定义菜单项的样式,包括左右外边距等; - `.navbar-menu a`:定义菜单项链接的样式,包括块状元素、内边距、文字颜色等; - `.navbar-menu a:hover`:定义鼠标悬停时菜单项链接的样式,包括文字颜色等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值