一个div里有多个a标签,改变a标签的字体颜色方法

 

<script type="text/javascript">
var all=document.getElementById("big");
var allDiv=all.getElementsByTagName("div");

for(var i=1;i<allDiv.length+1;i++){
allDiv[i-1].οnmοuseοver=function(){
var alla=this.getElementsByTagName("a");
for(var ele in alla){
alla[ele].style.color="red";
}
}
allDiv[i-1].οnmοuseοut=function(){
var alla=this.getElementsByTagName("a");
for(var ele in alla){
alla[ele].style.color=" ghostwhite";
}
}
}

转载于:https://www.cnblogs.com/Huanghaihui/p/6032398.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用CSS来编写响应式导航,具体的CSS代码如下:nav {display: flex; width: 100%; font-size: 14px; box-sizing: border-box; justify-content: center; text-align: center;} ### 回答2: 要实现一个响应式导航栏,可以按照以下步骤进行编写: 1. 开始HTML代码的编写。在 `<body>` 标签内创建一个 `<nav>` 元素作为导航栏的容器。 2. 在 `<nav>` 元素内部创建一个无序列表 `<ul>` ,列表项为导航栏的菜单选项。 3. 在 `<ul>` 元素内部添加若干个 `<li>` 元素,每个元素代表一个菜单选项。可以根据需要添加更多菜单选项。 4. 在CSS样式中,为 `<nav>` 元素指定宽度和高度,可以使用 `width` 和 `height` 属性设置宽度和高度的数值。同时,使用 `text-align: center` 属性使导航栏中的文字居中。 5. 设置 `<ul>` 元素的 `display` 属性为 `flex`,并使用 `justify-content: center` 属性将菜单选项居中。使用 `padding` 属性增加菜单选项的间距。 6. 为 `<li>` 元素添加悬停效果和过渡动画等样式,提升用户体验。 7. 使用CSS媒体查询,根据设备的屏幕宽度来调整导航栏的显示方式和样式。例如,在较小的屏幕上,可以将导航栏改为垂直显示,并适当调整字体大小和间距等。 8. 最后,通过在HTML文件中引入CSS样式文件,将样式应用到导航栏上。 以上是一个简单的响应式导航栏的实现思路,可以根据具体需求和设计风格进行进一步的自定义和美化。 ### 回答3: 要编写一个响应式导航,可以采用以下的HTML和CSS代码: HTML代码: ```html <div class="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </div> ``` CSS代码: ```css .navigation { width: 100%; /* 设置导航的宽度为100% */ } .navigation ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #f1f1f1; text-align: center; /* 文字居中 */ box-sizing: border-box; } .navigation li { display: inline-block; width: 25%; /* 设置每个导航项的宽度为25% */ } .navigation li a { display: block; padding: 10px 0; text-decoration: none; font-size: 16px; /* 设置字体大小为16像素 */ text-align: center; color: #333; } .navigation li a:hover { background-color: #ddd; color: #000; } ``` 通过设置导航容器的宽度为100%,导航项的宽度为25%,以及文字的字体大小为16像素,可以实现一个有宽度、字体大小、盒子高度和文字居中的响应式导航。导航项采用inline-block布局,使得可以在容器的宽度有所变化时自动调整导航项的排列。通过:hover伪类,可以在鼠标悬停时改变导航项的背景颜色和文字颜色,以提升用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值