零基础html5+div+css+js网页开发教程第009期 导航栏css美化

简介: 零基础html5+div+css+js网页开发教程第009期 导航栏css美化

1.Css基础结构



html中的class属性对应到css中为符号  .

html中的id属性对应到css中为符号  #

html中的层次结构,每一层对应到css中要用 空格 隔开


2.logo设置



.header .logo{

font-size: larger;/* 字体大小 */

background-color: black; /* 背景颜色 */

color:#fff;/* 字体颜色 */

padding:10px;/*内边距*/

}


3.导航条容器设置



.header .nav{

background-color:royalblue;

overflow: auto;/* 使用浮动时候结合使用,可以使得容器的宽高自动体现出来 */

}


4.首页两个字的特殊配置



.header .nav a.index{   /*a.index代表一个class=index的a标签*/

background-color: orangered;

}


5.导航条的css代码



.header .nav a{

background-color:royalblue;

font-size:17px;

color:#fff;

padding: 10px;

float:left;  /* 向左浮动,一旦浮动后,就会脱离文档流 */

text-decoration: none; /*去下划线*/

}


6.鼠标放上去后的css



.header .nav a:hover{  /*当鼠标放上去的时候执行的css代码*/

background-color: orangered;

}


7.总结



1、回看几个基础的css属性,比如字体大小、颜色、浮动、背景颜色、内边距

2、掌握css的抒写原则与框架


8.源代码



index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>刘金玉编程</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/common.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <div class="logo">刘金玉编程</div>
        <div class="nav">
          <a class="index" href="index.html">首页</a>
          <a href="#">美丽生活</a>
          <a href="#">VB</a>
          <a href="#">JAVA</a>
          <a href="#">C++</a>
          <a href="http://ljy.kim">编程创造城市</a>
        </div>
      </div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

common.css文件

body{
  margin:0;
}

main.css文件

.header .logo{
  font-size: larger;/* 字体大小 */
  background-color: black; /* 背景颜色 */
  color:#fff;/* 字体颜色 */
  padding:10px;/*内边距*/
}
/* 导航条 */
.header .nav{
  background-color:royalblue;
  overflow: auto;/* 使用浮动时候结合使用,可以使得容器的宽高自动体现出来 */
}
.header .nav a.index{   /*a.index代表一个class=index的a标签*/
  background-color: orangered;
}
.header .nav a{
  background-color:royalblue;
  font-size:17px;
  color:#fff;
  padding: 10px;
  float:left;  /* 向左浮动,一旦浮动后,就会脱离文档流 */
  text-decoration: none; /*去下划线*/
}
.header .nav a:hover{  /*当鼠标放上去的时候执行的css代码*/
  background-color: orangered;
}
相关文章
|
1天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
1天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
6 1
|
1天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
3天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
10 0
|
3天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
10 0
|
3天前
|
Web App开发 监控 JavaScript
破解动态网页:如何用JavaScript获取自动消失的联想词
【6月更文挑战第2天】在获取动态加载的联想词时,遇到问题:输入搜索词后弹出的联想词框在失去焦点时消失,使得直接定位HTML元素困难。解决方案包括: 1. 查找DOM节点:在弹框出现时记录其类名或ID,然后通过JavaScript获取元素HTML内容。但由于元素加载有延迟,需在输入框获取焦点后延迟执行,例如使用`setTimeout`。 2. 使用`MutationObserver`监视DOM变化:创建观察者监听特定类的元素出现,当元素加载时打印其HTML。为避免获取旧内容,回调函数中使用`setTimeout`确保DOM完全渲染。
14 3
|
4天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
10 2
|
4天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
15 3
|
4天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
21 2
|
13天前
|
前端开发 容器
HTML <div> 和<span>
【6月更文挑战第2天】HTML <div> 和<span>。
17 5